jQuery Tools tooltip使用说明

程序员文章站 2022-06-18 16:13:15

html代码如下: jquery tools standalone demo...</div> <div class="content"> 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>  <label for="username">username</label> <input id="username" title="must be at least 8 characters."/>  <label for="password">password</label> <input id="password" type="password" title="make it hard to guess." />  <label for="email">email</label> <input id="email" title="we won't send you any marketing material." />  <label for="body">message</label> <textarea id="body" title="what's on your mind?"></textarea>  <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>  <label> i accept the terms and conditions <input type="checkbox" id="check" title="required to proceed" /> </label> <button type="button" title="this button won't do anything"> proceed </button> </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> <a href="https://www.2cto.com/kf/qianduan/css/" target="_blank" class="keylink" rel="nofollow">css</a> . 代码如下: /* 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();配置 <table class="jbborder"> <thead><tr> <th> 属性 </th> <th> 默认值 </th> <th> 描述 </th> </tr></thead> <tbody> <tr> <td class="code">canceldefault </td> <td><code>true</code></td> <td> 自从1.1.0版。 当工具提示内容抓取从 <samp>标题 </samp>触发器元素的属性这个属性取消默认工具提示执行的行为。这是通过简单的移除这个 <samp>标题 </samp>属性从触发器。 你仍然可以检索/修改标题值通过调用 jquery的 <samp>数据('title') </samp>方法为触发。 </td> </tr> <tr> <td class="code">effect</td> <td><code>'toggle'</code></td> <td> 指定了如何显示和隐藏的提示。有两个内置的效果,可以用作值: toggle 。一个简单的显示/隐藏效果。这是默认 fade 。一个简单的淡入/淡出效果 还有一个 幻灯片效果 不包括在该工具本身。你可以 构建你自己的。 </td> </tr> <tr> <td class="code">delay</td> <td><code>30 </code></td> <td>指定工具提示依然可见多久后鼠标叶子触发器。这是必需的,如果tootip已互动的内容和用户将需要时间去 tootip区域。通过设置0工具提示也会消失鼠标离开就从触发器元素。 </td> </tr> <tr> <td class="code">events</td> <td><code>object</code></td> <td> 一个配置对象,它指定当工具提示会显示和隐藏。您可以指定不同的事件不同类型的元素。这里有默认值为这个属性: <pre class="brush: javascript;"> events: { def: "mouseover,mouseout", input: "focus,blur", widget: "focus mouseover,blur mouseout", tooltip: "mouseover,mouseout" } </pre> <a href="https://www.2cto.com/kf/ware/java/" target="_blank" class="keylink" rel="nofollow">java</a>script 你可以更多关于这方面的内容这个 事件管理 一章。 </td> </tr> <tr> <td class="code">layout</td> <td><code>''</code></td> <td> 自从1.2.0 html布局为生成的工具提示。可以很复杂的html布局如你所愿。你可以,例如,添加一个嵌套的 <samp>跨度 </samp>元素作为箭的占位符。 </td> </tr> <tr> <td class="code">offset</td> <td><code>[0, 0]</code></td> <td> 精细地调节工具提示指定位置这个 <samp>位置属性</samp>。看到这个 定位细节 更多的信息。 </td> </tr> <tr> <td class="code">opacity</td> <td><code>1 </code></td> <td>透明的工具提示。例如,0意味着不可见, 1意味着没有透明度(完全可见)和0.4意味着40% 工具提示显示的。如果你的工具提示使用css背景图像,你可以设置透明度的形象,如果它已经保存在png24图形格式。记住,互联网 ie 6不支持原生透明的png。 </td> </tr> <tr> <td class="code">position</td> <td nowrap><code>'top center'</code></td> <td> 指定位置的工具提示。看到这个 定位细节 更多的信息。旧的格式:<samp>['top', 'center']</samp><samp> </samp>是废弃,在未来将会被移除。 </td> </tr> <tr> <td class="code">predelay </td> <td><code>0 </code></td> <td> 自从1.1.0版。 指定了延迟(在毫秒)工具提示显示之前。默认情况下有没有延迟。 </td> </tr> <tr> <td class="code">relative</td> <td><code>false</code></td> <td> 自从1.1.1。 默认情况下,工具提示位置现在决定相对于文档(通过使用这个 relative)的方法。通过启用这个产权工具提示的位置是相对确定的父元素 </td> </tr> <tr> <td class="code">tip</td> <td> </td> <td> 一个jquery选择器为一个单一的工具提示的元素。对于示例 <samp># mytip </samp>。该选项仅有效如果你要手动定义一个工具提示多个触发器同时元素。因为1.2.5 <samp>标题 </samp>属性仍然可以被用作工具提示内容。 </td> </tr> <tr> <td class="code">tipclass </td> <td><code>'tooltip'</code></td> <td> 自从1.2.0。 css类名生成的工具提示的元素。 </td> </tr> </tbody> </table> 事件 确保你已经阅读大约事件 jquery工具。所有事件监听器接收这个事件对象作为第一个参数。 <table class="jbborder"> <thead><tr> <th> 事件 </th> <th nowrap> 触发事件</th> </tr></thead> <tbody> <tr> <td class="code">onbeforeshow </td> <td> 在工具提示显示。第二个参数是工具提示要使用位置。这是一个对象的值<samp>{top: integer, left: integer}</samp><samp> </samp> </td> </tr> <tr> <td class="code">onshow</td> <td>在工具提示显示。 </td> </tr> <tr> <td class="code">onbeforehide</td> <td>在工具提示是隐藏的 </td> </tr> <tr> <td class="code">onhide </td> <td>当这个工具提示是隐藏的。 </td> </tr> </tbody> </table> 下面的示例是一个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方法: <table class="jbborder"> <thead><tr> <th> 方法 </th> <th nowrap> 返回值 </th> <th> 描述/例子 </th> </tr></thead> <tbody> <tr> <td class="code">show() </td> <td><code>api </code></td> <td>显示工具提示。 </td> </tr> <tr> <td class="code">hide() </td> <td><code>api </code></td> <td>隐藏工具提示。 </td> </tr> <tr> <td class="code">isshown(fully) </td> <td><code>布尔 </code></td> <td> 返回 <samp>真正的 </samp>如果这个工具提示是可见的。自从1.2.0 你也可以使用一个布尔型参数,保证了函数返回 <samp>真正的 </samp>只有当这个工具提示是充分的可见(在它的最终位置和不透明性)。 </td> </tr> <tr> <td class="code">gettip() </td> <td><code>jquery </code></td> <td>返回tooltip作为一个jquery对象。 </td> </tr> <tr> <td class="code">gettrigger() </td> <td><code>jquery </code></td> <td>返回元素作为一个jquery对象的触发。 </td> </tr> <tr> <td class="code">getconf() </td> <td><code>对象 </code></td> <td>返回工具提示配置。 </td> </tr> </tbody> </table> 内置的效果: fade 内置的效果“渐”有它自己的一组配置选项如下: <table class="jbborder"> <thead><tr> <th> 属性 </th> <th> 默认值 </th> <th> 描述 </th> </tr></thead> <tbody> <tr> <td class="code">fadeinspeed </td> <td class="code">400</td> <td>淡入时速度显示工具提示,以毫秒为单位。 </td> </tr> <tr> <td class="code">fadeoutspeed </td> <td class="code">200</td> <td>当工具提示的淡出速度是隐藏着的,以毫秒为单位。</td> </tr> </tbody> </table> 下面有个自定义事件的例子： 　　tab：传送门 　　tab(幻灯片)：传送门 　　tooltip：传送门 　　overlay：传送门 　　dateinput：传送门 在携程做着framework2.0，研究的却是framework4.0，当时是怎么想的t.t。 </div> <div class="info-pre-next"> 上一篇： <a href="/article/1443631.html"> Python编程Day3—基本运算符、数据类型 </a> 下一篇： <a href="/article/1443633.html"> js的数据类型 </a> </div> <div class="wz_tuijian"> 推荐阅读 <ul> <li> <a href="/article/2070762.html" target="_blank" title="jQuery探测位置的提示弹窗(toolTip box)详细解析"> <h2> jQuery探测位置的提示弹窗(toolTip box)详细解析 </h2> </a> </li> <li> <a href="/article/1990938.html" target="_blank" title="jquery.validate的使用说明介绍"> <h2> jquery.validate的使用说明介绍 </h2> </a> </li> <li> <a href="/article/1764315.html" target="_blank" title="jquery validation使用说明"> <h2> jquery validation使用说明 </h2> </a> </li> <li> <a href="/article/1718476.html" target="_blank" title="基于JQuery 选择器使用说明介绍"> <h2> 基于JQuery 选择器使用说明介绍 </h2> </a> </li> <li> <a href="/article/1604341.html" target="_blank" title="Jquery实现自定义tooltip示例代码"> <h2> Jquery实现自定义tooltip示例代码 </h2> </a> </li> <li> <a href="/article/1538550.html" target="_blank" title="jQuery-Tools-overlay 使用介绍"> <h2> jQuery-Tools-overlay 使用介绍 </h2> </a> </li> <li> <a href="/article/1473608.html" target="_blank" title="Jquery上传插件 uploadify v3.1使用说明"> <h2> Jquery上传插件 uploadify v3.1使用说明 </h2> </a> </li> <li> <a href="/article/1443632.html" target="_blank" title="jQuery Tools tooltip使用说明"> <h2> jQuery Tools tooltip使用说明 </h2> </a> </li> <li> <a href="/article/1390373.html" target="_blank" title="jQuery Tools tab使用介绍"> <h2> jQuery Tools tab使用介绍 </h2> </a> </li> <li> <a href="/article/1382745.html" target="_blank" title="jquery+CSS创建自定义的a标签title提示tooltip示例"> <h2> jquery+CSS创建自定义的a标签title提示tooltip示例 </h2> </a> </li> </ul> </div> </article> </div> </main> <footer><div class="box"><div class="ft_nav"><div class="ft_about">关于网站<ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </div></div></div></footer> </body> </html>