当前位置:首页 > 外链代发 > Bootstrap3.0学习教程二十:JS插件工具提示

Bootstrap3.0学习教程二十:JS插件工具提示

admin 3年前 383 0

本文主要来学习一下JavaScript插件--工具提示。

完整教程可查看:

工具提示

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

将鼠标悬停在按钮、文本框、链接等等一些基本控件上就可以看到提示了,先上一个效果图

Bootstrap3.0学习教程二十:JS插件工具提示 外链代发 第1张

主要实现了按钮的上下左右的ToolTip,然后是文本框和链接的ToolTip。

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

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

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

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

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

<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>

</div>

</div>

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

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

</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'选项以避免不需要的副作用(例如,当工具提示显示之后,与其合作的页面元素可能变得更宽或是去圆角)。

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

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

用法

通过JavaScript激活工具提示:上面也已经使用过了

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

选项

Bootstrap3.0学习教程二十:JS插件工具提示 外链代发 第2张

对单个工具提示使用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')

事件

Bootstrap3.0学习教程二十:JS插件工具提示 外链代发 第3张

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

alert(1);

})

总结

工具提示功能,最重要的就是记住此功能的开启要功过JavaScript功能来开启,一开始不知道什么问题,硬是没效果,郁闷了好半天,结果还是找出原因了。

 

发表评论
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

相关文章

网站优化内容建设如何形成自己独有风格

网站优化内容建设如何形成自己独有风格

    如果说美工是一个网站的门面,那么,内容就是一个网站的大脑,也可以称为灵魂。那么,作为网站非常重要的支撑点,网站内容的构建和策划我想是很多seoer十分关注的问题,那么,作为站...

玩转豆瓣推广:利用豆瓣日志和小组推广实战经验技巧!

玩转豆瓣推广:利用豆瓣日志和小组推广实战经验技巧!

文/不不博客大家好,我是不不博客站长付不不,今天与大家分享的是我操作豆瓣的一些推广技巧,这些技巧都是经过不不博客实战测试的。好了,闲话少说,我们直接上干货。一豆瓣日志推广...

认清当下互联网形式,重塑“外链观”

认清当下互联网形式,重塑“外链观”

    “内容为王,外链为皇”,这句经久不衰的名言,相信每个踏入SEO行业的人都耳闻目详,如果把SEO看成是一个家族的话,那么这句话作为“家规&r...

你造怎么做外链吗?学会像用户那样思考!

你造怎么做外链吗?学会像用户那样思考!

站长之家(Chianz.com)12月11日消息 关于“链接(内链和外链)该怎么做?”这个问题已是老生常谈,大部分的站长在做外链或者是内链的时候都带...

新站加快收录的工具:链接提交之手动提交

新站加快收录的工具:链接提交之手动提交

4月27日sitemap更名为链接提交后,将原有的url提交归并到了一起,并对其进行了升级,支持了批量提交功能(详情可查看站长之家前文《》)。社区版主李曰辉很快发现了这个变化,并针对新站提交做了...

移动电商网站中轮播组件用法研究

移动电商网站中轮播组件用法研究

看到这个标题你内心里或许会充满疑惑,我在写这篇文章之前,也曾经有很多疑问。你去问任何一个人,他们都不会推荐使用轮播这种模式。但是轮播本身并不是那么一无是处。本文将基于真实的数据,针对近期业界对...

网站SEO常规外链建设方法

网站SEO常规外链建设方法

对做外链完全没头绪?不知道如何做网站推广?曾几何时我也是一样。外链无疑对网站还是很有作用的,很多SEO新手不会做外链,很是头疼,这里给大家罗列了22中常规网站外链建设方法,还是那句话重要的是执行...

白帽子一直游走在法律的灰色边缘

白帽子一直游走在法律的灰色边缘

 白帽子一直游走在法律的灰色边缘。他们和黑客使用同样的工具、方法,进入各个网站的数据库,查看、分析、提取、测试,从而发现漏洞——除了发现漏洞之后,是选择提醒还是利用,是黑...