Bootstrap按鈕插件
阿新 • • 發佈：2017-07-12
isa http .cn state jquer rip 模擬 loading tab
前面的話
按鈕插件提供了一組可以控制按鈕多種狀態的功能，比如按鈕的禁用狀態、正在加載狀態、正常狀態等。本文將詳細介紹Bootstrap按鈕插件
加載狀態
通過按鈕可以設計狀態提示，當單擊按鈕時，會顯示loading狀態信息。例如，點擊“加載”按鈕，會觸發按鈕的加載的狀態
通過添加 data-loading-text="Loading..." 可以為按鈕設置正在加載的狀態，但從 v3.3.5 版本開始，此特性不再建議使用，並且已經在 v4 版本中刪除了
[註意]如果不設置data-loading-text，則按鈕文本在Loading狀態時，默認顯示的是‘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 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>
模擬多選
使用按鈕組來模擬復選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義data-toggle="buttons"來實現。唯一不同的是，將input[type="radio"]換成input[type="checkbox"]
<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>
按鈕狀態
使用 data-toggle 屬性還可以激活按鈕的行為狀態，實現在激活和未激活之間進行狀態切換。單擊時將按鈕激活，再單擊可以讓按鈕恢復到默認狀態
<button type="button" data-toggle="button" class="btn btn-primary">有狀態的按鈕</button> <button type="button" class="btn btn-primary">普通按鈕</button>
JS觸發
按鈕插件可以通過調用button函數，然後給button函數傳入具體的參數，實現不同的效果。而其中有兩個參數是固定不變的，即toggle和reset。其他的都可以隨意定義：
$("#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>
JS源碼
【1】IIFE
使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，並且只能從jQuery的fn裏進行擴展
+function ($) { //使用es5嚴格模式 ‘use strict‘; // }(window.jQuery);
【2】初始設置
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...‘ }
【3】插件核心代碼
//設置按鈕狀態的方法 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‘) { //設置加載狀態為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‘) } }
【4】jQuery插件定義
function Plugin(option) { //根據選擇器，遍歷所有符合規則的元素 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之後可以繼續使用該老代碼 $.fn.button = Plugin //重設插件構造器，可以通過該屬性獲取插件的真實類函數 $.fn.button.Constructor = Button
【5】防沖突處理
$.fn.button.noConflict = function () { //恢復以前的舊代碼 $.fn.button = old //將$.fn.button.noConflict()設置為Bootstrap的Tab插件 return this }
【6】綁定觸發事件
$(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)) })
Bootstrap按鈕插件