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的样式表。

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