1.加载状态

　　通过按钮（Button）插件，您可以添加进一些交互，比如控制按钮状态，或者为其他组件（如工具栏）创建按钮组。

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

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<button type="button" id="myButton" data-loading-text="Loading..." class="btn btn-primary" autocomplete="off">
  Loading state
</button>

<script>
  $('#myButton').on('click', function () {
    $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });
  })
</script>
</body>
</html>

2.单个切换

　如需激活单个按钮的切换（即改变按钮的正常状态为按压状态，反之亦然），只需向 button 元素添加 data-toggle="button" 作为其属性即可

3.复选框（Checkbox）

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

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 1
   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 2
   </label>
   <label class="btn btn-primary">
      <input type="checkbox"> 选项 3
   </label>
</div>

</body>
</html>

4.单选按钮（Radio）

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

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option1"> 选项 1
   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option2"> 选项 2
   </label>
   <label class="btn btn-primary">
      <input type="radio" name="options" id="option3"> 选项 3
   </label>
</div>    
</body>
</html>

5.方法

下面是一些按钮（Button）插件中有用的方法：

方法 描述 实例
button('toggle') 切换按压状态。赋予按钮被激活的外观。您可以使用 data-toggle 属性启用按钮的自动切换。
  1. $().button('toggle')
.button('loading') 当加载时，按钮是禁用的，且文本变为 button 元素的 data-loading-text 属性的值。
  1. $().button('loading')
.button('reset') 重置按钮状态，文本内容恢复为最初的内容。当您想要把按钮返回为原始的状态时，该方法非常有用。
  1. $().button('reset')
.button(string) 该方法中的字符串是指由用户声明的任何字符串。使用该方法，重置按钮状态，并添加新的内容。
  1. $().button(string)

<!DOCTYPE HTML>
<html>
<head>
<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" >
<script src="/scripts/jquery.min.js"></script>
<script src="/scripts/bootstrap.min.js"></script>
 </head>
<body>
<h4>点击按钮查看方法效果</h4>
<h4>演示 .button('toggle') 方法</h4>
<div id="myButtons1" class="bs-example">
   <button type="button" class="btn btn-primary">原始</button>
</div>

<h4>演示 .button('loading') 方法</h4>
<div id="myButtons2" class="bs-example">
   <button type="button" class="btn btn-primary"
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button('reset') 方法</h4>
<div id="myButtons3" class="bs-example">
   <button type="button" class="btn btn-primary"
      data-loading-text="Loading...">原始
   </button>
</div>

<h4>演示 .button(string) 方法</h4>
<button type="button" class="btn btn-primary" id="myButton4"
   data-complete-text="Loading finished">请点击我
</button>
<script type="text/javascript">
   $(function () {
      $("#myButtons1 .btn").click(function(){
         $(this).button('toggle');
      });
   });
   $(function() {
      $("#myButtons2 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
         });        
      });
   });   
   $(function() {
      $("#myButtons3 .btn").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('reset');
         });        
      });
   });  
   $(function() {
      $("#myButton4").click(function(){
         $(this).button('loading').delay(1000).queue(function() {
            $(this).button('complete');
         });        
      });
   });
</script>     
</body>
</html>

