Bootstrap彈出框

時間 2020-05-28

原文原文鏈接

前面的話

　　表面上看，彈出框其實就是一種特殊的提示框，只是多了一個標題而已。但實際上，仍是有不一樣之處的。本文將詳細介紹Bootstrap彈出框html

基本用法

　　在製做提示框（tooltip）時，可使用<button>或者<a>標籤元素，並且經過 data- 屬性來聲明提示框的信息。而彈出框popover和提示框tooltip相比，就多了一個content內容，那麼在此使用 data-content 來定義彈出框中的內容。一樣可使用<button>或者<a>標籤來製做bootstrap

　　因而最基本的用法以下ide

　　一、經過 title 屬性的值來定義標題(也可使用自定義屬性 data-original-title 來設置標題)，title優先級高動畫

　　二、經過data-content屬性來設置內容this

　　三、設置data-toggle="popover"spa

　　四、使用以下js代碼進行觸發插件

$('[data-toggle="popover"]').popover();

<body style="margin-top:50px">
<button type="button" class="btn btn-danger" data-toggle="popover" title="標題" data-content="我是內容">點我彈出/隱藏彈出框</button>
<script>
$(function(){
    $('[data-toggle="popover"]').popover();

});    
</script>

屬性參數

　　在彈出框製做時，能夠在HTML中定義下表所列的自定義屬性code

　　[注意]data-palcement默認居右顯示，而不是居上顯示htm

<body style="margin-top:100px">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="上側" >上側</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="bottom" title="標題" data-content="下側" >下側</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="無動畫" data-animation="false" >無動畫</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="有動畫" >有動畫</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="hover觸發" data-trigger="hover">hover觸發</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="click觸發" data-trigger="click">click觸發</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="不延遲">不延遲</button>
<button type="button" class="btn btn-default" data-toggle="popover" title="標題" data-content="延遲500ms" data-delay="500">延遲500ms</button>
<script>
$(function(){
    $('[data-toggle="popover"]').popover();

});    
</script>

JS觸發

　　popover的JS用法與tooltip的用法同樣，支持使用options對象的方法來向popover()方法傳參對象

$(element).popover(options);

　　options對象裏的參數包括amimation、html、placement、selector、original-title、title、trigger、delay、container、template

　　詳細狀況移步至此

<body style="margin-top:50px">
<button type="button" class="btn btn-default" data-toggle="popover" >按鈕</button>
<script>
$(function(){
    $('[data-toggle="popover"]').popover({
        title:"我是標題",
        content:'我是內容'
    });
});    
</script>

【關鍵字】

　　除了使用options對象，還可使用關鍵字，'show'、'hide'、'toggle'、'destroy'

<body style="margin-top:100px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容" id="btn1">按鈕1</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容"  id="btn2">按鈕2</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容"  id="btn3">按鈕3</button>
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="top" title="標題" data-content="內容"  id="btn4">按鈕4</button>
<script>
$(function(){
    $('#btn1').popover('show');//顯示彈出框
    $('#btn2').popover('hide');//關閉彈出框
    $('#btn3').popover('toggle');//反轉彈出框
    $('#btn4').popover('destroy');//隱藏並銷燬彈出框
});    
</script>

【事件】

　　該插件支持5種類型的事件訂閱

show.bs.tooltip        show方法調用以後當即觸發該事件
shown.bs.tooltip   　　 此事件在tooltip已經顯示出來（而且同時在 CSS 過渡效果完成）以後被觸發
hide.bs.tooltip        hide方法調用以後當即觸發該事件。
hidden.bs.tooltip    　此事件在tooltip被隱藏（而且同時在 CSS 過渡效果完成）以後被觸發
inserted.bs.tooltip    當tooltip模板加載到DOM中上時，在show.bs.tooltip觸發後，觸發該事件

<body style="margin-top:50px;">
<button type="button" class="btn btn-default" data-toggle="popover" data-placement="right" title="標題" data-content="內容" id="btn">按鈕</button>
<script>
$(function(){
    $('#btn').popover();
    $("#btn").on("show.bs.popover",function(e){
        $(this).html('關閉');    
    }).on("hide.bs.popover",function(e){
        $(this).html('打開');
    })

});    
</script>

對比提示框

　　一、提示框 tooltip 的默認觸發事件是 hover 和 focus，而彈出框 popover 是 click

　　二、提示框 tooltip 只有一個內容(title)，而彈出框不只能夠設置標題（title）還能夠設置內容(content)

　　三、提示框 tooltip 默認居上顯示，而彈出框 popover 默認居右顯示

　　四、顯示模板不一樣

　　提示框tooltip的模板：

<div class="tooltip" role="tooltip">
    <div class="tooltip-arrow"></div>
    <div class="tooltip-inner"></div>
</div>

　　彈出框popover的模板：

<div class="popover" role="tooltip">
    <div class="arrow"></div>
    <h3 class="popover-title"></h3>
    <div class="popover-content"></div>
</div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。