bootstrap-alert組件基本活兒在CSS上，JS部分就是一個關閉事件。這是架構提供的關閉事件，在這之前，你可以通過on方法綁定close,closed這兩種回調，它會在關閉時被調用。基本上，你只要引入了JS檔案，HTML按它格式要求寫，它就能幹活了。
需要注意的有兩個：
!function ($) { "use strict"; // jshint ;_; /* ALERT CLASS DEFINITION * ====================== */ //這是程式員風格的命名 var dismiss = '[data-dismiss="alert"]' , Alert = function (el) { $(el).on('click', dismiss, this.close) } //它最要的方法 Alert.prototype.close = function (e) { //擷取這個控制項對應的DOM //分別通過以下三個途徑： //1 data-target自訂屬性 //2 href的屬性中的hash（多為簡單的ID選取器或類別選取器）， //3這個按鈕的直屬父節點 var $this = $(this) , selector = $this.attr('data-target') , $parent if (!selector) { selector = $this.attr('href') selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') //strip for ie7 } $parent = $(selector) e && e.preventDefault() $parent.length || ($parent = $this.hasClass('alert') ? $this : $this.parent()) $parent.trigger(e = $.Event('close')) //在移除前觸發close自訂事件 if (e.isDefaultPrevented()) return //觸發CSS3的fade效果，它要與fade類名組合使用 $parent.removeClass('in') function removeElement() { $parent .trigger('closed') .remove() //在移除後觸發closed自訂事件 } $.support.transition && $parent.hasClass('fade') ? $parent.on($.support.transition.end, removeElement) : removeElement() } /* ALERT PLUGIN DEFINITION * ======================= */ var old = $.fn.alert $.fn.alert = function (option) { return this.each(function () { var $this = $(this) , data = $this.data('alert') //重複利用執行個體 if (!data) $this.data('alert', (data = new Alert(this))) //從目前Alert執行個體的原型來看，這個option只能為close if (typeof option == 'string') data[option].call($this) }) } $.fn.alert.Constructor = Alert /* ALERT NO CONFLICT * ================= */ $.fn.alert.noConflict = function () { $.fn.alert = old return this } /* ALERT DATA-API * ============== */ //綁定關閉事件 $(document).on('click.alert.data-api', dismiss, Alert.prototype.close)}(window.jQuery);
alert組件的外形是通過以下三組類名決定的。首先alert是必須的，alert-block是決定它內部是否能多行，還有一種決定皮膚，暫時只有三種：alert-success, alert-danger， alert-info
</p><p><!DOCTYPE html><br /><html><br /> <head><br /> <title>bootstrap學習 by 司徒正美</title><br /> <meta http-equiv="Content-type" content="text/html; charset=utf-8"></p><p> <link rel="stylesheet" href="http://files.cnblogs.com/rubylouvre/bootstrap.css"/><br /> <script src="http://files.cnblogs.com/rubylouvre/jquery1.83.js" > </script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-transition.js"></script><br /> <script src="http://files.cnblogs.com/rubylouvre/bootstrap-alert.js"></script></p><p> <script><br /> $(function(){<br /> //注意：事件要綁定在UI容器上，而不是關閉按鈕中<br /> $(".alert-block").on("close",function(){<br /> alert("這是關閉前調用的")<br /> })<br /> $(".alert-block").on("closed",function(){<br /> alert("這是關閉後調用的")<br /> })<br /> })</p><p> </script><br /> </head><br /> <body><br /> <div class="alert fade in"><br /> <button type="button" class="close" data-dismiss="alert">×</button><br /> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.<br /> </div><br /> <div class="alert alert-success fade in"><br /> <button type="button" class="close" data-dismiss="alert">×</button><br /> <strong>Holy guacamole!</strong> Best check yo self, you're not looking too good.<br /> </div><br /> <div class="alert alert-block alert-error fade in"><br /> <button type="button" class="close" data-dismiss="alert">×</button><br /> <h4 class="alert-heading">Oh snap! You got an error!</h4><br /> <p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p><br /> <p><br /> <a class="btn btn-danger" href="#">Take this action</a> <a class="btn" id="close" data-dismiss="alert" href=".alert-block">Or do this</a><br /> </p><br /> </div><br /> </body><br /></html><br />
運行代碼
以下是它對應的less。
//// Alerts// --------------------------------------------------// Base styles// -------------------------.alert { padding: 8px 35px 8px 14px; margin-bottom: @baseLineHeight; text-shadow: 0 1px 0 rgba(255,255,255,.5); background-color: @warningBackground; border: 1px solid @warningBorder; .border-radius(@baseBorderRadius);}.alert,.alert h4 { // Specified for the h4 to prevent conflicts of changing @headingsColor color: @warningText;}.alert h4 { margin: 0;}// Adjust close link position.alert .close { position: relative; top: -2px; right: -21px; line-height: @baseLineHeight;}// Alternate styles// -------------------------.alert-success { background-color: @successBackground; border-color: @successBorder; color: @successText;}.alert-success h4 { color: @successText;}.alert-danger,.alert-error { background-color: @errorBackground; border-color: @errorBorder; color: @errorText;}.alert-danger h4,.alert-error h4 { color: @errorText;}.alert-info { background-color: @infoBackground; border-color: @infoBorder; color: @infoText;}.alert-info h4 { color: @infoText;}// Block alerts// -------------------------.alert-block { padding-top: 14px; padding-bottom: 14px;}.alert-block > p,.alert-block > ul { margin-bottom: 0;}.alert-block p + p { margin-top: 5px;}Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
