4.5Bootstrap学习js插件篇之工具提示
2016-09-30 07:55
295 查看
案例
受到Jason Frame开发的jQuery.tipsy插件的启发,我们才把这个工具提示插件做的更好,而且此插件不依赖图片,只是使用CSS3来实现动画效果,并使用data属性存储标题。将鼠标悬停到下面的链接上就可以看到工具提示了:
代码段:
[html]
view plain
copy
print?
<div class="bs-example tooltip-demo" id="tooltip">
<p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh
<a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a>
haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown.
Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel
<a href="#" data-toggle="tooltip" title="Another tooltip">have a</a>
terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats.
Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan
<a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a>
, scenester farm-to-table banksy Austin
<a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a>
freegan cred raw denim single-origin coffee viral.
</p>
</div>
<div class="bs-example tooltip-demo" id="tooltip"> <p class="muted" style="margin-bottom: 0;">Tight pants next level keffiyeh <a href="#" data-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-toggle="tooltip" title="Another one here too">whatever keytar</a> , scenester farm-to-table banksy Austin <a href="#" data-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral. </p> </div>
选择性加入的功能
出于性能方面的考虑,工具提示和弹框组件的data属性api是选择性加入的,也就是说你必须自己初始化他们。现在初始化:
[javascript]
view plain
copy
print?
$(function() {
$('.tooltip-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
})
</script>
$(function() { $('.tooltip-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" }) }) </script>效果
工具提示与按钮组和输入框组联合使用时需要一些特殊设置
在.btn-group或
.input-group内的元素上使用工具提示时,你需要指定
Container: 'body'选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。
在禁止使用的页面元素上使用工具提示时需要额外增加一个元素将其包裹起来
为了给disabled或
.disabled元素添加工具提示,将需要增加工具提示的页面元素包裹在一个
<div>中,然后对这个
<div>元素应用工具提示。
用法
通过JavaScript激活工具提示:上面也已经使用过了$('#example').tooltip(options)
选项
可以将选项通过data属性或JavaScript传递。对于data属性,需要将选项名称放到data-之后,例如
data-animation=""。
名称 | 类型 | 默认值 | 描述 |
---|---|---|---|
animation | boolean | true | apply a CSS fade transition to the tooltip |
html | boolean | false | Insert HTML into the tooltip. If false, jQuery's textmethod will be used to insert content into the DOM. Use text if you're worried about XSS attacks. |
placement | string | function | 'top' | how to position the tooltip - top | bottom | left | right | auto. When "auto" is specified, it will dynamically reorient the tooltip. For example, if placement is "auto left", the tooltip will display to the left when possible, otherwise it will display right. |
selector | string | false | If a selector is provided, tooltip objects will be delegated to the specified targets. |
title | string | function | '' | default title value if titleattribute isn't present |
trigger | string | 'hover focus' | how tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. |
delay | number | object | 0 | delay showing and hiding the tooltip (ms) - does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: delay: { show: 500, hide: 100 } |
container | string | false | false | Appends the tooltip to a specific element. Example: container: 'body' |
[html]
view plain
copy
print?
<div class="tool-demo">
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的提示">左侧的提示</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上面的提示">上面的提示</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的提示">底部的提示</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的提示">右侧的提示</button>
</div>
<div class="tool-demo"> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="左侧的提示">左侧的提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="上面的提示">上面的提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="底部的提示">底部的提示</button> <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="右侧的提示">右侧的提示</button> </div>javascript启动:
[javascript]
view plain
copy
print?
$('.tool-demo').tooltip({
selector: "[data-toggle=tooltip]",
container: "body"
})
$('.tool-demo').tooltip({ selector: "[data-toggle=tooltip]", container: "body" })
预览效果:
关于选项,
animation:false,//是否显示动画
selector: "[data-toggle=tooltip]",//选择器
container: "body",//
trigger:"hover",//指定以什么事件触发该提示框,一般都是悬浮
title:"文本",//如果要提示的元素没有title属性,该title指定其属性title,并显示在提示框中。
delay:0,//延迟(ms)
html:true(暂时没弄懂,官网是说插入html我试了试,不太管用)
方法
$().tooltip(options)
为一组元素应用工具提示。
.tooltip('show')
展示工具提示。$('#element').tooltip('show')
.tooltip('hide')
隐藏工具提示。$('#element').tooltip('hide')
.tooltip('toggle')
展示或隐藏工具提示。$('#element').tooltip('toggle')
.tooltip('destroy')
隐藏并销毁工具提示。$('#element').tooltip('destroy')
事件
事件类型 | 描述 |
---|---|
show.bs.tooltip | 当show方法被调用之后,此事件将被立即触发。 |
shown.bs.tooltip | 当工具提示展示到用户面前之后(同时CSS过渡效果执行完之后)此事件被触发。 |
hide.bs.tooltip | 当hide方法被调用之后,此事件被触发。 |
hidden.bs.tooltip | 当工具提示被隐藏之后(同时CSS过渡效果执行完之后),此事件被触发。 |
$('#myTooltip').on('hidden.bs.tooltip', function () { // do something…
})
代码段:
[javascript]
view plain
copy
print?
$(function(){
$(function(){
[javascript]
view plain
copy
print?
$("#btn").on('hidden.bs.tooltip',function()
{
alert("ok");
})
$("#btn").on('hidden.bs.tooltip',function() { alert("ok"); })
[javascript]
view plain
copy
print?
<pre class="javascript" style="color: rgb(51, 51, 51); line-height: 18.57px;" name="code" snippet_file_name="blog_20140507_7_4100616" code_snippet_id="331963">})</pre><br>
<p></p>
<pre></pre>
预览效果:
<p></p>
<p style="color: rgb(51, 51, 51); margin-top: 0px; margin-bottom: 10px;"><span style="font-family: Menlo,Monaco,Consolas,Courier New,monospace; font-size: 18px;"><span style="line-height: 18.57px; white-space: pre-wrap;"><img alt="" src="https://img-blog.csdn.net/20140507155047640?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvYTMxNjIxMjgwMg==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center"><br>
</span></span></p>
相关文章推荐
- 4.5Bootstrap学习js插件篇之工具提示
- GTK+图形化应用程序开发学习笔记(十一)—箭头构件、工具提示对象
- myEclipse7.5中安装 javascript,extjs的代码自动提示spket插件和extjs desiner可视化代码生成工具,extjs的一个很好的学习视频资源地址
- CSS基础应用学习系列(2)——纯CSS工具提示
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- Bootstrap基本插件学习笔记之Tooltip提示工具(18)
- jquery ui 学习随笔 工具提示
- Flex3学习轨迹:创建工具提示
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- GTK+图形化应用程序开发学习笔记(十一)—箭头构件、工具提示对象
- Laravel 学习笔记之语言包 IDE IDE提示工具 IDE插件笔记
- Ajax基础教程学习(6)_创建工具提示
- Bootstrap3.0学习第二十一轮(JavaScript插件——工具提示)
- 在学习java框架时,用myeclipse工具,写xml文件时,想让提示 配置如下:
- Bootstrap学习总结笔记(18)-- 基本插件之Tooltip提示工具
- Flex3学习轨迹:使用ToolTipManager实现动态的工具提示
- Bootstrap3 工具提示之个人学习笔记
- Flex3学习轨迹:ToolTipManager来进行工具提示的启用和禁用
- GTK+图形化应用程序开发学习笔记(十一)—箭头构件、工具提示对象
- Bootstrap学习js插件篇之提示框