bootstrap 通过js代码创建和关闭插件

插件的创建机制

默认情况下，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()

 

<