麦子学院 2017-07-14 19:31

Bootstrap按钮插件如何使用？

回复:0 查看:2459

按钮插件提供了一组可以控制按钮多种状态的功能，比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍Bootstrap 按钮插件相关内容，一起来看看吧，希望对大家学习Bootstrap有所帮助。

　　加载状态

　　通过按钮可以设计状态提示，当单击按钮时，会显示loading 状态信息。例如，点击 “ 加载 ” 按钮，会触发按钮的加载的状态

　　通过添加 data-loading-text="Loading..." 可以为按钮设置正在加载的状态，但从 v3.3.5 版本开始，此特性不再建议使用，并且已经在 v4 版本中删除了

　　[ 注意如果不设置 data-loading-text ，则按钮文本在Loading 状态时，默认显示的是 'loading...'

$(function(){

$("#loaddingBtn").click(function () {

var $btn = $(this).button("loading");

setTimeout(function(){

$btn.button('reset')

},1000);

});

</script>

　　模拟单选

　　模拟单选按钮是通过一组按钮来实现单选择操作。使用按钮组来模拟单选按钮组，能够让设计更具个性化，可以定制出更美观的单选按钮组

　　在Bootstrap 框架中按钮插件中，可以通过给按钮组自定义属性 data-toggle="buttons"

<input type="radio" name="options" id="options1"> 男

</label>

<input type="radio" name="options" id="options2"> 女

</label>

</div>

　　模拟多选

　　使用按钮组来模拟复选按钮和模拟单选按钮是一样的，具有同等效果，也是通过在按钮组上自定义 data-toggle="buttons" 来实现。唯一不同的是，将input[type="radio"] 换成 input[type="checkbox"]

<input type="checkbox" name="options" id="options1"> 电影

</label>

<input type="checkbox" name="options" id="options2"> 音乐

</label>

<input type="checkbox" name="options" id="options3"> 游戏

</label>

<input type="checkbox" name="options" id="options4"> 摄影

</label>

</div>

　　按钮状态

　　使用 data-toggle 属性还可以激活按钮的行为状态，实现在激活和未激活之间进行状态切换。单击时将按钮激活，再单击可以让按钮恢复到默认状态

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

　　 JS触发

　　按钮插件可以通过调用button 函数，然后给 button 函数传入具体的参数，实现不同的效果。而其中有两个参数是固定不变的，即 toggle 和 reset 。其他的都可以随意定义：

　　$("#mybutton").button("toggle");// 反转按钮状态

　　$("#mybutton").button("reset");// 重置按钮状态

　　$("#mybutton").button(" 任意字符参数名 ");// 替换 data- 任意字符参数名 -text 的属性值为 “ 按钮上显示的文本值

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

　　})

来源：博客园