1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > Bootstrap学习js插件篇之提示框

Bootstrap学习js插件篇之提示框

时间:2024-04-29 00:20:54

相关推荐

Bootstrap学习js插件篇之提示框

案例

受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题。

将鼠标悬停到下面的链接上就可以看到工具提示了:

代码段:

[javascript]view plaincopy <scripttype="text/javascript">$(function(){$('.tooltip-demo').tooltip({selector:"[data-toggle=tooltip]",container:"body"})$("#testt").tooltip({})$('a').tooltip()})</script>[html]view plaincopy <divclass="bs-exampletooltip-demo"><pclass="muted"style="margin-bottom:0;">Tightpantsnextlevelkeffiyeh<ahref="#"data-toggle="tooltip"title="Defaulttooltip">youprobably</a>haven'theardofthem.Photoboothbeardrawdenimletterpressveganmessengerbagstumptown.Farm-to-tableseitan,mcsweeney'sfixiesustainablequinoa8-bitamericanapparel<ahref="#"data-toggle="tooltip"title="Anothertooltip">havea</a>terryrichardsonvinylchambray.Beardstumptown,cardigansbanhmilomothundercats.Tofubiodieselwilliamsburgmarfa,fourlokomcsweeney'scleanseveganchambray.Areallyironicartisan<ahref="#"data-toggle="tooltip"title="Anotheroneheretoo">whateverkeytar</a>,scenesterfarm-to-tablebanksyAustin<ahref="#"data-toggle="tooltip"title="Thelasttip!">twitterhandle</a>freegancredrawdenimsingle-origincoffeeviral.</p></div>

预览:

图片无法上传了。。。。。。。。我去去去去去去去。。。。。!!

四个展示方位

左侧Tooltip上方Tooltip下方Tooltip右侧Tooltip

选择性加入的功能

出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们。

工具提示与按钮组和输入框组联合使用时需要一些特殊设置

.btn-group.input-group内的元素上使用工具提示时,你需要指定container: 'body'选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。

在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来

为了给disabled.disabled元素添加工具提示,将需要增加工具提示的页面元素包裹在一个<div>中,然后对这个<div>元素应用工具提示。

用法

通过JavaScript激活工具提示:

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

Markup

The generated markup of a tooltip is rather simple, though it does require a position (by default, set totopby the plugin).

<div class="tooltip"><div class="tooltip-inner"> Tooltip! </div> <div class="tooltip-arrow"></div> </div>

选项

可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如data-animation=""

对单个工具提示使用data属性

使用data属性可以为单个工具提示指定额外选项,如下所示。

标记

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

方法

$().tooltip(options)

为一组元素应用工具提示。

.tooltip('show')

展示工具提示。

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

.tooltip('hide')

隐藏工具提示。

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

.tooltip('toggle')

展示或隐藏工具提示。

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

.tooltip('destroy')

隐藏并销毁工具提示。

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

事件

$('#myTooltip').on('hidden.bs.tooltip', function () { // do something… })

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。