jQuery Tools tooltip使用说明_jquery-js教程-PHP中文网

jQuery Tools tooltip使用说明_jquery

php中文网

发布： 2016-05-16 17:51:51

原创

1247人浏览过

HTML

jQuery Tools standalone demo

href="./tooltip-generic.css"/>

<script> // execute your scripts when the DOM is ready. this is a good habit $(function() { // select all desired input fields and attach tooltips to them $("#myform :input").tooltip({ // place tooltip on the right edge position: "center right", // a little tweaking of the position offset: [-2, 10], // use the built-in fadeIn/fadeOut effect effect: "fade", // custom opacity setting opacity: 0.7 }); }); </script>

CSS

复制代码代码如下:

 
/* simple css-based tooltip */ 
.tooltip { 
background-color:#000; 
border:1px solid #fff; 
padding:10px 15px; 
width:200px; 
display:none; 
color:#fff; 
text-align:left; 
font-size:12px; 
/* outline radius for mozilla/firefox only */ 
-moz-box-shadow:0 0 10px #000; 
-webkit-box-shadow:0 0 10px #000; 
} 

CSS可以不需要，这样显示的样子恶心了点。
关键代码：

复制代码代码如下:

 
// select all desired input fields and attach tooltips to them 
$("#myform :input").tooltip({ 
// place tooltip on the right edge 
position: "center right", 
// a little tweaking of the position 
offset: [-2, 10], 
// use the built-in fadeIn/fadeOut effect 
effect: "fade", 
tipClass:'tooltip', // 省却值：tooltip，少了这一行效果也是一样 
// custom opacity setting 
opacity: 0.7 
}); 

使用
这里是可能存在的最简单的工具提示的初始化:

$("#myform :input").tooltip();配置

属性	默认值	描述
cancelDefault	`true`	自从1.1.0版。当工具提示内容抓取从 `标题` 触发器元素的属性这个属性取消默认工具提示执行的行为浏览器。这是通过简单的移除这个 `标题` 属性从触发器。你仍然可以检索/修改标题值通过调用 jQuery的 `数据('title')` 方法为触发。
effect	`'toggle'`	指定了如何显示和隐藏的提示。有两个内置的效果,可以用作值: toggle 。一个简单的显示/隐藏效果。这是默认 fade 。一个简单的淡入/淡出效果还有一个幻灯片效果不包括在该工具本身。你可以构建你自己的。
delay	`<span id="OUTFOX_JTR_TRANS_NODE-93" class="OUTFOX_JTR_TRANS_NODE">30 </span>`	指定工具提示依然可见多久后鼠标叶子触发器。这是必需的,如果tootip已互动的内容和用户将需要时间去 tootip区域。通过设置0工具提示也会消失鼠标离开就从触发器元素。
events	`Object`	一个配置对象,它指定当工具提示会显示和隐藏。您可以指定不同的事件不同类型的元素。这里有默认值为这个属性: <span class="nx">events</span><span class="o">:</span> <span class="p">{</span><br><span class="nx">def</span><span class="o">:</span> <span class="s2">"mouseover,mouseout"</span><span class="p">,</span><br><span class="nx">input</span><span class="o">:</span> <span class="s2">"focus,blur"</span><span class="p">,</span><br><span class="nx">widget</span><span class="o">:</span> <span class="s2">"focus mouseover,blur mouseout"</span><span class="p">,</span><br><span class="nx">tooltip</span><span class="o">:</span> <span class="s2">"mouseover,mouseout"</span><br><span class="p">}</span><br> 登录后复制 JavaScript 你可以阅读更多关于这方面的内容这个事件管理一章。
layout	`'<div></div>'`	自从1.2.0 HTML布局为生成的工具提示。可以很复杂的HTML布局如你所愿。你可以,例如,添加一个嵌套的 `跨度` 元素作为箭的占位符。
offset	`[0, 0]`	精细地调节工具提示指定位置这个 `位置属性`。看到这个定位细节更多的信息。
opacity	`<span id="OUTFOX_JTR_TRANS_NODE-116" class="OUTFOX_JTR_TRANS_NODE">1 </span>`	透明的工具提示。例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。如果你的工具提示使用CSS背景图像,你可以设置透明度的形象,如果它已经保存在PNG24图形格式。记住,互联网 IE 6不支持原生透明的PNG。
position	`'top center'`	指定位置的工具提示。看到这个定位细节更多的信息。旧的格式:`['top', 'center']` 是废弃,在未来将会被移除。
predelay	`<span id="OUTFOX_JTR_TRANS_NODE-126" class="OUTFOX_JTR_TRANS_NODE">0 </span>`	自从1.1.0版。指定了延迟(在毫秒)工具提示显示之前。默认情况下有没有延迟。
relative	`false`	自从1.1.1。默认情况下,工具提示位置现在决定相对于文档(通过使用这个 relative)的方法。通过启用这个产权工具提示的位置是相对确定的父元素
tip		一个jQuery选择器为一个单一的工具提示的元素。对于示例 `# mytip` 。该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。因为1.2.5 `标题` 属性仍然可以被用作工具提示内容。
tipClass	`'tooltip'`	自从1.2.0。 CSS类名生成的工具提示的元素。

