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. Windowsclient开发简单介绍（四）

            在上一篇文章里,我简单扼要的给大家介绍了一下GDI的基础知识,包含DC,HDC.GDI对象等等,总的来说都是些偏理论的知识,属于概念的范畴. 今天这篇文章里,我就要正式開始有点实际的东 ...

  2. 【最大流】【HDU3338】【Kakuro Extension】

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3338 题目大意:填数字,使白色区域的值得和等于有值得黑色区域的相对应的值,用网络流来做 题目思路:增加 ...

  3. RDLC报表系列(三) 总计和折叠

    继续接上一篇的内容,本文主要是简述总计和折叠 1.在Dept列右击,选择插入行->组内部下方(每个部门的Total),插入新的一行,并拆分单元格,然后合并列 3.设置文本框属性,格式为Total ...

  4. git 删除本地分支和远程分支、本地代码回滚和远程代码库回滚

    [git 删除本地分支] git branch -D br [git 删除远程分支] git push origin :br  (origin 后面有空格) git代码库回滚: 指的是将代码库某分支退 ...

  5. WindowsForm 计算器

             计算器  可以分一下类 数字键 + - * / % =和撤销 归零C最简单 下面看一下计算器具体的代码 using System; using System.Collections. ...

  6. HDU 1027 - Ignatius and the Princess II

    第 m 大的 n 个数全排列 DFS可过 #include <iostream> using namespace std; int n,m; ]; bool flag; ]; void d ...

  7. Android 更换系统字体......

    Android 更换系统字体...... 原文:http://vision-apps.blogspot.hk/2012/02/android-better-way-to-apply-custom-fo ...

  8. VS2008 自定义向导的default.js设置（DLL文件）

    function OnFinish(selProj, selObj) { try { var strProjectPath = wizard.FindSymbol('PROJECT_PATH'); v ...

  9. cURL模拟POST方法提交XML数据并解析

    php编程中会用到xml格式传送数据,这里演示下php以post形式发送xml,服务器接收,并解析xml的过程! post_xml.php源码: <?php header("Conte ...

  10. MYSQL 没有varchar(max)这个类型。

    背景: MYSQL 中不可以用varchar(max) 这种类型列来建立表 -------------------------------------------------------------- ...