按钮插件提供了一组可以控制按钮多种状态的功能,比如按钮的禁用状态、正在加载状态、正常状态等。本文将详细介绍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))
})
来源: 博客园