<button class="btn btn-primary" data-loading-text="正在加载中,请稍等..." type="button" id="loaddingBtn">加载</button><script>$(function(){    $("#loaddingBtn").click(function () {        var $btn = $(this).button("loading");        setTimeout(function(){            $btn.button(‘reset‘)        },1000);      });});    </script>

<div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary">        <input type="radio" name="options" id="options1">男    </label>    <label class="btn btn-primary">        <input type="radio" name="options" id="options2">女    </label></div>

<div class="btn-group" data-toggle="buttons">    <label class="btn btn-primary">        <input type="checkbox" name="options" id="options1">电影    </label>    <label class="btn btn-primary">        <input type="checkbox" name="options" id="options2">音乐    </label>    <label class="btn btn-primary">        <input type="checkbox" name="options" id="options3">游戏    </label>    <label class="btn btn-primary">        <input type="checkbox" name="options" id="options4">摄影    </label></div>

<button type="button" data-toggle="button" class="btn btn-primary">有状态的按钮</button><button type="button" class="btn btn-primary">普通按钮</button>

$("#mybutton").button("toggle");//反转按钮状态$("#mybutton").button("reset");//重置按钮状态$("#mybutton").button("任意字符参数名");//替换 data-任意字符参数名-text 的属性值为“按钮上显示的文本值

<button class="btn btn-primary" data-complete-text="加载完成" type="button" id="mybutton">加载</button><script>$(function(){    $("#mybutton").click(function () {        var $btn = $(this).button("loading");        setTimeout(function(){            $btn.button(‘complete‘);        },1000);      });});    </script>

+function ($) {    //使用es5严格模式    ‘use strict‘;    //}(window.jQuery);

  var Button = function (element, options) {    //要触发的元素    this.$element  = $(element)    //合并参数    this.options   = $.extend({}, Button.DEFAULTS, options)    //是否是加载状态    this.isLoading = false  }  //版本号为3.3.7  Button.VERSION  = ‘3.3.7‘  //默认loadinf时的文本内容为‘loading...‘  Button.DEFAULTS = {    loadingText: ‘loading...‘  }

  //设置按钮状态的方法  Button.prototype.setState = function (state) {    //按钮需要禁用时使用它，先赋值一个临时变量    var d    = ‘disabled‘    //当前元素    var $el  = this.$element    //如果是input，则使用val获取值，否则，使用html获取值    var val  = $el.is(‘input‘) ? ‘val‘ : ‘html‘    //获取当前元素的自定义属性，所有以data-开头的属性    var data =http://www.mamicode.com/ $el.data()    //组装需要用到的属性，如传入loading，则组装成loadingText    state += ‘Text‘    //如果data里不包含data-reset-text值，则将当前元素的值临时存放，以便过后再恢复使用它    if (data.resetText == null) $el.data(‘resetText‘, $el[val]())    //不阻止事件，以允许表单的提交    setTimeout($.proxy(function () {      //给元素赋值，如果是元素默认没有值，则从options里查询，否则，从自定义属性里查询      $el[val](data[state] == null ? this.options[state] : data[state])      //如果传入的是loading      if (state == ‘loadingText‘) {        //设置加载状态为true        this.isLoading = true        //禁用该元素(即添加disabled样式和disabled属性)        $el.addClass(d).attr(d, d).prop(d, true)      } else if (this.isLoading) {        this.isLoading = false        //如果不是，则删除disabled样式和disabled属性        $el.removeClass(d).removeAttr(d).prop(d, false)      }    }, this), 0)  }  //切换按钮状态  Button.prototype.toggle = function () {    //设置change标记    var changed = true    //查找带有[data-toggle="buttons"]属性的最近父元素    var $parent = this.$element.closest(‘[data-toggle="buttons"]‘)    //如果父元素存在    if ($parent.length) {      //查找触发元素内是否存在input元素      var $input = this.$element.find(‘input‘)      //如果是单选按钮      if ($input.prop(‘type‘) == ‘radio‘) {        //如果被选中，则设置changed为false        if ($input.prop(‘checked‘)) changed = false        //查找同级元素是否有active样式，如果有，则删除active样式        $parent.find(‘.active‘).removeClass(‘active‘)        //给当前元素添加active样式        this.$element.addClass(‘active‘)      //如果是多选按钮      } else if ($input.prop(‘type‘) == ‘checkbox‘) {        //如果多选按钮选中了，但元素没有active样式        //或者多选按钮没有选中，但元素却有active样式，则设置changed为false        if (($input.prop(‘checked‘)) !== this.$element.hasClass(‘active‘)) changed = false        //重置元素的active样式        this.$element.toggleClass(‘active‘)      }      //将多选按钮的checked设置为是否有active样式      $input.prop(‘checked‘, this.$element.hasClass(‘active‘))      //如果changed为true，则触发change事件      if (changed) $input.trigger(‘change‘)    } else {      this.$element.attr(‘aria-pressed‘, !this.$element.hasClass(‘active‘))      //重置元素的active样式      this.$element.toggleClass(‘active‘)    }  }

  function Plugin(option) {    //根据选择器，遍历所有符合规则的元素    return this.each(function () {      var $this   = $(this)      //获取自定义属性bs.button的值      var data    = http://www.mamicode.com/$this.data(‘bs.button‘)      var options = typeof option == ‘object‘ && option      //如果值不存在，则将Button实例设置为bs.button值      if (!data) $this.data(‘bs.button‘, (data = http://www.mamicode.com/new Button(this, options)))      //如果option是toggle，则直接调用该方法        if (option == ‘toggle‘) data.toggle()      //否则调用setState()方法      else if (option) data.setState(option)    })  }  var old = $.fn.button  //保留其他库的$.fn.button代码(如果定义的话)，以便在noConflict之后可以继续使用该老代码  $.fn.button             = Plugin  //重设插件构造器，可以通过该属性获取插件的真实类函数  $.fn.button.Constructor = Button

  $.fn.button.noConflict = function () {    //恢复以前的旧代码    $.fn.button = old    //将$.fn.button.noConflict()设置为Bootstrap的Tab插件    return this  }

  $(document)    //查询所有以button开头，data-toggle属性的值，绑定click事件    .on(‘click.bs.button.data-api‘, ‘[data-toggle^="button"]‘, function (e) {      //查找当前单击对象的最近的有btn样式的父元素      var $btn = $(e.target).closest(‘.btn‘)      Plugin.call($btn, ‘toggle‘)      //如果单击对象不是单选或多选按钮      if (!($(e.target).is(‘input[type="radio"], input[type="checkbox"]‘))) {        //阻止默认行为        e.preventDefault()        //如果$btn是单选或多选按钮，触发focus事件        if ($btn.is(‘input,button‘)) $btn.trigger(‘focus‘)        //否则，找到子元素中的第一个具有visible状态的input或button，触发focus事件        else $btn.find(‘input:visible,button:visible‘).first().trigger(‘focus‘)      }    })    //查询所有以button开头，data-toggle属性的值，绑定focus事件    .on(‘focus.bs.button.data-api blur.bs.button.data-api‘, ‘[data-toggle^="button"]‘, function (e) {      $(e.target).closest(‘.btn‘).toggleClass(‘focus‘, /^focus(in)?$/.test(e.type))    })