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

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