插件的创建机制
默认情况下,boostrap.js文件被页面加载执行完成后,boostrap会自动根据html元素的data-toggle属性和相关class创建插件对象。有时候,我们不希望boostrap插件的行为影响到整个页面,希望可以精准地在一个 指定的html元素上创建插件。要想达到这个目的,需要两个步骤:
1. 关闭插件的默认行为。
2. 在指定的html元素重新创插件。
第一步只需要很简单的一行代码就可以达到目的:
$(document).off(".data-api");
这行代码是关闭.data-api名字空间下的所有事件处理器,而boostrap所有插件的事件类型都是在.data-api名字空间下的,所以,这样就可以让所有插件失效。
第二步就比较麻烦,需要搞清楚bootstrap默认是怎样创建插件的。下面以collapse插件为例看看插件的创建过程:
function getTargetFromTrigger($trigger) {
var href
var target = $trigger.attr('data-target')
|| (href = $trigger.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '') // strip for ie7
return $(target)
}
function Plugin(option) {
return this.each(function () {
var $this = $(this)
var data = $this.data('bs.collapse')
var options = $.extend({}, Collapse.DEFAULTS, $this.data(), typeof option == 'object' && option)
if (!data && options.toggle && /show|hide/.test(option)) options.toggle = false
if (!data) $this.data('bs.collapse', (data = new Collapse(this, options)))
if (typeof option == 'string') data[option]()
})
}
var old = $.fn.collapse
$.fn.collapse = Plugin
$.fn.collapse.Constructor = Collapse
$(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
var $this = $(this)
if (!$this.attr('data-target')) e.preventDefault()
<