bootstrap源码学习与示例：bootstrap-alert

bootstrap-alert组件基本活儿在CSS上，JS部分就是一个关闭事件。这是框架提供的关闭事件，在这之前，你可以通过on方法绑定close,closed这两种回调，它会在关闭时被调用。基本上，你只要引入了JS文件，HTML按它格式要求写，它就能干活了。

需要注意的有两个：

关闭铵钮必须带data-dismiss="alert"属性
关闭时事件必须要绑定在UI容器上，而不是关闭按钮中

!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

<!DOCTYPE html>
<html>
    <head>
        <title>bootstrap学习 by 司徒正美</title>
        <meta http-equiv="Content-type" content="text/html; charset=utf-8">

以下是它对应的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;
}

posted on 2012-12-20 17:39 司徒正美阅读(11582) 评论(2) 编辑收藏举报

刷新页面返回顶部

Ruby's Louvre

导航

公告

bootstrap源码学习与示例：bootstrap-alert