欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Bootstrap教程JS插件彈出框?qū)W習(xí)筆記分享

 更新時間：2016年05月17日 17:29:52   投稿：lijiao  
這篇文章主要為大家分享了Bootstrap教程JS插件彈出框?qū)W習(xí)筆記，為大家詳細(xì)介紹Bootstrap彈出框的使用方法，感興趣的小伙伴們可以參考一下

本文主要來學(xué)習(xí)一下JavaScript插件--彈出框。

案例

為頁面內(nèi)容添加一個小的覆蓋層，就像iPad上的效果一樣，為頁面元素增加額外的信息。

先來看幾個簡單的靜態(tài)案例效果圖

效果比較簡單主要就是靜態(tài)的彈出的小窗體，分為窗體標(biāo)題和窗體內(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>

但是我們還是需要給元素設(shè)置簡單的基本布局

<style type="text/css">

.bs-example-popover .popover {

position: relative; display: block; float: left; width: 240px; margin: 20px;

}

</style>

動態(tài)演示

先來看效果圖

一個按鈕，點(diǎn)擊按鈕的時候就會彈出右側(cè)的小窗體。

看代碼，其實(shí)也很簡單。

[code]<a id="a2" class="btn btn-lg btn-danger" data-placement="right" data-content="即對擁有矮、胖、窮、丑、矬、呆、擼等屬性特征的各種雷人行徑及想法表示輕蔑。屌絲（或?qū)懽鳌暗踅z”）可以說是由罵人話“屌死”、“吊死”、“叼死”演變而來?！皩沤z男”主要是指大多出身清貧之家，如鄉(xiāng)村或許多城市底層小市民家庭，沒有更多的背景，許多初中即停學(xué)，進(jìn)城務(wù)工，或成了餐廳服務(wù)員，或成了網(wǎng)吧網(wǎng)管，在城市的富貴之中分得一杯苦羹；或是宅男、無業(yè)游民，可是通常又不肯承認(rèn)，個人一般自稱為自由職業(yè)者。" title="" href="#" data-original-title="屌絲本義"> Please Click to toggle popover </a>[code]

就一個a標(biāo)簽，但是賦予了按鈕的樣式類，然后給與幾個屬性，主要用于展示彈出框的：

第一個：data-original-title ——標(biāo)題

第二個：data-content——內(nèi)容

第三個：data-placement——位置（上下左右top、bottom、left、right）

不過現(xiàn)在如果你來運(yùn)行，按鈕是有了，你點(diǎ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."> 左側(cè)彈框 </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."> 右側(cè)彈框 </button>

</div>

</div>

然后用JavaScript來激活

<script type="text/javascript">

$("#a1").popover();

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

</script>

選擇性加入的功能

出于性能方面的考慮，工具提示和彈框組件的data屬性api是選擇性加入的，也就是說你必須自己初始化他們。

彈出框在按鈕組和輸入框組中使用時，需要額外的設(shè)置

當(dāng)提示框與.btn-group 或 .input-group聯(lián)合使用時，你需要指定container: 'body'選項(xiàng)（見下面的文檔）以避免不需要的副作用（例如，當(dāng)彈出框顯示之后，與其合作的頁面元素可能變得更寬或是去圓角）。

在禁止使用的頁面元素上使用彈出框時需要額外增加一個元素將其包裹起來

為了給disabled 或.disabled元素添加彈出框時，將需要增加彈出框的頁面元素包裹在一個<div>中，然后對這個<div>元素應(yīng)用彈出框。

用法
通過JavaScript啟用彈出框：

$('#example').popover(options)

選項(xiàng)

可以將選項(xiàng)通過data屬性或JavaScript傳遞。對于data屬性，需要將選項(xiàng)名稱放到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);

})

如果大家還想深入學(xué)習(xí)，可以點(diǎn)擊這里進(jìn)行學(xué)習(xí)，再為大家附3個精彩的專題：

Bootstrap學(xué)習(xí)教程

Bootstrap實(shí)戰(zhàn)教程

Bootstrap插件使用教程

 以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。

相關(guān)文章

最新評論