按鈕插件提供了一組可以控制按鈕多種狀態(tài)的功能，比如按鈕的禁用狀態(tài)、正在加載狀態(tài)、正常狀態(tài)等。本文將詳細介紹Bootstrap按鈕插件相關內容，一起來看看吧，希望對大家學習Bootstrap有所幫助。

　　加載狀態(tài)

　　通過按鈕可以設計狀態(tài)提示，當單擊按鈕時，會顯示loading狀態(tài)信息。例如，點擊“加載”按鈕，會觸發(fā)按鈕的加載的狀態(tài)

　　通過添加 data-loading-text="Loading..." 可以為按鈕設置正在加載的狀態(tài)，但 從 v3.3.5 版本開始，此特性不再建議使用，并且已經在 v4 版本中刪除了

　　[注意]如果不設置 data-loading-text ，則按鈕文本在Loading狀態(tài)時，默認顯示的是'loading...'

<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>

　　模擬單選

　　模擬單選按鈕是通過一組按鈕來實現單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設計更具個性化，可以定制出更美觀的單選按鈕組

　　在Bootstrap框架中按鈕插件中，可以通過給按鈕組自定義屬性 data-toggle="buttons"

<div 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>

　　模擬多選

　　使用按鈕組來模擬復選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義 data-toggle="buttons" 來實現。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]

　　<div 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>

　　按鈕狀態(tài)

　　使用 data-toggle 屬性還可以激活按鈕的行為狀態(tài)，實現在激活和未激活之間進行狀態(tài)切換。單擊時將按鈕激活，再單擊可以讓按鈕恢復到默認狀態(tài)

<button type="button" data-toggle="button" class="btn btn-primary">有狀態(tài)的按鈕</button>

<button type="button" class="btn btn-primary">普通按鈕</button>

　　JS觸發(fā)

　　按鈕插件可以通過調用button函數，然后給button函數傳入具體的參數，實現不同的效果。而其中有兩個參數是固定不變的，即toggle和reset。其他的都可以隨意定義：

　　$("#mybutton").button("toggle");//反轉按鈕狀態(tài)

　　$("#mybutton").button("reset");//重置按鈕狀態(tài)

　　$("#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>

　　JS源碼

　　【1】IIFE

　　使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環(huán)，并且只能從jQuery的fn里進行擴展

　　+function ($) {

　　//使用es5嚴格模式    'use strict';

　　//

　　}(window.jQuery);

　　【2】初始設置

　　var Button = function (element, options) {

　　//要觸發(fā)的元素

　　this.$element  = $(element)

　　//合并參數

　　this.options   = $.extend({}, Button.DEFAULTS, options)

　　//是否是加載狀態(tài)

　　this.isLoading = false

　　}

　　//版本號為3.3.7

　　Button.VERSION  = '3.3.7'

　　//默認loadinf時的文本內容為'loading...'

　　Button.DEFAULTS = {

　　loadingText: 'loading...'

　　}

　　【3】插件核心代碼

　　//設置按鈕狀態(tài)的方法

　　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 = $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') {

　　//設置加載狀態(tài)為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)

　　}

　　//切換按鈕狀態(tài)

　　Button.prototype.toggle = function () {

　　//設置change標記

　　var changed = true

　　//查找?guī)в?/span>[data-toggle="buttons"]屬性的最近父元素

　　var $parent = this.$element.closest('[data-toggle="buttons"]')

　　//如果父元素存在

　　if ($parent.length) {

　　//查找觸發(fā)元素內是否存在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，則觸發(fā)change事件

　　if (changed) $input.trigger('change')

　　} else {

　　this.$element.attr('aria-pressed', !this.$element.hasClass('active'))

　　//重置元素的active樣式

　　this.$element.toggleClass('active')

　　}

　　}

　　【4】jQuery插件定義

　　function Plugin(option) {

　　//根據選擇器，遍歷所有符合規(guī)則的元素

　　return this.each(function () {

　　var $this   = $(this)

　　//獲取自定義屬性bs.button的值

　　var data    = $this.data('bs.button')

　　var options = typeof option == 'object' && option

　　//如果值不存在，則將Button實例設置為bs.button值

　　if (!data) $this.data('bs.button', (data = 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之后可以繼續(xù)使用該老代碼

　　$.fn.button             = Plugin

　　//重設插件構造器，可以通過該屬性獲取插件的真實類函數

　　$.fn.button.Constructor = Button

　　【5】防沖突處理

　　$.fn.button.noConflict = function () {

　　//恢復以前的舊代碼

　　$.fn.button = old

　　//將$.fn.button.noConflict()設置為Bootstrap的Tab插件

　　return this

　　}

　　【6】綁定觸發(fā)事件

　　$(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是單選或多選按鈕，觸發(fā)focus事件

　　if ($btn.is('input,button')) $btn.trigger('focus')

　　//否則，找到子元素中的第一個具有visible狀態(tài)的input或button，觸發(fā)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))

　　})

 

來源：博客園