Bootstrap警告框
前面的話
在網(wǎng)站中,網(wǎng)頁總是需要和用戶一起做溝通與交流。特別是當(dāng)用戶操作上下文為用戶提供一些有效的警示框,比如說告訴用戶操作成功、操作錯(cuò)誤、提示或者警告等。在Bootstrap框架有一個(gè)獨(dú)立的組件,實(shí)現(xiàn)類似的效果,這個(gè)組件被稱為警示框。本文將詳細(xì)介紹Bootstrap警告框
?
默認(rèn)用法
警告框組件通過提供一些靈活的預(yù)定義消息,為常見的用戶動(dòng)作提供反饋消息
將任意文本和一個(gè)可選的關(guān)閉按鈕組合在一起就能組成一個(gè)警告框,
.alert?類是必須要設(shè)置的,另外還提供了有特殊意義的4個(gè)類(例如, .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; }警告框沒有默認(rèn)類,只有基類和修飾類。默認(rèn)的灰色警告框并沒有多少意義。所以您使用一種有意義的警告類。目前提供了成功、消息、警告和危險(xiǎn)
1、成功警示框:告訴用戶操作成功,在“alert”樣式基礎(chǔ)上追加“alert-success”樣式,具體呈現(xiàn)的是背景、邊框和文本都是綠色;
2、信息警示框:給用戶提供提示信息,在“alert”樣式基礎(chǔ)上追加“alert-info”樣式,具體呈現(xiàn)的是背景、邊框和文本都是淺藍(lán)色;
3、警告警示框:提示用戶小心操作(提供警告信息),在“alert”樣式基礎(chǔ)上追加“alert-warning”樣式,具體呈現(xiàn)的是背景、邊框、文本都是淺黃色;
4、錯(cuò)誤警示框:提示用戶操作錯(cuò)誤,在“alert”樣式基礎(chǔ)上追加“alert-danger”樣式,具體呈現(xiàn)的是背景、邊框和文本都是淺紅色
<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">錯(cuò)誤</div>style="width: 100%; height: 390px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a1.html" frameborder="0" width="320" height="240">
?
可關(guān)閉
在平時(shí)瀏覽網(wǎng)頁的時(shí)候,會(huì)發(fā)現(xiàn)一些警示框帶有關(guān)閉按鈕,用戶一點(diǎn)擊關(guān)閉按鈕就能自動(dòng)關(guān)閉顯示的警示框(也就是讓警示框隱藏不顯示)。在Bootstrap框架中的警示框也具有這樣的功能
只需要在默認(rèn)的警示框里面添加一個(gè)關(guān)閉按鈕。然后進(jìn)行三個(gè)步驟:
1、需要在基本警示框“alert”的基礎(chǔ)上添加“alert-dismissable”樣式。
2、在button標(biāo)簽中加入class="close"類,實(shí)現(xiàn)警示框關(guān)閉按鈕的樣式。
3、要確保關(guān)閉按鈕元素上設(shè)置了自定義屬性:data-dismiss="alert"(因?yàn)榭申P(guān)閉警示框需要借助于Javascript來檢測該屬性,從而控制警示框的關(guān)閉)
.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>style="width: 100%; height: 80px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a2.html" frameborder="0" width="320" height="240">
【外部關(guān)閉】
如果把關(guān)閉按鈕放置在警告框的外部,則需要設(shè)置data-target為'# 警告框的id'
這個(gè)用法的弊端是按鈕本身無法關(guān)閉,因?yàn)樗呀?jīng)不在警告框內(nèi)了
<button type="button" class="btn" data-dismiss="alert" data-target="#test">關(guān)閉</button> <div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a3.html" frameborder="0" width="320" height="240">
如果想關(guān)閉警告框的同時(shí),把按鈕也從DOM中刪除,如果按鈕的class是'btn',則設(shè)置data-target=".btn'則可以把按鈕也刪除
<button type="button" class="btn" data-dismiss="alert" data-target="#test,.btn">關(guān)閉</button> <div id="test" class="alert alert-success alert-dismissable" role="alert">操作成功</div>style="width: 100%; height: 110px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a4.html" frameborder="0" width="320" height="240">
?
鏈接
有時(shí)可能想在警示框中加入鏈接地址,用來告訴用戶跳到某一個(gè)地方或新的頁面。而這個(gè)時(shí)候又想讓用戶能明顯的看出來這是鏈接地址。在Bootstrap框架中對警示框里的鏈接樣式做了一個(gè)高亮顯示處理。為不同類型的警示框內(nèi)的鏈接進(jìn)行了加粗處理,并且顏色相應(yīng)加深
Bootstrap框架是通過給警示框加的鏈接添加一個(gè)名為“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">錯(cuò)誤 <a href="#" class="alert-link">詳情查看</a></div>style="width: 100%; height: 300px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a5.html" frameborder="0" width="320" height="240">
?
JS觸發(fā)
【方法】
$().alert('close')
關(guān)閉警告框并從 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>style="width: 100%; height: 72px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a6.html" frameborder="0" width="320" height="240">
【事件】
close.bs.alert 當(dāng) close 方法被調(diào)用后立即觸發(fā)此事件。 closed.bs.alert 當(dāng)警告框被關(guān)閉后(也即 CSS 過渡效果完畢之后)立即觸發(fā)此事件。 <div class="alert alert-success alert-dismissable fade in" data-dismiss="alert" role="alert"><button class="close" type="button">×</button>恭喜您操作成功! </div> <div id="intro">警告框處于打開狀態(tài)</div> <script> $('.alert').on('closed.bs.alert', function () {$('#intro').html('警告框被關(guān)閉了') }) </script>style="width: 100%; height: 112px;" src="https://demo.xiaohuochai.site/bootstrap/alert/a7.html" frameborder="0" width="320" height="240">
?
JS源碼
【1】IIFE
使用立即調(diào)用函數(shù),防止插件內(nèi)代碼外泄,從而形成一個(gè)閉環(huán),并且只能從jQuery的fn里進(jìn)行擴(kuò)展
function ($) {//使用es5嚴(yán)格模式'use strict';// }(window.jQuery);【2】初始設(shè)置
//定義選擇器,所有符合該自定義屬性的元素都可以觸發(fā)下面的事件var dismiss = '[data-dismiss="alert"]'var Alert = function (el) {//傳入元素,如果元素內(nèi)部有dismiss設(shè)置的自定義屬性,則click事件會(huì)觸發(fā)原型上的close方法$(el).on('click', dismiss, this.close)}//版本號為3.3.7Alert.VERSION = '3.3.7'//動(dòng)畫持續(xù)時(shí)間為150msAlert.TRANSITION_DURATION = 150【3】插件核心代碼
Alert.prototype.close = function (e) {//被單擊元素的jQuery對象,臨時(shí)賦值,防止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)//阻止默認(rèn)行為if (e) e.preventDefault()//如果該元素不存在if (!$parent.length) {//存在最近的樣式為'.alert'的祖先元素$parent = $this.closest('.alert')}//刪除元素前,執(zhí)行close事件,可以通過自定義綁定來執(zhí)行定義代碼$parent.trigger(e = $.Event('close.bs.alert'))//如果回調(diào)函數(shù)中已經(jīng)包含阻止默認(rèn)行為的代碼,則直接返回if (e.isDefaultPrevented()) return//刪除元素上的in樣式$parent.removeClass('in')function removeElement() {//觸發(fā)closed事件后,刪除該元素$parent.detach().trigger('closed.bs.alert').remove()}//如果支持動(dòng)畫,并且設(shè)置為fade樣式$.support.transition && $parent.hasClass('fade') ?//在執(zhí)行動(dòng)畫過渡效果后,再刪除元素 $parent.one('bsTransitionEnd', removeElement).emulateTransitionEnd(Alert.TRANSITION_DURATION) ://否則直接刪除元素 removeElement()}【4】jQuery插件定義
function Plugin(option) {//根據(jù)選擇器,遍歷所有符合規(guī)則的元素return this.each(function () {var $this = $(this)//獲取自定義屬性bs.alert的值var data = $this.data('bs.alert')//如果值不存在,則將Alert實(shí)例設(shè)置為bs.alert值if (!data) $this.data('bs.alert', (data = new Alert(this)))//如果option傳遞了string,則表示要執(zhí)行某個(gè)方法 if (typeof option == 'string') data[option].call($this)})}var old = $.fn.alert//保留其他庫的$.fn.alert代碼(如果定義的話),以便在noConflict之后可以繼續(xù)使用該老代碼$.fn.alert = Plugin//重設(shè)插件構(gòu)造器,可以通過該屬性獲取插件的真實(shí)類函數(shù)$.fn.alert.Constructor = Alert【5】防沖突處理
$.fn.alert.noConflict = function () {//恢復(fù)以前的舊代碼$.fn.alert = old//將$.fn.alert.noConflict()設(shè)置為Bootstrap的Tab插件return this}【6】綁定觸發(fā)事件
//為聲明式的HTML綁定單擊事件//在整個(gè)document對象上,檢測是否有自定義屬性data-dismiss="alert"//如果有,則設(shè)置單擊的時(shí)候,關(guān)閉指定的警告框元素$(document).on('click.bs.alert.data-api', dismiss, Alert.prototype.close)?
總結(jié)
以上是生活随笔為你收集整理的Bootstrap警告框的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: vue支付密码
- 下一篇: css定位position