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 自定义动画概述及示例
Mar 29 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 Javascript
javascript引用赋值(地址传值)用法实例
Jan 13 Javascript
JQuery 在文档中查找指定name的元素并移除的实现方法
May 19 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
微信端开发--登录小程序步骤
Jan 11 Javascript
Javascript基础回顾之(三) js面向对象
Jan 31 Javascript
详解使用Typescript开发node.js项目(简单的环境配置)
Oct 09 Javascript
webpack 开发和生产并行设置的方法
Nov 08 Javascript
Vue如何实现监听组件原生事件
Jul 03 Javascript
JavaScript/TypeScript 实现并发请求控制的示例代码
Jan 18 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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
让Nginx支持ThinkPHP的URL重写和PATHINFO的方法分享
2011/08/08 PHP
关于PHP中Session文件过多的问题及session文件保存位置
2016/03/17 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
laravel框架与其他框架的详细对比
2019/10/23 PHP
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
Node.js的Express框架使用上手指南
2016/03/12 Javascript
js判断登陆用户名及密码是否为空的简单实例
2016/05/16 Javascript
Javascript缓存API
2016/06/14 Javascript
详解JavaScript数组过滤相同元素的5种方法
2017/05/23 Javascript
基于angular实现模拟微信小程序swiper组件
2017/06/11 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
详解Vue中组件的缓存
2019/04/20 Javascript
关于layui的动态图标不显示的解决方法
2019/09/04 Javascript
vuex的使用和简易实现
2021/01/07 Vue.js
浅谈Python浅拷贝、深拷贝及引用机制
2016/12/15 Python
Python实现的视频播放器功能完整示例
2018/02/01 Python
Pandas标记删除重复记录的方法
2018/04/08 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
利用Pandas和Numpy按时间戳将数据以Groupby方式分组
2019/07/22 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python发送邮件的实例代码讲解
2019/10/16 Python
python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例
2020/04/02 Python
Python OrderedDict字典排序方法详解
2020/05/21 Python
keras 指定程序在某块卡上训练实例
2020/06/22 Python
在pycharm创建scrapy项目的实现步骤
2020/12/01 Python
python中四舍五入的正确打开方式
2021/01/18 Python
PatPat阿根廷:妈妈们的购物平台
2019/05/30 全球购物
化工专业推荐信范文
2013/11/28 职场文书
医药学专业大学生职业生涯规划书论文
2014/01/21 职场文书
工程招投标邀请书
2014/01/26 职场文书
2014年工程部工作总结
2014/11/25 职场文书
忠诚与背叛观后感
2015/06/04 职场文书
学雷锋主题班会教案
2015/08/13 职场文书
python编写五子棋游戏
2021/05/25 Python
Python 实现绘制子图及子图刻度的变换等问题
2021/05/31 Python