事件
确保你已经阅读大约事件 jQuery工具。所有事件监听器接收这个事件对象作为第一个参数。

事件	触发事件
onbeforeshow	在工具提示显示。第二个参数是工具提示要使用位置。这是一个对象的值`{top: integer, left: integer}`
onShow	在工具提示显示。
onBeforeHide	在工具提示是隐藏的
onHide	当这个工具提示是隐藏的。

下面的示例是一个onShow 回调函数, 淡出触发器元素当工具提示显示:

复制代码代码如下:

 
$("label").tooltip({ 
// change trigger opacity slowly to 0.8 
onShow: function() { 
this.getTrigger().fadeTo("slow", 0.8); 
} 
}); 

事件管理
jQuery工具提示可以让你完全控制当工具提示将显示或隐藏。您可以指定不同的事件不同类型的元素。你可以控制这种行为这个事件配置变量,它具有以下默认值:

复制代码代码如下:

 
events: { 
def: "mouseenter,mouseleave", // default show/hide events for an element 
input: "focus,blur", // for all input elements 
widget: "focus mouseenter,blur mouseleave", // select, checkbox, radio, button 
tooltip: "mouseenter,mouseleave" // the tooltip element 
} 

脚本 api
首先确保你已经了解你自己与 jQuery工具脚本。

以下列出的是所有API方法:

方法	返回值	描述/例子
show()	`<span id="OUTFOX_JTR_TRANS_NODE-255" class="OUTFOX_JTR_TRANS_NODE">api </span>`	显示工具提示。
hide()	`<span id="OUTFOX_JTR_TRANS_NODE-258" class="OUTFOX_JTR_TRANS_NODE">api </span>`	隐藏工具提示。
isShown(fully)	`<span id="OUTFOX_JTR_TRANS_NODE-261" class="OUTFOX_JTR_TRANS_NODE">布尔 </span>`	返回 `真正的` 如果这个工具提示是可见的。自从1.2.0 你也可以使用一个布尔型参数,保证了函数返回 `真正的` 只有当这个工具提示是充分的可见(在它的最终位置和不透明性)。
getTip()	`<span id="OUTFOX_JTR_TRANS_NODE-268" class="OUTFOX_JTR_TRANS_NODE">jQuery </span>`	返回tooltip作为一个jQuery对象。
getTrigger()	`<span id="OUTFOX_JTR_TRANS_NODE-271" class="OUTFOX_JTR_TRANS_NODE">jQuery </span>`	返回元素作为一个jQuery对象的触发。
getConf()	`<span id="OUTFOX_JTR_TRANS_NODE-274" class="OUTFOX_JTR_TRANS_NODE">对象 </span>`	返回工具提示配置。

内置的效果: fade
内置的效果“渐”有它自己的一组配置选项如下:

属性	默认值	描述
fadeInSpeed	400	淡入时速度显示工具提示,以毫秒为单位。
fadeoutspeed	200	当工具提示的淡出速度是隐藏着的,以毫秒为单位。

下面有个自定义事件的例子：http://jquerytools.org/demos/tooltip/custom-effect.htm
　　tab：传送门
　　tab(幻灯片)：传送门
　　tooltip：传送门
　　overlay：传送门
　　dateinput：传送门
在携程做着framework2.0，研究的却是framework4.0，当时是怎么想的T.T。全是TMD老技术和堆代码

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

jQuery Tools tooltip使用说明_jquery

Registration Form