data按钮的更多相关文章

  1. SQL SERVER 2012 尝试读取或写入受保护的内存。这通常指示其他内存已损坏。 (System.Data)

    标题: 连接到服务器------------------------------ 无法连接到 192.168.1.253. ------------------------------其他信息: 尝试 ...

  2. [Android 搞机]Twrp 中清除 data 和搞机清除的区别

    近日搞机,用上了 Havoc OS.突然发现设置里有个"加密手机",于是手贱点了进去.手机立刻重启了,然后卡在开机第一屏.遂进 Twrp 高级清除中清除了 data 并重新刷入.重 ...

  3. JS提交对象数组到服务端的方法总结(C#实例)

    *转载请注明出处: 作者:willingtolove: 本文链接:http://www.cnblogs.com/willingtolove/p/4741549.html 正文: 1. 方法一:利用aj ...

  4. nmon监控工具的使用

    该工具的使用主要参考自http://blog.itpub.net/23135684/viewspace-626439/ http://nmon.sourceforge.net/pmwiki.php 生 ...

  5. Linux下使用NMON监控、分析系统性能

    一.下载nmon. 根据CPU的类型选择下载相应的版本:http://nmon.sourceforge.net/pmwiki.php?n=Site.Downloadwget http://source ...

  6. CentOS6.4 安装nmon

    安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...

  7. android: SQLite 数据库的最佳实践

    6.5.1    使用事务 前面我们已经知道,SQLite 数据库是支持事务的,事务的特性可以保证让某一系列的操 作要么全部完成,要么一个都不会完成.那么在什么情况下才需要使用事务呢?想象以下场 景, ...

  8. android: SQLite查询数据

    掌握了查询数据的方法之后,你也就将数据库的 CRUD 操 作全部学完了.不过千万不要因此而放松,因为查询数据也是在 CRUD 中最复杂的一种 操作. 我们都知道 SQL 的全称是 Structured ...

  9. android: SQLite删除数据

    删除数据对你来说应该就更简单了,因为它所需要用到的知识点你全部已经学过了. SQLiteDatabase 中提供了一个 delete()方法专门用于删除数据,这个方法接收三个参数,第一 个参数仍然是表 ...

随机推荐

  1. flex容器解析

    通常在Flex种有两种形式的容器:布局和导航. 在容器中我们可以同时设置一些空间和子容器,我们可以叫在容器内定义的任何组件为该容器的孩子. 在一个Flex程序的根部是一个叫做Application C ...

  2. systemctl 命令完全指南

    http://www.linuxidc.com/Linux/2015-07/120833.htm Systemctl是一个systemd工具,主要负责控制systemd系统和服务管理器. System ...

  3. C#打印条码BarTender SDK打印之路和离开之路（web平凡之路）

    从来没想过自己会写一篇博客,鉴于这次从未知的探索到一个个难点的攻破再到顺利打印,很想记录这些点滴,让后人少走弯路. 下面走进正题. 需求:取数据库里的相应的字段数据,并生成条形码,可以批量.单条打印. ...

  4. open函数

    open函数用来打开文件 其语法为:open(name[, mode[, buffering]]) open函数使用一个文件名作为唯一的强制参数,然后返回一个文件对象.模式(mode)和缓冲(buff ...

  5. cocos2d-x 打包工具用Shell 还是 用 Python

    功能上说两种脚本都可以完成工作.但是跨平台开发用Shell意味着脚本要写两套.Macosx 的bash 和window bat.如果用python写一套就可以了.

  6. Sublime 学习记录（四） Alignment 插件

    1)  Alignment 插件的安装 打开命令面板 输入pci 回车 输入Alignment 回车安装好即可 2)  Alignment 用处 用于代码对齐 3) Alignment 快捷键 默认为 ...

  7. EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”或它的某一个依赖项。找到的程序集清单定义与程序集引用不匹配

    C# mvc+EF 运行视图时出现问题:未能加载文件或程序集"EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToke ...

  8. c++多线程参数的传递

    #include <iostream> #include <pthread.h> //多线程相关操作头文件,可移植众多平台 using namespace std; struc ...

  9. Gesture(手势)浅析

    1.Gesture的作用 ①在触摸屏上的连续触摸行为,形成某个方向上的移动趋势  (利用手势检测) ②连续画出一个不规则的行为  (利用增加手势) 2.手势检测(GestureDetector) // ...

  10. php设计模式之：观察者模式

    转载自php面向对象设计模式 之 观察者模式 问题 假如一个小贩, 他把产品的价格提升了, 不同的消费者会对此产生不同的反应.一般的编程模式无非是获取提升的价格,然后获取所有的消费者,再循环每个消费者 ...