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

 內容很少，時間恰好，以上是個人一點讀碼體會，若有錯誤，請指出，你們共通學習。