Bootstrap警告框

前面的話

　　在網站中，網頁總是需要和用戶一起做溝通與交流。特別是當用戶操作上下文為用戶提供一些有效的警示框，比如說告訴用戶操作成功、操作錯誤、提示或者警告等。在Bootstrap框架有一個獨立的組件，實現類似的效果，這個組件被稱為警示框。本文將詳細介紹Bootstrap警告框

 

默認用法

　　警告框組件通過提供一些靈活的預定義消息，為常見的用戶動作提供反饋消息

　　將任意文本和一個可選的關閉按鈕組合在一起就能組成一個警告框，.alert 類是必須要設置的，另外還提供了有特殊意義的4個類（例如，.alert-success），代表不同的警告信息

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid transparent;
  border-radius: 4px;
}
.alert h4 {
  margin-top: 0;
  color: inherit;
}
.alert .alert-link {
  font-weight: bold;
}
.alert > p,
.alert > ul {
  margin-bottom: 0;
}
.alert > p + p {
  margin-top: 5px;
}

　　警告框沒有默認類，只有基類和修飾類。默認的灰色警告框並沒有多少意義。所以您使用一種有意義的警告類。目前提供了成功、消息、警告和危險

　　1、成功警示框：告訴用戶操作成功，在“alert”樣式基礎上追加“alert-success”樣式，具體呈現的是背景、邊框和文本都是綠色；

　　2、信息警示框：給用戶提供提示信息，在“alert”樣式基礎上追加“alert-info”樣式，具體呈現的是背景、邊框和文本都是淺藍色；

　　3、警告警示框：提示用戶小心操作（提供警告信息），在“alert”樣式基礎上追加“alert-warning”樣式，具體呈現的是背景、邊框、文本都是淺黃色；

　　4、錯誤警示框：提示用戶操作錯誤，在“alert”樣式基礎上追加“alert-danger”樣式，具體呈現的是背景、邊框和文本都是淺紅色

<div class="alert" role="alert">基類</div>
<div class="alert alert-success" role="alert">成功</div>
<div class="alert alert-info" role="alert">信息提示</div>
<div class="alert alert-warning" role="alert">警告</div>
<div class="alert alert-danger" role="alert">錯誤</div> 

 

可關閉

　　在平時瀏覽網頁的時候，會發現一些警示框帶有關閉按鈕，用戶一點擊關閉按鈕就能自動關閉顯示的警示框（也就是讓警示框隱藏不顯示）。在Bootstrap框架中的警示框也具有這樣的功能

　　只需要在默認的警示框里面添加一個關閉按鈕。然后進行三個步驟：

　　1、需要在基本警示框“alert”的基礎上添加“alert-dismissable”樣式。

　　2、在button標簽中加入class="close"類，實現警示框關閉按鈕的樣式。

　　3、要確保關閉按鈕元素上設置了自定義屬性：data-dismiss="alert"（因為可關閉警示框需要借助於Javascript來檢測該屬性，從而控制警示框的關閉）

.alert-dismissable {
  padding-right: 35px;
}
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">×</button>
    恭喜您操作成功！
</div>

【外部關閉】

　　如果把關閉按鈕放置在警告框的外部，則需要設置data-target為'# + 警告框的id'

　　這個用法的弊端是按鈕本身無法關閉，因為它已經不在警告框內了

<button type="button" class="btn" data-dismiss="alert" data-target="#test">關閉</button>
<div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>

　　如果想關閉警告框的同時，把按鈕也從DOM中刪除，如果按鈕的class是'btn'，則設置data-target=".btn'則可以把按鈕也刪除

<button type="button" class="btn" data-dismiss="alert" data-target="#test,.btn">關閉</button>
<div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>

 

鏈接

　　有時可能想在警示框中加入鏈接地址，用來告訴用戶跳到某一個地方或新的頁面。而這個時候又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個高亮顯示處理。為不同類型的警示框內的鏈接進行了加粗處理，並且顏色相應加深

　　Bootstrap框架是通過給警示框加的鏈接添加一個名為“alert-link”的類名，通過“alert-link”樣式給鏈接提供高亮顯示 

.alert .alert-link {
  font-weight: bold;
}
.alert-success .alert-link {
  color: #2b542c;
}
.alert-info .alert-link {
  color: #245269;
}
.alert-warning .alert-link {
  color: #66512c;
}
.alert-danger .alert-link {
  color: #843534;
}

<div class="alert alert-success" role="alert">成功 <a href="#" class="alert-link">詳情查看</a></div>
<div class="alert alert-info" role="alert">信息提示 <a href="#" class="alert-link">詳情查看</a></div>
<div class="alert alert-warning" role="alert">警告 <a href="#" class="alert-link">詳情查看</a></div>
<div class="alert alert-danger" role="alert">錯誤 <a href="#" class="alert-link">詳情查看</a></div> 

 

