1）属性：

data-loading-text="载入中..."——使button呈现载入状态；

data-toggle="button"——使按钮可以切换状态；

data-toggle="buttons"——使按钮组具有类似选择框的选择/取消功能。

autocomplete="off"——解决FireFox的兼容性问题：即FireFox会在多个页面载入之间保持button的禁用状态;

2）方法：

$().button("toggle")——切换按钮状态。

$().button("loading")——设置button状态为loading - 即将button置为禁用状态并将文字内容切换为loading;

$().button("reset")——重置button状态 - 并将button上的文本还原为原始值；

$().button(string)——重置按钮状态
- 并将button上的文本重置为传入的值。

很多其它细节请參考演示样例：

<!DOCTYPE html>

<html lang="zh_CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width,initial-scale=1">

    <title>饭盒儿——发现身边不一样的世界</title>

    <link rel="stylesheet" href="css/bootstrap.min.css" type="text/css">

    <script src="js/jquery-2.1.3.min.js"></script>

    <script src="js/bootstrap.min.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <style>

    </style>

</head>

<body>

<div class="container">

    <h3>button.js演示样例</h3>

    <button type="button" class="btn btn-primary js-loading-btn" data-loading-text="载入中...">提交评论</button>

    <button type="button" class="btn btn-default" data-toggle="button" autocomplete="off" aria-pressed="false">发表意见</button>

    <div class="btn-group" data-toggle="buttons">

        <label class="btn btn-primary active">

            <input type="checkbox" autocomplete="off" checked>销量优先

        </label>

        <label class="btn btn-primary">

            <input type="checkbox" autocomplete="off">价格优先

        </label>

        <label class="btn btn-primary">

            <input type="checkbox" autocomplete="off">距离优先

        </label>

    </div>

    <div class="btn-group" data-toggle="buttons">

        <label class="btn btn-primary active">

            <input type="radio" name="food" autocomplete="off" checked>川菜

        </label>

        <label class="btn btn-primary">

            <input type="radio" name="food" autocomplete="off">湘菜

        </label>

        <label class="btn btn-primary">

            <input type="radio" name="food" autocomplete="off">粤菜

        </label>

    </div>

    <button type="button" class="btn btn-warning mybtn" data-complete-text="我是成年人">请确认您已满18岁。</button>

</div>

<script>

    //点击按钮，文本改为"载入中...",3秒后复原

    $(".js-loading-btn").on("click",function(){

        var btn=$(this).button("loading");

        setTimeout(function(e){

            btn.button("reset")

        },3000);

    });

    $(".mybtn").on("click",function(e){

        $(this).button('complete');

        $(this).removeClass('btn-warning');

        $(this).addClass('btn-primary');

    });

</script>

</body>

</html>

Bootstrap的js插件之按钮(button)的更多相关文章

  1. 使用bootstrap的JS插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  2. Bootstrap transition.js 插件

    Bootstrap transition.js 插件详解   Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就 ...

  3. 《玩转Bootstrap（JS插件篇）》笔记

    导入JavaScript插件 不论是单独导入还一次性导入之前必须先导入jQuery库. 一次性导入 <script src="js/bootstrap.min.js"> ...

  4. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-1导入JavaScript插件

    导入JavaScript插件 Bootstrap除了包含丰富的Web组件之外,如前面介绍的下拉菜单.按钮组.导航.分页等.他还包括一些JavaScript的插件. Bootstrap的JavaScri ...

  5. 玩转Bootstrap（JS插件篇）-第1章 模态弹出框 :1-4 模态弹出框--结构分析

    模态弹出框--结构分析 Bootstrap框架中的模态弹出框,分别运用了“modal”.“modal-dialog”和“modal-content”样式,而弹出窗真正的内容都放置在“modal-con ...

  6. Bootstrap的js插件之警告框(alert.js)

    data-dismiss="alert"--为关闭button加入该属性能够使其自己主动为警告框赋予关闭功能. .fade .in--为警告框在关闭时加入动画效果. 很多其它细节參 ...

  7. Bootstrap transition.js 插件详解

    Bootstrap 自带的 JavaScript 插件的动画效果几乎都是使用 CSS 过渡实现的,而其中的 transition.js 就是为了判断当前使用的浏览器是否支持 CSS 过渡.下面先来简单 ...

  8. Bootstrap的js插件之側边栏停靠(affix)

    以下是一个比較常见的側边栏停靠的样例: <!DOCTYPE html> <html lang="en"> <head> <meta cha ...

  9. Bootstrap的js插件之轮播(carousel)

    轮播请查看下面演示样例.基本已经涵盖最经常使用的一个轮播 <!DOCTYPE html> <html lang="en"> <head> < ...

随机推荐

  1. JavaScript系列----事件机制

    1.事件流 1.1.标准事件流 所谓的标准事件流指的的:EMCAScript标准规定事件流包含三个阶段,分别为事件捕获阶段,处于目标阶段,事件冒泡阶段. 下面是一段html代码,根据代码来说明标准事件 ...

  2. SVN服务迁移备份操作步骤

    SVN服务备份操作步骤 1.准备源服务器和目标服务器 源服务器:192.168.1.250 目标服务器:192.168.1.251 root/rootroot 2.对目标服务器(251)装SVN服务器 ...

  3. C#参考之sealed密封类(转)

    C# 语言参考 sealed(C# 参考) 当对一个类应用 sealed 修饰符时,此修饰符会阻止其他类从该类继承.在下面的示例中,类 B 从类 A 继承,但是任何类都不能从类 B 继承. 1     ...

  4. Android 之旅开始了！先自我了解下Android与Linux之间的关系

    Android是在Linux2.6的内核基础之上运行的,提供核心系统服务:安全.内存管理.进程管理.网络组.驱动模型.内核部分还相当于一个介于硬件层和系统中其他软件组之间的一个抽象层次.但是严格来说它 ...

  5. SpringMVC RequestMapping 详解

    SpringMVC RequestMapping 详解 RequestMapping这个注解在SpringMVC扮演着非常重要的角色,可以说是随处可见.它的知识点很简单.今天我们就一起学习Spring ...

  6. Maven创建父子工程(简单、完整)

    Eclipse创建Maven父子工程(书中有的叫聚合工程,因为看了网上很多教程,实际操作总会有这样那样的小问题,有时候包结构还不对,创建成功后索性就自己写一篇帮助小白,有不对请指教) 1 file-n ...

  7. Less命名空间

    Less命名空间 当我们拥有了大量选择器的时候,特别是团队协同开发时,如何保证选择器之间重名问题?如果你是 java 程序员或 C++ 程序员,我猜你肯定会想到命名空间 Namespaces. Les ...

  8. fetch知识点汇总

    使用XHR发送一个json请求一般是这样: const xhr = new XMLHttpRequest() xhr.open('Get', url) xhr.responseType = 'json ...

  9. Python带参数的装饰器

    在装饰器函数里传入参数 # -*- coding: utf-8 -*- # 2017/12/2 21:38 # 这不是什么黑魔法,你只需要让包装器传递参数: def a_decorator_passi ...

  10. thinkphp 使用插件异步上传图片或者文件

    使用tp做一些上传的功能,的确挺方便.但是在一些特殊情况下无法单独的使用tp的上传功能, 或者需要做一些比较酷炫的上传效果,这里就需要用到框架了. 我在这里使用的是uploadify上传插件. 首先需 ...