Bootstrap中的按鈕組件有什么用

小編給大家分享一下Bootstrap中的按鈕組件有什么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

Bootstrap是什么

Bootstrap是目前最受歡迎的前端框架，它是基于 HTML、CSS、JAVASCRIPT 的，它簡潔靈活，使得 Web 開發更加快捷，它還有一個響應最好的Grid系統，并且能夠在手機端通用，而Bootstrap是使用許多可重用的CSS和JavaScript組件，可以幫助實現需要的幾乎任何類型的網站的功能，此外，所有這些組件都是響應式的。

本篇文章帶大家詳細了解一下Bootstrap中的按鈕組件。有一定的參考價值，有需要的朋友可以參考一下，希望對大家有所幫助。

按鈕插件提供了一組可以控制按鈕多種狀態的功能，比如按鈕的禁用狀態、正在加載狀態、正常狀態等。本文將詳細介紹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中的按鈕組件有什么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！