首頁 > 外鏈代發 > Bootstrap3.0學習教程二十:JS插件工具提示

Bootstrap3.0學習教程二十:JS插件工具提示

2015-04-14 admin 外鏈代發 0人評論 53105

3分快3 本文主要來學習一下JavaScript插件--工具提示。

完整教程可查看:

工具提示

3分快3 受到Jason Frame開發的jQuery.tipsy插件的啟發,Bootstrap才把這個工具提示插件做的更好,而且此插件不依賴圖片,只是使用CSS3來實現動畫效果,并使用data屬性存儲標題。

將鼠標懸停在按鈕、文本框、鏈接等等一些基本控件上就可以看到提示了,先上一個效果圖

Bootstrap3.0學習教程二十:JS插件工具提示  外鏈代發  第1張

主要實現了按鈕的上下左右的ToolTip,然后是文本框和鏈接的ToolTip。

3分快3 <div class="container" style="margin-top:40px;">

<div class="bs-example tooltip-demo">

<div class="bs-example-tooltips">

3分快3 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">左側Tooltip</button>

3分快3 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">上方Tooltip</button>

3分快3 <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">下方Tooltip</button>

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">右側Tooltip</button>

3分快3 </div>

</div>

3分快3 <input type="text" id="testt" rel="tooltip" title="123456" />

<a href="#" data-toggle="tooltip" title="Default tooltip" >dsafsdfasdfasdfasd</a>

3分快3 </div>

在按鈕上添加data-toggle="tooltip"的屬性來開啟它的工具提示功能,然后指定data-placement=”left“工具提示的位置,可以是上下左右(top、bottom、left、right)。

選擇性加入的功能

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

因此針對上述六個控件,我們需要初始化它們,我們是通過jQuery的初始化事件進行的

<script type="text/javascript">

$(function() {$('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" }) $("#testt").tooltip({}) $('a').tooltip()})

</script>

按鈕、文本框、鏈接三種不同的控件的實現初始化稍微有點不同。

工具提示與按鈕組和輸入框組聯合使用時需要一些特殊設置

在.btn-group 或 .input-group內的元素上使用工具提示時,你需要指定container: 'body'選項以避免不需要的副作用(例如,當工具提示顯示之后,與其合作的頁面元素可能變得更寬或是去圓角)。

在禁止使用的頁面元素上使用工具提示時需要額外增加一個元素將其包裹起來

3分快3 為了給disabled 或.disabled元素添加工具提示,將需要增加工具提示的頁面元素包裹在一個<div>中,然后對這個<div>元素應用工具提示。

用法

3分快3 通過JavaScript激活工具提示:上面也已經使用過了

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

選項

Bootstrap3.0學習教程二十:JS插件工具提示  外鏈代發  第2張

對單個工具提示使用data屬性

使用data屬性可以為單個工具提示指定額外選項,如下所示。

標記

<a href="#" data-toggle="tooltip" title="first tooltip">Hover over me</a>

方法

3分快3 $().tooltip(options)——為一組元素應用工具提示。

3分快3 .tooltip('show')——展示工具提示。

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

.tooltip('hide')——隱藏工具提示。

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

3分快3 .tooltip('toggle')——展示或隱藏工具提示。

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

3分快3 .tooltip('destroy')——隱藏并銷毀工具提示。

3分快3 $('#element').tooltip('destroy')

事件

Bootstrap3.0學習教程二十:JS插件工具提示  外鏈代發  第3張

$('.tooltip-demo').on('hidden.bs.tooltip', function () {

3分快3 alert(1);

})

總結

工具提示功能,最重要的就是記住此功能的開啟要功過JavaScript功能來開啟,一開始不知道什么問題,硬是沒效果,郁悶了好半天,結果還是找出原因了。

 

標簽:

發表評論

◎歡迎參與討論,請在這里發表您的看法、交流您的觀點。

官方微信公眾號
70755559
09:00 - 22:00
QQ客服: 70755559
客服郵箱: 678128@qq.com
2分快3-推荐 1分快3-官网 好运快3-欢迎您 幸运快3-安全购彩 网投app-Welcome 分分快3app-Home 1分快三平台-3分快3 彩票代理-推荐 五福彩票-官网 彩票大赢家-欢迎您