JS觸發

【方法】

$().alert('close')

　　關閉警告框並從 DOM 中將其刪除

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button">×</button>
    恭喜您操作成功！
</div>
<script>
 $('.close').click(function(){
     $('.alert').alert('close');
 }); 
</script>

【事件】

close.bs.alert    當 close 方法被調用后立即觸發此事件。
closed.bs.alert    當警告框被關閉后（也即 CSS 過渡效果完畢之后）立即觸發此事件。

<div class="alert alert-success alert-dismissable fade in" data-dismiss="alert" role="alert">
    <button class="close" type="button">×</button>
    恭喜您操作成功！
</div>
<div id="intro">警告框處於打開狀態</div>
<script>
$('.alert').on('closed.bs.alert', function () {
    $('#intro').html('警告框被關閉了')
})
</script>

　　 

JS源碼

【1】IIFE

　　使用立即調用函數，防止插件內代碼外泄，從而形成一個閉環，並且只能從jQuery的fn里進行擴展

+function ($) {
    //使用es5嚴格模式
    'use strict';
    //
}(window.jQuery);

【2】初始設置

  //定義選擇器，所有符合該自定義屬性的元素都可以觸發下面的事件
  var dismiss = '[data-dismiss="alert"]'
  var Alert   = function (el) {
    //傳入元素，如果元素內部有dismiss設置的自定義屬性，則click事件會觸發原型上的close方法
    $(el).on('click', dismiss, this.close)
  }
  //版本號為3.3.7
  Alert.VERSION = '3.3.7'
  //動畫持續時間為150ms
  Alert.TRANSITION_DURATION = 150

【3】插件核心代碼

  Alert.prototype.close = function (e) {
    //被單擊元素的jQuery對象，臨時賦值，防止this污染
    var $this    = $(this)
    //獲取自定義屬性data-target的值
    var selector = $this.attr('data-target')
    //獲取沒有data-target屬性
    if (!selector) {
      //則獲取href屬性的值
      selector = $this.attr('href')
      //IE7瀏覽器特殊處理
      selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') 
    }
    //獲取jQuery對象
    var $parent = $(selector === '#' ? [] : selector)
    //阻止默認行為
    if (e) e.preventDefault()
    //如果該元素不存在
    if (!$parent.length) {
      //存在最近的樣式為'.alert'的祖先元素
      $parent = $this.closest('.alert')
    }
    //刪除元素前，執行close事件，可以通過自定義綁定來執行定義代碼
    $parent.trigger(e = $.Event('close.bs.alert'))
    //如果回調函數中已經包含阻止默認行為的代碼，則直接返回
    if (e.isDefaultPrevented()) return
    //刪除元素上的in樣式
    $parent.removeClass('in')

    function removeElement() {
      //觸發closed事件后，刪除該元素
      $parent.detach().trigger('closed.bs.alert').remove()
    }
    //如果支持動畫，並且設置為fade樣式
    $.support.transition && $parent.hasClass('fade') ?
      //在執行動畫過渡效果后，再刪除元素
      $parent
        .one('bsTransitionEnd', removeElement)
        .emulateTransitionEnd(Alert.TRANSITION_DURATION) :
      //否則直接刪除元素
      removeElement()
  }

【4】jQuery插件定義

  function Plugin(option) {
    //根據選擇器，遍歷所有符合規則的元素
    return this.each(function () {
      var $this = $(this)
      //獲取自定義屬性bs.alert的值
      var data  = $this.data('bs.alert')
      //如果值不存在，則將Alert實例設置為bs.alert值
      if (!data) $this.data('bs.alert', (data = new Alert(this)))
      //如果option傳遞了string，則表示要執行某個方法 
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.alert
  //保留其他庫的$.fn.alert代碼(如果定義的話)，以便在noConflict之后可以繼續使用該老代碼
  $.fn.alert             = Plugin
  //重設插件構造器，可以通過該屬性獲取插件的真實類函數
  $.fn.alert.Constructor = Alert

【5】防沖突處理

  $.fn.alert.noConflict = function () {
    //恢復以前的舊代碼
    $.fn.alert = old
    //將$.fn.alert.noConflict()設置為Bootstrap的Tab插件
    return this
  }

【6】綁定觸發事件

  //為聲明式的HTML綁定單擊事件
  //在整個document對象上，檢測是否有自定義屬性data-dismiss="alert"
  //如果有，則設置單擊的時候，關閉指定的警告框元素
  $(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)