警告框

警告框结构

保证父级包含.alert类

1. 为任意 [data-dismiss="alert"]和[data-target="#elementId"]，  添加 绑定了警告框关闭。

2. 当alert包含.with-close类时显示em关闭按钮,可以给em加上[data-dismiss="alert"]和[data-target="#elementId"]绑定关闭


3. 通过$(selector).alert()绑定em关闭


警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息 
    <div class="alert alert-warning with-close">
        <i></i>
        <em></em>
        警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息
        </div>

a标签绑定

a标签通过设置 data-dismiss="alert" 和data-target来绑定触发关闭警告框。如果我们没有设置data-target,将会获取a标签中的hash作为目标警告框。

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息


关闭警告框 
    
        <a href="#j-alert-2" data-dismiss="alert" class="btn primary small-btn">关闭警告框</a>

插件接口

alert插件提供了close关闭的方法

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息 


    
// 通过$(el).alert('close');
function ajax() {
    // .... 异步操作
        $('#j-alert-5').alert('close');
}
$('#j-close-btn5').on('click', ajax)

事件监听

为元素添加 close.ui.alert 监听警告框事件。

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息


关闭警告框 

// 链接绑定
$('#j-close-btn').on('closed.ui.alert', function(e){
    alert('#'+ e.relatedTarget[0].id +'已关闭')
    });

事件回调

需要回调的提示用$(elementId).alert(fn)

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息 

function ajaxHandler(alertClose){
    setTimeout(function(){
        alert('aaa');
        alertClose();
    }, 1000)
}

$('#j-alert-5').alert(ajaxHandler);

/**
 // 需要传参数使用闭包写法
 function ajaxHanler(type){
    return function(alertClose){
        $.get(url, {type: type}).done(function(){
                // 关闭警告框
                alertClose();
            })
    }
 }

 $('#j-alert-5').alert(ajaxHandler(5));
 */

启用css3动画

如果浏览器支持CSS3动画，而且目标alert类中包含fade in则使用css3动画来隐藏，反之调用fadeOut方法

警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息 
<div class="alert alert-warning with-close fade in">
    

    <i></i>
    <em></em>
    警告框组件通过提供一些灵活的预定义消息，为常见的用户动作提供反馈消息
    </div>