Bootstrapのボタンコンポーネントの詳細説明

この記事では、Bootstrap のボタン コンポーネントについて詳しく説明します。一定の参考値があるので、困っている友達が参考になれば幸いです。

#ボタン プラグインは、ボタンの無効状態など、ボタンの複数の状態を制御できる一連の関数を提供します。ボタン、ローディング状態、通常状態、ステータス等この記事では、Bootstrap ボタン プラグインについて詳しく紹介します

ステータスの読み込み中 # ボタンを通じてステータス プロンプトをデザインできます。ボタンがクリックされると、読み込みステータスの情報が表示されます。と表示されます。たとえば、「読み込み」ボタンをクリックすると、ボタンの読み込みステータスがトリガーされます。

data-loading-text="Loading..."

を追加することで、読み込みステータスを設定できます。ただし、 v3.3.5 以降、この機能は推奨されなくなり、v4 バージョンでは削除されました。

[注]

data-loading が実行されていない場合は、 set -text、ボタン テキストが読み込み状態の場合、デフォルトの表示は「読み込み中...」です。

<button>加载</button>
<script>
$(function(){
    $("#loaddingBtn").click(function () {
        var $btn = $(this).button("loading");
        setTimeout(function(){
            $btn.button(&#39;reset&#39;)
        },1000);
      });
});    
</script>

[関連する推奨事項: "

bootstrap チュートリアル

>>]

シミュレーション ラジオ ボタン

シミュレーション ラジオ ボタンは、一連のボタンによる単一の選択操作を実現します。ボタン グループを使用してラジオ ボタン グループをシミュレートすると、デザインをよりパーソナライズし、より美しいラジオ ボタン グループをカスタマイズできます。

Bootstrap フレームワークのボタン プラグインでは、ボタン グループの属性をカスタマイズできます

data-toggle="buttons"

<pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;label&gt;         &lt;input&gt;男     &lt;/label&gt;     &lt;label&gt;         &lt;input&gt;女     &lt;/label&gt; &lt;/div&gt;</pre>

複数の選択をシミュレートする

ボタン グループを使用して複数の選択をシミュレートします選択ボタンはシミュレートされたラジオ ボタンと同じであり、同じ効果があり、ボタン グループの

data-toggle="buttons"

をカスタマイズすることによっても実現されます。唯一の違いは、input[type="radio"] を input[type="checkbox"]<pre class="brush:php;toolbar:false">&lt;div&gt;     &lt;label&gt;         &lt;input&gt;电影     &lt;/label&gt;     &lt;label&gt;         &lt;input&gt;音乐     &lt;/label&gt;     &lt;label&gt;         &lt;input&gt;游戏     &lt;/label&gt;     &lt;label&gt;         &lt;input&gt;摄影     &lt;/label&gt; &lt;/div&gt;</pre>

button status

## に置き換えることです。 data-toggle 属性を使用すると、ボタンの動作状態をアクティブにして、アクティブと非アクティブの間で状態を切り替えることもできます。ボタンはクリックするとアクティブになり、もう一度クリックするとボタンがデフォルトの状態に戻ります

<button>有状态的按钮</button>
<button>普通按钮</button>

JS トリガー

ボタンプラグインは、ボタン関数を呼び出してからボタン関数に特定のパラメータを渡すことによって、さまざまな効果を実現できます。パラメータのうちの 2 つは固定されており、トグルとリセットです。その他は自由に定義できます:

$("#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(&#39;complete&#39;);
        },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のボタンコンポーネントの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。