前面的话

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

  1. Bootstrap 按钮和折叠插件

    ---恢复内容开始--- 一.按钮 可以通过按钮插件创建不同状态的按钮. //单个切换. <button class="btn btn-primary" data-toggl ...

  2. 第二百四十七节,Bootstrap按钮和折叠插件

    Bootstrap按钮和折叠插件 学习要点: 1.按钮 2.折叠 本节课我们主要学习一下 Bootstrap 中的按钮和折叠插件. 一.按钮 可以通过按钮插件创建不同状态的按钮,也就是点击后为选中状态 ...

  3. Bootstrap JavaScript插件

      在bs3.X中,提供了12种JavaScript插件,分别是:动画过渡(Transition).模态弹窗(Modal).下拉菜单(Dropdown).滚动侦测(Scrollspy).选项卡(Tab ...

  4. 使用bootstrap的插件实现模态框效果

    在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...

  5. 结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

    1.bootstrap-fileinpu的简单介绍 在前面的随笔,我介绍了Bootstrap-table表格插件的具体项目应用过程,本篇随笔介绍另外一个Bootstrap FieInput插件的使用, ...

  6. 利用Bootstrap Paginator插件和KnockoutJS完成分页功能

    在最近一个项目中,需要结合一堆条件查询并对查询的结果数据完成一个简单分页功能,可是做着做着,自己的思路越来越模糊,做到心态崩溃!!! 哈哈,特此花点时间重新总结,并从最简单的分页,然后向多条件查询分页 ...

  7. Bootstrap分页插件ajax返回数据,工具类的编写

    使用Bootstrap分页插件时,需要返回指定的参数,这样Bootstrap才能够识别 需要引入的css: <!-- boostrap table --> <link href=&q ...

  8. python 全栈开发,Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  9. 简单叨叨bootstrap按钮无限层级下拉菜单的实现

    0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...

随机推荐

  1. C语言socket编程——linux环境

    先写一个服务器端的监听程序,功能室从客户端读取字符,接收到后告知客户端“I got your message: ”+收到的消息:server.c #include <stdio.h> #i ...

  2. Java 多线程详解(五)------线程的声明周期

    Java 多线程详解(一)------概念的引入:http://www.cnblogs.com/ysocean/p/6882988.html Java 多线程详解(二)------如何创建进程和线程: ...

  3. 微信小程序实战(商城)

    github地址(欢迎star):https://github.com/xiaobinwu/dj 版本:0.15.152900(暂未升级原因:升级后需要图片无法本地引用,必须使用image或是远程路径 ...

  4. zabbix agent安装详解

    安装 Installing repository configuration package Zabbix 2.2 for RHEL5, Oracle Linux 5, CentOS 5: rpm - ...

  5. React,关于redux的一点小见解

    最近项目做多页面应用使用到了,react + webpack + redux + antd去构建多页面的应用,本地开发用express去模拟服务端程序(个人觉得可以换成dva).所以在这里吐槽一下我自 ...

  6. 深入理解Java常用类-----StringBuilder

    上篇文章我们介绍过String这个常用类,知道了该类的内部其实是用的一个char数组表示一个字符串对象的,只是该字符数组被final修饰,一旦初始化就不能修改,但是对于经常做字符串修改操作的情况下,S ...

  7. [c++]大数运算1---利用C++ string实现任意长度正小数、整数之间的加减法

    一.概述 本文属于大大维原创,未经笔者本人允许,严禁转载!!! C/C++中的int类型能表示的范围是-2E31-2E31–1.unsigned类型能表示的范围是0-2E32–1,即 0-429496 ...

  8. Zepto源码分析-callbacks模块

    // Zepto.js // (c) 2010-2015 Thomas Fuchs // Zepto.js may be freely distributed under the MIT licens ...

  9. 一天搞定CSS:字体font--04

    1.字体体系 2.字体各属性取值 说明: 每一个属性后面的分支是属性值,以及对属性值的说明. 比如font-weight- - - -有两个取值:bold,normal 3.演示代码 <!DOC ...

  10. JQuery树形目录插件Dynatree

    最近做网页需要做一个树形目录功能.找了一下发现有很多JQuery插件都可以实现这个功能.选了一个自己觉得最满意的插件Dynatree做个学习笔记. 可以把静态的html转成树形目录,还可以动态创建添加 ...