bootstrap插件学习-bootstrap.alert.js

bootstrap插件学习-bootstrap.alert.js

我们先看bootstrap.alert.js的结构

var dismiss = '[data-dismiss="alert"]' //自定义属性
Alert = function ( el ){} // 构造器
Alert.prototype ={} // 构造器的原型
$.fn.alert = function ( option ){} //jQuery原型上自定义的方法
$.fn.alert.Constructor = Alert // 重写jQuery原型方法popover的构造器名
$(function (){} // 初始化

HTML结构

<div class="alert fade in">
<a class="close" href="#" data-dismiss="alert">×</a>
<strong>警告！</strong>
在贵国遵守宪法就要违反刑法。
</div>
<div class="alert alert-block alert-error fade in">
<a class="close" href="#" data-dismiss="alert">×</a>
<h4 class="alert-heading">微博控们注意了！</h4>
<p> 出游微博晒幸福时，最好不要泄露出游时间、人数，别泄露住址，谨慎晒出游照片，以免让贼判断出你家是否有人。因为小偷说不定会盯上你的微博，“随着微博的发展，贼也很时尚啊！” </p>
<p>
<a class="btn btn-danger" href="#">接受建议</a>
<a class="btn" href="#">不当回事</a>
</p>
</div>

alert插件，比较简单。我们先从初始化开始

/*
* 初始化
* */
$(function () {
$('body').on('click.alert.data-api', dismiss, Alert.prototype.close)
})

body去监听所有拥有data-dismiss = 'alert'属性的标签，并为它们绑定上Alert原型上的close方法，注意这里没有使用之前的$.proxy()方法，保持作用域，那我们进入这个方法后，方法内的this将指向触发事件的对象。

close: function ( e ) {
var $this = $(this)//获取触发click事件的对象
, selector = $this.attr('data-target')
, $parent
/*
* 如果没有data-target属性值，将获取标签a的href值
* */
if (!selector) {
selector = $this.attr('href')
selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7
}

$parent = $(selector)//没有获得对象
$parent.trigger('close')

e && e.preventDefault()//阻止冒泡
//获取父节点
$parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent())

$parent
.trigger('close')
.removeClass('in')
//删除父对象，alert的样式在父节点上
function removeElement() {
$parent
.trigger('closed')
.remove()
}
//没有引入相应js，这里默认执行removeElement方法
$.support.transition && $parent.hasClass('fade') ?
$parent.on($.support.transition.end, removeElement) :
removeElement()//默认执行
}

里面的执行步骤跟之前插件很相似，很多就不说了，这个方法阻止了冒泡，最后删除了被点击标签的父节点。想看alert样式的，可以浏览一下bootstrap的样式表。

内容不多，时间刚好，以上是我的一点读码体会，如有错误，请指出，大家共通学习。