亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

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

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

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

案例

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

先來(lái)看幾個(gè)簡(jiǎn)單的靜態(tài)案例效果圖

效果比較簡(jiǎn)單主要就是靜態(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è)置簡(jiǎn)單的基本布局

<style type="text/css">

.bs-example-popover .popover {

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

}

</style>

動(dòng)態(tài)演示

先來(lái)看效果圖

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

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

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

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

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

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

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

不過(guò)現(xiàn)在如果你來(lái)運(yùn)行，按鈕是有了，你點(diǎn)擊按鈕彈出框被不會(huì)出現(xiàn)，原來(lái)很簡(jiǎn)單，就是我們還沒(méi)有給它初始化，就像上一節(jié)中的tooltip一樣的。

只需要添加簡(jiǎn)單的JavaScript代碼就可以了。

<script type="text/javascript">

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

</script>

四個(gè)方向

<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來(lái)激活

<script type="text/javascript">

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

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

</script>

選擇性加入的功能

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

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

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

在禁止使用的頁(yè)面元素上使用彈出框時(shí)需要額外增加一個(gè)元素將其包裹起來(lái)

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

用法
通過(guò)JavaScript啟用彈出框：

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

選項(xiàng)

可以將選項(xiàng)通過(guò)data屬性或JavaScript傳遞。對(duì)于data屬性，需要將選項(xiàng)名稱(chēng)放到data-之后，例如data-animation=""。

方法

$().popover(options)

為一組元素初始化彈出框。

$('#element').popover('show')

顯示彈出框。

$('#element').popover('hide')

隱藏彈出框。

$('#element').popover('toggle')

展示或隱藏彈出框。

$('#element').popover('destroy')

隱藏并銷(xiāo)毀彈出框。

事件

$('[data-toggle=popover]').on('shown.bs.popover', function (){

alert(1);

})

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

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

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

Bootstrap插件使用教程

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

相關(guān)文章

最新評(píng)論