Bootstrap JavaScript插件：按钮 (button.js)

最新推荐文章于 2024-08-02 16:29:51 发布

汪末末

最新推荐文章于 2024-08-02 16:29:51 发布

阅读量1.2k

点赞数 1

分类专栏： # Bootstrap 框架文章标签： bootstrap javascript typescript css html

本文链接：https://blog.csdn.net/WangMinGirl/article/details/108517047

版权

本文介绍了Bootstrap的JavaScript插件如何实现按钮的状态提示，包括加载状态、自定义状态和重置状态的设置，以及如何通过data属性和JavaScript切换按钮状态。同时，展示了如何创建复选和单选按钮组，实现类似HTML复选框和单选框的功能。

摘要由CSDN通过智能技术生成

作者:WangMin
格言:努力做好自己喜欢的每一件事
CSDN原创文章
博客地址 👉 WangMin

状态提示

通过自定义属性和简单的JavaScript，就可以让按钮具有状态提示功能。比如，没有点击按钮时，正常显示；点击按钮时，触发相应的状态，并显示该状态对应的文本信息。

1. 加载状态

要让按钮显示加载状态，首先要给按钮添加 data-loading-text 属性，它的值为加载状态要显示的文本信息，如 “Loading…”：

<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

在这里插入图片描述

还要为按钮定义单击事件，并在点击时调用 button(‘loading’) 方法，来触发加载状态。代码如下：

$('.btn').click(function(){
   
	$(this).button('loading');
})

当点击按钮时，会触发加载状态，按钮的文本会变成 data-loading-text 属性的值。加载过程中，按钮被自动禁用，它会变灰，不再响应单击。如下：
在这里插入图片描述

2. 自定义状态

按钮自定义任意状态，只需为按钮添加 data-xxx-text 属性，并在点击按钮时调用 button(‘xxx’) 方法即可。例如，为按钮自定义 complete 状态，首先为按钮添加 data-complete-text 属性，属性的值为 complete 状态要显示的文本信息：

<button type="button" id="myButton" data-complete-text

关注

专栏目录