BootstrapJavaScript插件：按钮(button.js)

丰富的线上&线下活动，深入探索云世界

做任务，得社区积分和周边

最真实的开发者用云体验

让每位学生受益于普惠算力

让创作激发创新

资深技术专家手把手带教

遇见技术追梦人

技术交流，直击现场

海量开发者使用工具、手册，免费下载

极速、全面、稳定、安全的开源镜像

开发手册、白皮书、案例集等实战精华

为开发者定制的Chrome浏览器插件

作者:WangMin格言:努力做好自己喜欢的每一件事

状态提示

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

1.加载状态

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

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

$('.btn').click(function(){$(this).button('loading');})当点击按钮时，会触发加载状态，按钮的文本会变成data-loading-text属性的值。加载过程中，按钮被自动禁用，它会变灰，不再响应单击。如下：

2.自定义状态

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

再为按钮定义单击事件，并在点击时调用button('complete')方法：

3.重置状态如果想让按钮的文本回到最初的样子，可以调用button('reset')方法来重置按钮的状态，让它显示初始的文本。

$('.btn').button('reset')如果没有为按钮定义data-complete-text属性，重置状态下会显示初始的文本，如果定义了data-complete-text属性，则显示data-complete-text属性指定的文本。

按钮状态切换

1.通过data属性切换按钮状态

将单个按钮的data-toggle属性设置button，或通过简单的JavaScript，就可以激活按钮的行为状态，让它在未激活和激活状态之间来回切换。

SingleToggle当单击时，会激活按钮，激活状态以深色背景显示。

再次单击时，按钮又回到默认状态，默认状态以浅色背景显示。

2.通过JavaScript切换按钮状态

SingleToggle$('.btn').click(function(){$(this).button('toggle');});注意：在实现状态切换功能时，不限制一定要用button元素，只要应用了.btn类，它可以是任何元素。

按钮组

将按钮组放在特定的容器中，不必编写JavaScript代码，就可以让按钮组具有HTML的复选框（checkbox）或单选框（radio）的效果。

1.复选按钮组

复选按钮组是类似于复选框的一组按钮，用户可以选择按钮组中的多个按钮。要添加这个功能，只需给.btn-group的按钮组容器添加data-toggle="buttons"属性，并将一组包含复选框的label元素放入容器中：

Checkbox1(pre-checked)Checkbox2Checkbox3