當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

Bootstrap警告框

發(fā)布時(shí)間：2023/12/2 编程问答 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 Bootstrap警告框小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

前面的話

　　在網(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)的是背景、邊框和文本都是淺紅色

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)了

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'則可以把按鈕也刪除

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)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

bootstrap