查看Button.js的源代码
+function ($) {
‘use strict‘;
// BUTTON PUBLIC CLASS DEFINITION
// ==============================
var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
this.isLoading = false
}
Button.VERSION = ‘3.3.4‘
Button.DEFAULTS = {
loadingText: ‘loading...‘
}
Button.prototype.setState = function (state) {
var d = ‘disabled‘
var $el = this.$element
var val = $el.is(‘input‘) ? ‘val‘ : ‘html‘
var data = $el.data()
state = state + ‘Text‘
if (data.resetText == null) $el.data(‘resetText‘, $el[val]())
// push to event loop to allow forms to submit
setTimeout($.proxy(function () {
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == ‘loadingText‘) {
this.isLoading = true
$el.addClass(d).attr(d, d)
} else if (this.isLoading) {
this.isLoading = false
$el.removeClass(d).removeAttr(d)
}
}, this), 0)
}
Button.prototype.toggle = function () {
var changed = true
var $parent = this.$element.closest(‘[data-toggle="buttons"]‘)
if ($parent.length) {
var $input = this.$element.find(‘input‘)
if ($input.prop(‘type‘) == ‘radio‘) {
if ($input.prop(‘checked‘) && this.$element.hasClass(‘active‘)) changed = false
else $parent.find(‘.active‘).removeClass(‘active‘)
}
if (changed) $input.prop(‘checked‘, !this.$element.hasClass(‘active‘)).trigger(‘change‘)
} else {
this.$element.attr(‘aria-pressed‘, !this.$element.hasClass(‘active‘))
}
if (changed) this.$element.toggleClass(‘active‘)
}
// BUTTON PLUGIN DEFINITION
// ========================
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data(‘bs.button‘)
var options = typeof option == ‘object‘ && option
if (!data) $this.data(‘bs.button‘, (data = new Button(this, options)))
if (option == ‘toggle‘) data.toggle()
else if (option) data.setState(option)
})
}
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button
// BUTTON NO CONFLICT
// ==================
$.fn.button.noConflict = function () {
$.fn.button = old
return this
}
// BUTTON DATA-API
// ===============
$(document)
.on(‘click.bs.button.data-api‘, ‘[data-toggle^="button"]‘, function (e) {
var $btn = $(e.target)
if (!$btn.hasClass(‘btn‘)) $btn = $btn.closest(‘.btn‘)
Plugin.call($btn, ‘toggle‘)
e.preventDefault()
})
.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))
})
}(jQuery);
运用场景（运用于a,button,submit提交按钮,reset重置按钮,复选框,单选框,其他的html标签），推特的框架通过css让这个标记元素通过-webkit-appearance: button;让元素表现成按钮的形式
1 <div class="container"> 2 <a class="btn btn-default" href="#" role="button">链接</a> 3 <button class="btn btn-default" type="submit" data-toggle="button" aria-pressed="false" autocomplete="off">Button</button> 4 <input class="btn btn-default" type="button" value="Input"> 5 <input class="btn btn-default" type="submit" value="Submit"> 6 <div class="btn-group" data-toggle="buttons"> 7 <label class="btn btn-primary active"> 8 <input type="checkbox" autocomplete="off" checked id="checkbox1"> Checkbox 1 (pre-checked) 9 </label> 10 <label class="btn btn-primary"> 11 <input type="checkbox" autocomplete="off"> Checkbox 2 12 </label> 13 <label class="btn btn-primary"> 14 <input type="checkbox" autocomplete="off"> Checkbox 3 15 </label> 16 </div> 17 <div class="btn-group" data-toggle="buttons"> 18 <label class="btn btn-primary active"> 19 <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected) 20 </label> 21 <label class="btn btn-primary"> 22 <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2 23 </label> 24 <label class="btn btn-primary"> 25 <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3 26 </label> 27 </div> 28 </div>
抽离查看整理结构
//推特的js的写法就是严格格式,前面的"+"号就是立刻执行的函数意思，当然你放"-"号也是可以达到效果的+function ($) {
‘use strict‘; //定义一个名为Button的构造函数，最终是要通过data绑定到bs.button上，这个jQuery典型的又一种插件的写法！
var Button = function (element, options) {
this.$element = $(element)
this.options = $.extend({}, Button.DEFAULTS, options)
this.isLoading = false
}
Button.VERSION = ‘3.3.4‘
Button.DEFAULTS = {}
//设置按钮的状态和按钮的文字，(比如提交表单的时候，按钮设置为"disabled"，文字设置为"提交中...")
Button.prototype.setState = function (state) {}
//通过判断来动态添加"acitve",删除".active"，设置"aria-pressed"
Button.prototype.toggle = function () {}
//定义Plugin函数,通过data的方式将当前实例化Button绑定到DOM的对象上
function Plugin(option) { //通过遍历，创建多个jQuery的实例
return this.each(function () {
var $this = $(this) //通过data的方式获取当前元素中是绑定属性bs.button的值
var data = $this.data(‘bs.button‘) //判断options是否是对象，如果是对象，那么就赋予options，然后覆盖Button中defaults的默认值
var options = typeof option == ‘object‘ && option
//判断data的值，来判断是否已经创建了实例，如果没有就创建Button的实例（Button中的this就执行了当前的元素的对象上）
if (!data) $this.data(‘bs.button‘, (data = new Button(this, options)))
//如果传入的是"toggle"字符串而不是对象,那么说明当前DOM的对象要实行的是toggle的方式来添加删除".acitve"
if (option == ‘toggle‘) data.toggle() //如果不是传入"toggle",那么就是执行setState来改变文字和按钮的状态
else if (option) data.setState(option)
})
}
var old = $.fn.button
$.fn.button = Plugin
$.fn.button.Constructor = Button
// BUTTON NO CONFLICT
// ==================
//避免插件的冲突，如果是后面又有人定义了$.fn.button的时候，调用$.fn.button.noConflict()就可以避免重名冲突
$.fn.button.noConflict = function () { $.fn.button = old return this }
}(jQuery);
Button.prototype.toggle
Button.prototype.toggle = function () {
//定于changeed=true的原因是，除了radio单选框外（选中的时候点击还是选中，不会取消选中），其他的元素点击的toggle时候,就在选中和不选中切换
2 var changed = true
3 //获取data-toggle="buttons" 的元素，查看上面"运用场景"的时候就会发现data-toggle在复选框和单选框的时候不是绑定在input的上面，所以要判断
4 var $parent = this.$element.closest(‘[data-toggle="buttons"]‘)
5 //如果是父元素拥有data-toggle="buttons"那么判断是 单选框或者是复选框(因为这个表单的data-toggle是绑定在外面的div上面)
6 if ($parent.length) {
7 var $input = this.$element.find(‘input‘)
8 //如果是单选框
if ($input.prop(‘type‘) == ‘radio‘) {
//如果单选框是选中状态同时外围的lable拥有class名"acitve",那么久证明点击这个单选框的时候不需要改变什么
11 if ($input.prop(‘checked‘) && this.$element.hasClass(‘active‘)) changed = false
//如果是没有选中，先删除所有的active
12 else $parent.find(‘.active‘).removeClass(‘active‘)
13 }
14 if (changed) $input.prop(‘checked‘, !this.$element.hasClass(‘active‘)).trigger(‘change‘)
15 //不是单选或者复选框
16 } else {
//对于非单选框或者是复选框的时候要设置aria-pressed属性
17 this.$element.attr(‘aria-pressed‘, !this.$element.hasClass(‘active‘))
18 }
19
20 if (changed) this.$element.toggleClass(‘active‘)
21 }
Button.prototype.setState
Button.prototype.setState = function (state) {
var d = ‘disabled‘
var $el = this.$element //如果是input，那么改变文本的时候，需要改变的是value的值，所以这个做了判断
var val = $el.is(‘input‘) ? ‘val‘ : ‘html‘ //或者绑定带当前元素的属性值
var data = $el.data()
//data-loading-text 是为了找到这个属性选择器 点击这个查看实例立马就明白 http://v3.bootcss.com/javascript/#buttons
state = state + ‘Text‘
//绑定resetText属性一个值,如果是input 那么就是val(),如果不是通过html()就可以获取元素的值
if (data.resetText == null) $el.data(‘resetText‘, $el[val]())
//改变函数的作用于执行当前的函数this,改变文本的值
setTimeout($.proxy(function () { //设置当前元素的文字，如果data-loading-text有绑定文字，那么就用它，否则就用默认，所以页面上$(this).button("loading")的调用传递参数值还是比较死的，不灵活
$el[val](data[state] == null ? this.options[state] : data[state])
if (state == ‘loadingText‘) {
this.isLoading = true
$el.addClass(d).attr(d, d)
} else if (this.isLoading) {
this.isLoading = false
$el.removeClass(d).removeAttr(d)
}
}, this), 0)
}
执行函数
$(document) //绑定click事件（同时把事件放在命名空间"bs.button.data-api"），为什么，那天你unbind的时候，它会找到对应命名空间下的click，那样就不会释放我们不想释放的click //通过事件冒泡的形式来把事件绑定到document上
.on(‘click.bs.button.data-api‘, ‘[data-toggle^="button"]‘, function (e) { //获取单击事件的目标元素(e.target和this在这里不一定是同一个元素，你懂的)
var $btn = $(e.target)
if (!$btn.hasClass(‘btn‘)) $btn = $btn.closest(‘.btn‘) //调用Plugin方法，将this指针执行$btn，传入删除toggle
Plugin.call($btn, ‘toggle‘) //阻止默认的行为，如果a的跳转链接啊！
e.preventDefault()
}) //同上,就是绑定了blur和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))
})
时间： 2024-11-08 21:26:55