Bootstrap教程JS插件彈出框學習筆記分享
本文主要來學習一下JavaScript插件--彈出框。
案例
為頁面內(nèi)容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。
先來看幾個簡單的靜態(tài)案例效果圖
效果比較簡單主要就是靜態(tài)的彈出的小窗體，分為窗體標題和窗體內(nèi)容。
<div class="bs-example bs-example-popover"> <div class="popover top"> <div class="arrow"> </div> <h3 class="popover-title">Popover top</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover right"> <div class="arrow"> </div> <h3 class="popover-title">Popover right</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover bottom"> <div class="arrow"> </div> <h3 class="popover-title">Popover bottom</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="popover left"> <div class="arrow"> </div> <h3 class="popover-title">Popover left</h3> <div class="popover-content"> <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p> </div> </div> <div class="clearfix"> </div> </div>
但是我們還是需要給元素設置簡單的基本布局
<style type="text/css">
.bs-example-popover .popover {
position: relative; display: block; float: left; width: 240px; margin: 20px;
}
</style>
動態(tài)演示
先來看效果圖
一個按鈕，點擊按鈕的時候就會彈出右側的小窗體。
看代碼，其實也很簡單。
[code]<a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="即對擁有矮、胖、窮、丑、矬、呆、擼等屬性特征的各種雷人行徑及想法表示輕蔑。屌絲（或寫作“吊絲”）可以說是由罵人話“屌死”、“吊死”、“叼死”演變而來?！皩沤z男”主要是指大多出身清貧之家，如鄉(xiāng)村或許多城市底層小市民家庭，沒有更多的背景，許多初中即停學，進城務工，或成了餐廳服務員，或成了網(wǎng)吧網(wǎng)管，在城市的富貴之中分得一杯苦羹；或是宅男、無業(yè)游民，可是通常又不肯承認，個人一般自稱為自由職業(yè)者。" title="" href="#" data-original-title="屌絲本義"> Please Click to toggle popover </a>[code]
就一個a標簽，但是賦予了按鈕的樣式類，然后給與幾個屬性，主要用于展示彈出框的：
第一個：data-original-title ——標題
第二個：data-content——內(nèi)容
第三個：data-placement——位置（上下左右top、bottom、left、right）
不過現(xiàn)在如果你來運行，按鈕是有了，你點擊按鈕彈出框被不會出現(xiàn)，原來很簡單，就是我們還沒有給它初始化，就像上一節(jié)中的tooltip一樣的。
只需要添加簡單的JavaScript代碼就可以了。
<script type="text/javascript">
$("#a1").popover();
</script>
四個方向
<div style="margin-left:200px;margin-top:100px;margin-bottom:200px;" class="bs-example tooltip-demo"> <div class="bs-example-tooltips"> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 左側彈框 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 上方彈框 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 下方彈框 </button> <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus."> 右側彈框 </button> </div> </div>
然后用JavaScript來激活
<script type="text/javascript">
$("#a1").popover();
$("[data-toggle=popover]").popover();
</script>
選擇性加入的功能
出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。
彈出框在按鈕組和輸入框組中使用時，需要額外的設置
當提示框與.btn-group 或 .input-group聯(lián)合使用時，你需要指定container: 'body'選項（見下面的文檔）以避免不需要的副作用（例如，當彈出框顯示之后，與其合作的頁面元素可能變得更寬或是去圓角）。
在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來
為了給disabled 或.disabled元素添加彈出框時，將需要增加彈出框的頁面元素包裹在一個<div>中，然后對這個<div>元素應用彈出框。
用法
通過JavaScript啟用彈出框：
$('#example').popover(options)
選項
可以將選項通過data屬性或JavaScript傳遞。對于data屬性，需要將選項名稱放到data-之后，例如data-animation=""。
方法
$().popover(options)
為一組元素初始化彈出框。
$('#element').popover('show')
顯示彈出框。
$('#element').popover('hide')
隱藏彈出框。
$('#element').popover('toggle')
展示或隱藏彈出框。
$('#element').popover('destroy')
隱藏并銷毀彈出框。
事件
$('[data-toggle=popover]').on('shown.bs.popover', function (){
alert(1);
})
如果大家還想深入學習，可以點擊這里進行學習，再為大家附3個精彩的專題：
以上就是本文的全部內(nèi)容，希望對大家學習javascript程序設計有所幫助。
- bootstrap modal彈出框的垂直居中
- Bootstrap彈出框modal上層的輸入框不能獲得焦點問題的解決方法
- Bootstrap實現(xiàn)帶動畫過渡的彈出框
- 簡介BootStrap model彈出框的使用
- JS組件Bootstrap實現(xiàn)彈出框效果代碼
- Bootstrap每天必學之彈出框（Popover）插件
- BootStrap的彈出框(Popover)支持鼠標移到彈出層上彈窗層不隱藏的原因及解決辦法
- 關于Bootstrap彈出框無法調(diào)用問題的解決辦法
- JS組件Bootstrap實現(xiàn)彈出框和提示框效果代碼
- Bootstrap源碼解讀模態(tài)彈出框（11）
相關文章
這篇文章主要介紹了JavaScript this綁定過程,結合實例形式深入分析了JavaScript中this關鍵字的功能、原理、綁定方式及相關操作注意事項,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Javascript原型鏈和原型的一個誤區(qū),需要的朋友可以參考下2014-10-10
這篇文章主要介紹了如何用threejs實現(xiàn)實時多邊形折射，對three.js庫感興趣的同學，可以參考下2021-05-05
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)彈框效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章主要介紹了JavaScript 中的運算符和表達式介紹，文章圍繞主題展開詳細的內(nèi)容介紹，具有一定的參考價值，需要的小伙伴可以參考一下2022-09-09
前端學習筆記style，currentStyle，getComputedStyle的用法與區(qū)別
這篇文章主要介紹了前端學習筆記style，currentStyle，getComputedStyle的用法與區(qū)別,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了Object的相關方法 和 js遍歷對象的常用方法,結合實例形式總結分析了Object對象操作的操作方法與js遍歷的三種常用方法,需要的朋友可以參考下2023-05-05
今天小編就為大家分享一篇layui彈出層按鈕提交iframe表單的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
JavaScript Event學習第五章 高級事件注冊模型
在這一章我會講解兩種高級時間注冊模型：W3C和微軟的。因為這兩個方法都不能跨瀏覽器，所以在現(xiàn)在看來他們的使用場合并不多。2010-02-02
這篇文章主要為大家詳細介紹了原生JS層疊輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05