jQuery Tools tooltip使用说明

HTML 复制代码代码如下: <!DOCTYPE html> <html> <head> <title>jQuery Tools standalone demo</title>  <script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script> <link rel="stylesheet" type="text/css" href="./tooltip-generic.css"/> <style> #myform { border:1px outset #ccc; background:#fff repeat-x; padding:20px; margin:20px auto; width:350px; font-size:12px; -moz-border-radius:4px; } #myform h3 { text-align:center; margin:0 0 10px 0; } /* http://www.quirksmode.org/css/forms.html */ #inputs label, #inputs input, #inputs textarea, #inputs select { display: block; width: 150px; float: left; margin-bottom: 20px; } #inputs label { text-align: right; width: 75px; padding-right: 20px; } #inputs br { clear: left; } </style> </head> <body><form id="myform" action="#"> <h3>Registration Form</h3> <div id="inputs">  <label for="username">Username</label> <input id="username" title="Must be at least 8 characters."/> <br />  <label for="password">Password</label> <input id="password" type="password" title="Make it hard to guess." /> <br />  <label for="email">Email</label> <input id="email" title="We won't send you any marketing material." /> <br />  <label for="body">Message</label> <textarea id="body" title="What's on your mind?"></textarea> <br />  <label for="where">Select one</label> <select id="where" title="Select one of these options"> <option>-- first option --</option> <option>-- second option --</option> <option>-- third option --</option> </select> <br /> </div>  <label> I accept the terms and conditions <input type="checkbox" id="check" title="Required to proceed" /> </label> <p> <button type="button" title="This button won't do anything"> Proceed </button> </p> </form>  <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> </body> </html> 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 30 指定工具提示依然可见多久后鼠标叶子触发器。这是必需的,如果tootip已互动的内容和用户将需要时间去 tootip区域。通过设置0工具提示也会消失鼠标离开就从触发器元素。 events Object 一个配置对象,它指定当工具提示会显示和隐藏。您可以指定不同的事件不同类型的元素。这里有默认值为这个属性: events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" } JavaScript 你可以阅读更多关于这方面的内容这个事件管理一章。 layout '<div/>' 自从1.2.0 HTML布局为生成的工具提示。可以很复杂的HTML布局如你所愿。你可以,例如,添加一个嵌套的跨度元素作为箭的占位符。 offset [0, 0] 精细地调节工具提示指定位置这个位置属性。看到这个定位细节更多的信息。 opacity 1 透明的工具提示。例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。如果你的工具提示使用CSS背景图像,你可以设置透明度的形象,如果它已经保存在PNG24图形格式。记住,互联网 IE 6不支持原生透明的PNG。 position 'top center' 指定位置的工具提示。看到这个定位细节更多的信息。旧的格式:['top', 'center'] 是废弃,在未来将会被移除。 predelay 0 自从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() api 显示工具提示。 hide() api 隐藏工具提示。 isShown(fully) 布尔返回真正的如果这个工具提示是可见的。自从1.2.0 你也可以使用一个布尔型参数,保证了函数返回真正的只有当这个工具提示是充分的可见(在它的最终位置和不透明性)。 getTip() jQuery 返回tooltip作为一个jQuery对象。 getTrigger() jQuery 返回元素作为一个jQuery对象的触发。 getConf() 对象返回工具提示配置。内置的效果: 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老技术和堆代码

　　推荐阅读

　　解决遍历时Array.indexOf产生的性能问题

复制代码代码如下: Ext.applyIf(Array.prototype, { /** * Checks whether or not the specified object exists in the array. * @param {Object} o The object to check for * @param {Number} from (Optional) >>>详细阅读

本文标题：jQuery Tools tooltip使用说明

地址：http://www.17bianji.com/kaifa2/JS/23287.html

1/2 1