99热99这里只有精品6国产,亚洲中文字幕在线天天更新,在线观看亚洲精品国产福利片 ,久久久久综合网

歡迎加入QQ討論群258996829
麥子學(xué)院 頭像
蘋果6袋
6
麥子學(xué)院

Bootstrap按鈕插件如何使用？

發(fā)布時(shí)間：2017-07-14 19:31  回復(fù):0  查看:2432   最后回復(fù)：2017-07-14 19:31  
按鈕插件提供了一組可以控制按鈕多種狀態(tài)的功能，比如按鈕的禁用狀態(tài)、正在加載狀態(tài)、正常狀態(tài)等。本文將詳細(xì)介紹Bootstrap 按鈕插件相關(guān)內(nèi)容，一起來看看吧，希望對(duì)大家 學(xué)習(xí)Bootstrap有所幫助。
　　 加載狀態(tài)
　　通過按鈕可以設(shè)計(jì)狀態(tài)提示，當(dāng)單擊按鈕時(shí)，會(huì)顯示loading 狀態(tài)信息。例如，點(diǎn)擊 “ 加載 ” 按鈕，會(huì)觸發(fā)按鈕的加載的狀態(tài)
　　通過添加  data-loading-text="Loading..."  可以為按鈕設(shè)置正在加載的狀態(tài)，但  從 v3.3.5  版本開始，此特性不再建議使用，并且已經(jīng)在  v4  版本中刪除了
　　[ 注意 如果不設(shè)置  data-loading-text  ，則按鈕文本在Loading 狀態(tài)時(shí)，默認(rèn)顯示的是 'loading...'
<button class="btn btn-primary" data-loading-text=" 正在加載中 , 請(qǐng)稍等 ..." type="button" id="loaddingBtn"> 加載 </button>
<script>
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button('reset')
        },1000);
      });
});   
</script>
　　 模擬單選
　　模擬單選按鈕是通過一組按鈕來實(shí)現(xiàn)單選擇操作。使用按鈕組來模擬單選按鈕組，能夠讓設(shè)計(jì)更具個(gè)性化，可以定制出更美觀的單選按鈕組
　　在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>
　　 模擬多選
　　使用按鈕組來模擬復(fù)選按鈕和模擬單選按鈕是一樣的，具有同等效果，也是通過在按鈕組上自定義  data-toggle="buttons" 來實(shí)現(xiàn)。唯一不同的是，將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>
　　 按鈕狀態(tài)
　　使用 data-toggle  屬性還可以激活按鈕的行為狀態(tài)，實(shí)現(xiàn)在激活和未激活之間進(jìn)行狀態(tài)切換。單擊時(shí)將按鈕激活，再單擊可以讓按鈕恢復(fù)到默認(rèn)狀態(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ā)
　　按鈕插件可以通過調(diào)用button 函數(shù)，然后給 button 函數(shù)傳入具體的參數(shù)，實(shí)現(xiàn)不同的效果。而其中有兩個(gè)參數(shù)是固定不變的，即 toggle 和 reset 。其他的都可以隨意定義：
　　$("#mybutton").button("toggle");// 反轉(zhuǎn)按鈕狀態(tài)
　　$("#mybutton").button("reset");// 重置按鈕狀態(tài)
　　$("#mybutton").button(" 任意字符參數(shù)名 ");// 替換  data- 任意字符參數(shù)名 -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
　　使用立即調(diào)用函數(shù)，防止插件內(nèi)代碼外泄，從而形成一個(gè)閉環(huán)，并且只能從jQuery 的 fn 里進(jìn)行擴(kuò)展
　　+ function ($) {
　　// 使用 es5 嚴(yán)格模式     'use strict';
　　//
　　}(window.jQuery);
　　【2 】初始設(shè)置
　　 var Button =  function (element, options) {
　　// 要觸發(fā)的元素
　　 this.$element  = $(element)
　　// 合并參數(shù)
　　 this.options   = $.extend({}, Button.DEFAULTS, options)
　　// 是否是加載狀態(tài)
　　 this.isLoading = false
　　}
　　// 版本號(hào)為 3.3.7
　　Button.VERSION  = '3.3.7'
　　// 默認(rèn) loadinf 時(shí)的文本內(nèi)容為 'loading...'
　　Button.DEFAULTS = {
　　loadingText: 'loading...'
　　}
　　【3 】插件核心代碼
　　// 設(shè)置按鈕狀態(tài)的方法
　　Button.prototype.setState = function (state) {
　　// 按鈕需要禁用時(shí)使用它，先賦值一個(gè)臨時(shí)變量
　　 var d    = 'disabled'
　　// 當(dāng)前元素
　　 var $el  =  this.$element
　　// 如果是 input ，則使用 val 獲取值，否則，使用 html 獲取值
　　 var  val  = $el. is('input') ? 'val' : 'html'
　　// 獲取當(dāng)前元素的自定義屬性，所有以 data- 開頭的屬性
　　 var  data = $el. data()
　　// 組裝需要用到的屬性，如傳入 loading ，則組裝成 loadingText
　　state += 'Text'
　　// 如果 data 里不包含 data-reset-text 值，則將當(dāng)前元素的值臨時(shí)存放，以便過后再恢復(fù)使用它
　　 if ( data.resetText == null) $el. data('resetText', $el[ val]())
　　// 不阻止事件，以允許表單的提交
　　setTimeout($.proxy(function () {
　　// 給元素賦值，如果是元素默認(rèn)沒有值，則從 options 里查詢，否則，從自定義屬性里查詢
　　$el[ val]( data[state] == null ?  this.options[state] :  data[state])
　　// 如果傳入的是 loading
　　 if (state == 'loadingText') {
　　// 設(shè)置加載狀態(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 () {
　　// 設(shè)置 change 標(biāo)記
　　 var changed = true
　　// 查找?guī)в?/span> [data-toggle="buttons"] 屬性的最近父元素
　　 var $parent =  this.$element.closest('[data-toggle="buttons"]')
　　// 如果父元素存在
　　 if ($parent.length) {
　　// 查找觸發(fā)元素內(nèi)是否存在 input 元素
　　 var $input =  this.$element.find('input')
　　// 如果是單選按鈕
　　 if ($input.prop('type') == 'radio') {
　　// 如果被選中，則設(shè)置 changed 為 false
　　 if ($input.prop('checked')) changed = false
　　// 查找同級(jí)元素是否有 active 樣式，如果有，則刪除 active 樣式
　　$parent.find('.active').removeClass('active')
　　// 給當(dāng)前元素添加 active 樣式
　　 this.$element.addClass('active')
　　// 如果是多選按鈕
　　}  else  if ($input.prop('type') == 'checkbox') {
　　// 如果多選按鈕選中了，但元素沒有 active 樣式
　　// 或者多選按鈕沒有選中，但元素卻有 active 樣式，則設(shè)置 changed 為 false
　　 if (($input.prop('checked')) !==  this.$element.hasClass('active')) changed = false
　　// 重置元素的 active 樣式
　　 this.$element.toggleClass('active')
　　}
　　// 將多選按鈕的 checked 設(shè)置為是否有 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) {
　　// 根據(jù)選擇器，遍歷所有符合規(guī)則的元素
　　 return  this.each(function () {
　　 var $ this   = $( this)
　　// 獲取自定義屬性 bs.button 的值
　　 var  data    = $ this. data('bs.button')
　　 var options = typeof option == 'object' && option
　　// 如果值不存在，則將 Button 實(shí)例設(shè)置為 bs.button 值
　　 if (! data) $ this. data('bs.button', ( data = new Button( this, options)))
　　// 如果 option 是 toggle ，則直接調(diào)用該方法
　　 if (option == 'toggle')  data.toggle()
　　// 否則調(diào)用 setState() 方法
　　 else  if (option)  data.setState(option)
　　})
　　}
　　 var old = $.fn.button
　　// 保留其他庫的 $.fn.button 代碼 ( 如果定義的話 ) ，以便在 noConflict 之后可以繼續(xù)使用該老代碼
　　$.fn.button             = Plugin
　　// 重設(shè)插件構(gòu)造器，可以通過該屬性獲取插件的真實(shí)類函數(shù)
　　$.fn.button.Constructor = Button
　　【5 】防沖突處理
　　$.fn.button.noConflict =  function () {
　　// 恢復(fù)以前的舊代碼
　　$.fn.button = old
　　// 將 $.fn.button.noConflict() 設(shè)置為 Bootstrap 的 Tab 插件
　　 return  this
　　}
　　【6 】綁定觸發(fā)事件
　　$(document)
　　// 查詢所有以 button 開頭， data-toggle 屬性的值，綁定 click 事件
　　.on('click.bs.button.data-api', '[data-toggle^="button"]',  function (e) {
　　// 查找當(dāng)前單擊對(duì)象的最近的有 btn 樣式的父元素
　　 var $btn = $(e.target).closest('.btn')
　　Plugin.call($btn, 'toggle')
　　// 如果單擊對(duì)象不是單選或多選按鈕
　　 if (!($(e.target).is('input[type="radio"], input[type="checkbox"]'))) {
　　// 阻止默認(rèn)行為
　　e.preventDefault()
　　// 如果 $btn 是單選或多選按鈕，觸發(fā) focus 事件
　　 if ($btn.is('input,button')) $btn.trigger('focus')
　　// 否則，找到子元素中的第一個(gè)具有 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))
　　})
來源： 博客園

您還未登錄，請(qǐng)先登錄

熱門帖子

最新帖子

?