第 16 章 彈出框和警告框外掛

水之原發表於2016-04-24

學習要點：

1.彈出框
2.警告框

主講教師：李炎恢

本節課我們主要學習一下 Bootstrap 中的彈出框和警告框外掛。

一．彈出框
彈出框即點選一個元素彈出一個包含標題和內容的容器。
//基本用法

<button class="btn btn-lg btn-danger"
      type="button"
      data-toggle="popover"
      title="彈出框"
      data-content="這是一個彈出框外掛">
      點選彈出/隱藏彈出框
</button>

//JavaScript 初始化

$('button').popover();

彈出框外掛有很多屬性來配置提示的顯示，具體如下：

$('button').popover({
    container : 'body',
    viewport : {
        selector : '#view',
        padding : 10,
    }
});

通過 JavaScript 執行的方法有四個。

//顯示
$('button').popover('show');
//隱藏
$('button').popover('hide');
//反轉顯示和隱藏
$('button').popover('toggle');
//隱藏並銷燬
$('button').popover('destroy');

Popover 外掛中事件有四種：

 

//事件，其他雷同

$('button').on('show.bs.tab', function() {
    alert('呼叫 show 方法時觸發！');
});

 

二．警告框
警告框即為點選小時的資訊框。
//基本例項

<div class="alert alert-warning">                                                                            
    <button class="close" type="button" data-dismiss="alert">                                                
        <span>&times;</span>                                                                                 
    </button>                                                                                                
    <p>                                                                                                      
        警告：您的瀏覽器不支援！                                                                                         
    </p>                                                                                                     
</div>

//新增淡入淡出效果

<div class="alert alert-warning fade in">

如果用 JavaScript，可以代替 data-dismiss="alert"
//JavaScript 方法

$('.close').on('click', function() {
    $('#alert').alert('close');
})

Alert 外掛中事件有兩種：

//事件，其他雷同

$('#alert').on('close.bs.alert', function() {
    alert('當 close 方法被觸發時呼叫！');
});

相關文章