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. OC基础11：基本的C语言特性2

    "OC基础"这个分类的文章是我在自学Stephen G.Kochan的<Objective-C程序设计第6版>过程中的笔记. 19.定义一个int类型的指针: int ...

  2. Seek the Name, Seek the Fame（Kmp）

    Seek the Name, Seek the Fame Time Limit : 4000/2000ms (Java/Other)   Memory Limit : 131072/65536K (J ...

  3. sql server中的 stuff 函数

    STUFF eg: SELECT stuff(12345,3,1,'-') result:    12-45 以下文段来自:http://www.cnblogs.com/lingxyd/archive ...

  4. OC中NSString 的常用方法

    NSString *str1 = @"BeiJing"; NSString *str2 = @"beijing"; //全部转为大写 NSLog(@" ...

  5. Mysql Binlog Dump原理

    Register 首先,我们需要伪造一个slave,向master注册,这样master才会发送binlog event.注册很简单,就是向master发送COM_REGISTER_SLAVE命令,带 ...

  6. Lazarus中TreeView导出XML以及XML导入TreeView

    本来说是要给自己的某程序加一个xml导出功能,但是自己也没接触过xml,加之delphi和lazarus的xml部分还都不一样,折腾好久(整一天)才解决问题.. 如下是作为导出功能的组件部分: uni ...

  7. c++11: <thread>学习

    <thread>头文件中包含thread类与this_thread命名空间,下面逐一介绍. thread类 1. 构造函数 (1)默认构造函数 thread() noexcept; 默认构 ...

  8. Android 尺寸 神图

  9. php or || 和 and &&

    追溯代码时遇到这个坑,一直是略有懵懂,那就填了这个坑. 1 if ( ! defined('ENVIRONMENT') OR ! file_exists($file_path = BASEPATH.' ...

  10. PHP框架学习之Laravel基本功能

    Laravel5的功能不是一般的多(路由,中间件,blade模版...),单是一个路由功能就让哥很蛋疼,虽说路由使用起来变得很灵活,但真他妹的有点变态了.这里是我照着Laravel5官方文档研究的成果 ...