第二百四十六节,Bootstrap弹出框和警告框插件
Bootstrap彈出框和警告框插件
?
學習要點:
1.彈出框
2.警告框
?
本節課我們主要學習一下 Bootstrap 中的彈出框和警告框插件。
?
一.彈出框
彈出框即點擊一個元素彈出一個包含標題和內容的容器。
基本用法
注意:必須在js結合popover()方法使用
data-toggle="popover"彈出框事件綁定,寫在觸發彈出框的元素里,執行彈出框事件點擊彈出或隱藏(Bootstrap)
title=""設置彈出框標題,寫在彈出框元素里,(Bootstrap)
data-content=""設置彈出框內容,寫在彈出框元素里,(Bootstrap)
popover()彈出框方法,將觸發彈出框元素執行彈出框方法,一般在button元素上使用(Bootstrap)
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框 </button>js
$(function () {$('button').popover(); });?
?
彈出框插件有很多屬性來配置提示的顯示,具體如下:
data-animation 默認 true,在 popover 上應用一個 CSS fade 動畫。如果設置 false,則不應用。設置是否淡入淡出動畫
?
data-html 默認 false,不允許提示內容格式為 html。如果設置為 true,則可以設置 html 格式的提示內容。設置內容或標題是否支持html標簽
?
data-placement 默認值 top,還有 bottom、left、right 和 auto。如果 auto 會自行調整合適的位置,如果是 auto left則會盡量在左邊顯示,但左邊不行就靠右邊。設置彈出框位置
?
data-selector 默認 false,可以選擇綁定指定的選擇器。可以在一個按鈕綁定一個指定的彈出框
?
data-original-title 默認空字符串,彈出框的標題。優先級比 title 低,設置標題
?
title 默認字空符串,彈出框的標題。設置標題
?
data-trigger 默認值 click,表示怎么觸發 popover,其他值為:hover、focus、manual。多個值用空格隔開,manual手動不能和其他同時設置。設置觸發彈出框的事件
?
data-delay 默認值 0,延遲觸發 popover(毫秒),如果傳數字則,表示 show/hide 的毫秒數,如果傳對象,結構為:{show:500,hide:100},設置顯示和隱藏的延遲時間
?
data-container 默認值 false,將 popover 附加到特定的元素上。比如組合按鈕組提示,容器不夠,可以附加 body 上。container : 'body',也就是如果提示信息被容器遮擋,可以設置一個外層div,將提示信息的容器重新指定到設置的div上
?
data-template 更改提示框的 HTML 提示語的模版,默認值為:設置提示框模板
<div class="popover">
<div class="arrow"></div>
<h3 class="popover-title"></h3>
<div class="popover-content"></div>
</div>
?
data-content 默認值為空,彈出框的內容。設置彈出框內容
?
data-viewport 設置外圍容器的邊際,具體代碼看示例。
?
<div id="view"><button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框</button> </div>?
js
$(function () {$('button').popover({container:'#view',viewport: {selector: '#view',padding: 5,}}); });?
?
?
重點,以上屬性有兩種使用方式,1是在html標簽里用屬性的方式,2是在js里用對象屬性的方式
html標簽里用屬性的方式
<button class="btn btn-lg btn-danger" type="button" data-toggle="popover" title="彈出框" data-content="這是一個彈出框插件">點擊彈出/隱藏彈出框 </button>2是在js里用對象屬性的方式,將上面的屬性去掉data就是js對象屬性
$(function () {$('button').popover({animation:true, //設置彈出框支持淡入淡出placement:'top' //設置彈出框頭部顯示 }); });?
?
彈出框方法
show彈出框方法參數,顯示彈出框,(Bootstrap)
hide彈出框方法參數,隱藏彈出框,(Bootstrap)
toggle彈出框方法參數,反轉顯示和隱藏彈出框,(Bootstrap)
destroy彈出框方法參數,隱藏并銷毀彈出框,(Bootstrap)
?
?
彈出框事件
show.bs.popover 在調用 show 方法時觸發(Bootstrap)
shown.bs.popover 在顯示整個彈窗時時觸發(Bootstrap)
hide.bs.popover 在調用 hide 方法時觸發(Bootstrap)
hidden.bs.popover 在完全關閉整個彈出時觸發(Bootstrap)
?
?
二.警告框
警告框即為點擊消失的信息框。
基本實例
alert樣式class類,寫在<div>里,聲明一個警告框區塊(Bootstrap)
alert-danger樣式class類,寫在<div>里,設置警告框樣式為紅色(Bootstrap)
close樣式class類,寫在警告框里的<button>里,設置警告框關閉按鈕樣式(Bootstrap)
data-dismiss="alert"警告框事件,寫在警告框里的button里,點擊后關閉警告框(Bootstrap)
?
添加淡入淡出效果
fade樣式class類,寫在警告框<div>里,設置警告框淡入淡出效果(Bootstrap)
in樣式class類,寫在警告框<div>里,設置警告框默認顯示淡入淡出效果(Bootstrap)
?
?
警告框方法
如果用 JavaScript,可以代替 data-dismiss="alert"事件
alert()警告框框方法,將警告框元素執行警告框方法,一般在警告框區塊div元素上使用(Bootstrap)
?
close警告框方法參數,關閉警告框(Bootstrap)
html
<div id="alert" class="alert alert-danger fade in"><button class="close" type="button"><span>×</span></button><p>警告:您的瀏覽器不支持!</p> </div>js
$(function () {$('.close').on('click', function () { //獲取警告框按鈕執行點擊事件$('#alert').alert('close'); //點擊后關閉警告框 }) });?
?
?
警告框事件
close.bs.alert ?當 close 方法被調用后立即觸發(Bootstrap)
closed.bs.alert ?當警告框被完全關閉后立即觸發(Bootstrap)
?
轉載于:https://www.cnblogs.com/adc8868/p/6806543.html
創作挑戰賽新人創作獎勵來咯,堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的第二百四十六节,Bootstrap弹出框和警告框插件的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 第四篇:在MVPArms中报错error
- 下一篇: 2016 校园招聘求职经历(二)