Verwendung des Button-Plugins in Bootstrap

Vorherige Wörter

Das Schaltflächen-Plug-in bietet eine Reihe von Funktionen, mit denen mehrere Zustände der Schaltfläche gesteuert werden können, z. B. der deaktivierte Zustand der Schaltfläche, der Ladezustand, der normale Zustand usw. In diesem Artikel wird das Bootstrap-Button-Plugin

Ladestatus

im Detail vorgestellt. Sie können Statusaufforderungen über Schaltflächen entwerfen. Wenn Sie auf die Schaltfläche klicken, werden die Ladestatusinformationen angezeigt. Wenn Sie beispielsweise auf die Schaltfläche „Laden“ klicken, wird der Ladestatus der Schaltfläche ausgelöst

Durch Hinzufügen von data-loading-text="Loading..." können Sie den Ladestatus für die Schaltfläche festlegen, ab Version 3.3.5 ist diese Funktion jedoch verfügbar ist nicht mehr verfügbar. Die Verwendung wird empfohlen und wurde in der v4-Version gelöscht.

[Hinweis] Wenn data-loading-text nicht festgelegt ist und sich der Schaltflächentext im Ladezustand befindet, Die Standardanzeige ist „Laden...“

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

Optionsfeld „Simulation“

Optionsfeld „Simulation“ dient dazu, einen einzelnen Auswahlvorgang über einen Satz zu implementieren von Knöpfen. Die Verwendung einer Schaltflächengruppe zum Simulieren einer Optionsfeldgruppe kann das Design personalisierter gestalten und eine schönere Optionsfeldgruppe anpassen

Im Schaltflächen-Plug-in im Bootstrap-Framework können Sie Attribute für die Schaltflächengruppe anpassen 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>

Mehrfachauswahl simulieren

Verwenden Sie Schaltflächengruppen, um Kontrollkästchen zu simulieren. Das ist es das Gleiche wie das simulierte Optionsfeld und hat den gleichen Effekt. Dies wird auch durch Anpassen von data-toggle="buttons" in der Schaltflächengruppe erreicht. Der einzige Unterschied besteht darin, input[type="radio"] durch 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>

zu ersetzen

Schaltflächenstatus

Mit dem Attribut „data-toggle“ kann auch der Verhaltensstatus der Schaltfläche aktiviert werden, um den Status zwischen aktiviert und inaktiv umzuschalten. Klicken Sie, um die Schaltfläche zu aktivieren, und klicken Sie erneut, um die Schaltfläche in ihren Standardzustand zurückzusetzen

<button type="button" data-toggle="button" class="btn btn-primary">有状态的按钮</button><button type="button" class="btn btn-primary">普通按钮</button>

JS-Trigger

Das Button-Plugin kann unterschiedliche Effekte erzielen, indem es die Button-Funktion aufruft und dann bestimmte Parameter an die Button-Funktion übergibt. Zwei der Parameter sind fest, nämlich Toggle und Reset. Andere können nach Belieben definiert werden:

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

【1】IIFE

Verwenden Sie die Sofortaufruffunktion, um zu verhindern, dass der Code im Plug-In ausläuft, wodurch eine geschlossene Schleife entsteht, und kann nur über jQuerys fn erweitert werden

+function ($) {//使用es5严格模式'use strict';//}(window.jQuery);

【2】Anfangseinstellungen

  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】Plug-in-Kerncode

  //设置按钮状态的方法
  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，则组装成loadingTextstate += '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') {//设置加载状态为truethis.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为falseif ($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为falseif (($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-Plug-in-Definition

  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】Anti-Konflikt-Verarbeitung

  $.fn.button.noConflict = function () {//恢复以前的旧代码$.fn.button = old//将$.fn.button.noConflict()设置为Bootstrap的Tab插件return this
  }

【6 】Bind-Trigger-Ereignis

  $(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))
    })

[Verwandte Kursempfehlungen: Bootstrap-Tutorial]

Das obige ist der detaillierte Inhalt vonVerwendung des Button-Plugins in Bootstrap. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!