Bootstrap每天必学之按钮(Button)插件


Posted in Javascript onApril 25, 2016

按钮(Button)在 Bootstrap 按钮 一章中介绍过。通过按钮(Button)插件,您可以添加进一些交互,比如控制按钮状态,或者为其他组件(如工具栏)创建按钮组。

如果您想要单独引用该插件的功能,那么您需要引用 button.js。或者,正如 Bootstrap 插件概览 一章中所提到,您可以引用 bootstrap.js 或压缩版的 bootstrap.min.js。

一、加载状态

如需向按钮添加加载状态,只需要简单地向 button 元素添加 data-loading-text="Loading..." 作为其属性即可,如下面实例所示:

<button id="fat-btn" class="btn btn-primary" data-loading-text="Loading..."
 type="button"> 加载状态
</button>
<script>
 $(function() {
  $(".btn").click(function(){
   $(this).button('loading').delay(1000).queue(function() {
   // $(this).button('reset');
   });  
  });
 }); 
</script>

Bootstrap每天必学之按钮(Button)插件

二、单个切换

如需激活单个按钮的切换(即改变按钮的正常状态为按压状态,反之亦然),只需向 button 元素添加 data-toggle="button" 作为其属性即可,如下面实例所示:

<button class="btn btn-primary" data-toggle="button" autocomplete="off">单个切换</button>

注:在 Firefox 多次页面加载时,按钮可能保持表单的禁用或选择状态。解决方案是:添加 autocomplete="off"。

Bootstrap每天必学之按钮(Button)插件

三、单选按钮

类似地,您可以创建单选按钮组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加单选按钮组的切换。

<div class="btn-group" data-toggle="buttons">                
 <label for="" class="btn btn-primary active">               
  <input type="radio" name="sex" autocomplete="off" checked>男           
 </label>                         
 <label for="" class="btn btn-primary">                 
  <input type="radio" name="sex" autocomplete="off">女             
 </label>                         
</div>

                                                                                               

四、复选按钮

您可以创建复选框组,并通过向 btn-group 添加 data 属性 data-toggle="buttons" 来添加复选框组的切换。

<div class="btn-group" data-toggle="buttons">
 <label for="" class="btn btn-primary active">
  <input type="checkbox" name="fa" autocomplete="off" checked>
  音乐 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  体育 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  美术 </label>
 <label for="" class="btn btn-primary">
  <input type="checkbox" name="fa" autocomplete="off">
  电脑 </label>
</div>

Bootstrap每天必学之按钮(Button)插件

Button 插件中的 button 方法中有三个参数: toggle、 reset、 string(比如 loading、complete)。

//可代替 data-toggle="button"

$('button').on('click', function() {
 $(this).button('toggle');
})

Bootstrap每天必学之按钮(Button)插件

下面是一些按钮(Button)插件中有用的方法:

Bootstrap每天必学之按钮(Button)插件

以上就是本文的全部内容,希望对大家的学习有所帮助,更多关于Bootstrap内容如可以参考专题:Bootstrap学习教程

Javascript 相关文章推荐
JQUERY 浏览器判断实现函数
Aug 20 Javascript
js本身的局限性 别让javascript做太多事
Mar 23 Javascript
js内置对象 学习笔记
Aug 01 Javascript
javascript页面上使用动态时间具体实现
Mar 18 Javascript
jquery delay()介绍及使用指南
Sep 02 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JS特效实现图片自动播放并可控的效果
Jul 31 Javascript
[原创]Javascript 实现广告后加载 可加载百度谷歌联盟广告
May 11 Javascript
AngularJS自定义控件实例详解
Dec 13 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
JavaScript学习笔记之函数记忆
Sep 06 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
第一章之初识Bootstrap
Apr 25 #Javascript
第二章之Bootstrap 页面排版样式
Apr 25 #Javascript
第三章之Bootstrap 表格与按钮功能
Apr 25 #Javascript
原生JS实现旋转木马式图片轮播插件
Apr 25 #Javascript
第四章之BootStrap表单与图片
Apr 25 #Javascript
第五章之BootStrap 栅格系统
Apr 25 #Javascript
详解Bootstrap插件
Apr 25 #Javascript
You might like
php daddslashes()和 saddslashes()有哪些区别分析
2012/10/26 PHP
PHP在不同页面间传递Json数据示例代码
2013/06/08 PHP
详解WordPress开发中wp_title()函数的用法
2016/01/07 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
PHP中利用sleep函数实现定时执行功能实现代码
2016/08/25 PHP
php实现的mysqldb读写分离操作类示例
2017/02/07 PHP
PHP基于DOM创建xml文档的方法示例
2017/02/08 PHP
Yii框架核心组件类实例详解
2019/08/06 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
从URL中提取参数与将对象转换为URL查询参数的实现代码
2012/01/12 Javascript
用jquery生成二级菜单的实例代码
2013/06/24 Javascript
js中同步与异步处理的方法和区别总结
2013/12/25 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
js判断浏览器是否支持严格模式的方法
2016/10/04 Javascript
jquery控制页面的展开和隐藏实现方法(推荐)
2016/10/15 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
vue中@change兼容问题详解
2019/10/25 Javascript
Jquery 获取相同NAME 或者id删除行操作
2020/08/24 jQuery
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
django使用图片延时加载引起后台404错误
2017/04/18 Python
Python正则表达式常用函数总结
2017/06/24 Python
Python信息抽取之乱码解决办法
2017/06/29 Python
django创建自定义模板处理器的实例详解
2017/08/14 Python
使用python实现ANN
2017/12/20 Python
python实现两个dict合并与计算操作示例
2019/07/01 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
总经理助理岗位职责
2013/11/08 职场文书
教育局长自荐信范文
2013/12/22 职场文书
技术副厂长岗位职责
2013/12/26 职场文书
期中考试反思800字
2014/05/01 职场文书
暑期培训班招生方案
2014/08/26 职场文书
边城读书笔记
2015/06/29 职场文书