
- MooTools 教程
- MooTools - 首页
- MooTools - 简介
- MooTools - 安装
- MooTools - 程序结构
- MooTools - 选择器
- MooTools - 使用数组
- MooTools - 函数
- MooTools - 事件处理
- MooTools - DOM 操作
- MooTools - 样式属性
- MooTools - 输入过滤
- MooTools - 拖放
- MooTools - 正则表达式
- MooTools - 定期执行
- MooTools - 滑块
- MooTools - 可排序列表
- MooTools - 手风琴
- MooTools - 工具提示
- MooTools - 标签式内容
- MooTools - 类
- MooTools - Fx.Element
- MooTools - Fx.Slide
- MooTools - Fx.Tween
- MooTools - Fx.Morph
- MooTools - Fx.Options
- MooTools - Fx.Events
- MooTools 有用资源
- MooTools - 快速指南
- MooTools - 有用资源
- MooTools - 讨论
MooTools - 工具提示
MooTools 提供不同的工具提示来设计自定义样式和效果。本章我们将学习工具提示的各种选项和事件,以及一些帮助您向元素添加或删除工具提示的工具。
创建新的工具提示
创建工具提示非常简单。首先,我们必须创建我们将附加工具提示的元素。让我们来看一个创建锚标记并将其添加到构造函数中 Tips 类的示例。请看下面的代码。
<a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" rel = "here is the default 'text' for toll tip demo" href = "https://tutorialspoint.com">Tool tip _demo</a>
请查看用于创建工具提示的代码。
var customTips = $$('.tooltip_demo'); var toolTips = new Tips(customTips);
示例
以下示例解释了工具提示的基本思想。请看下面的代码。
<!DOCTYPE html> <html> <head> <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script> <script type = "text/javascript"> window.addEvent('domready', function() { var customTips = $$('.tooltip_demo'); var toolTips = new Tips(customTips); }); </script> </head> <body> <a id = "tooltipID" class = "tooltip_demo" title = "1st Tooltip Title" rel = "here is the default 'text' for toll tip demo" href = "https://tutorialspoint.com">Tool tip _demo</a> </body> </html>
您将收到以下输出:
输出
工具提示选项
Tips 中只有五个选项,而且它们都非常不言自明。
showDelay
以毫秒为单位的整数,这将决定用户将鼠标移到元素上后显示工具提示之前的延迟。默认设置为 100。
hideDelay
与上面的 showDelay 一样,这个整数(也以毫秒为单位)决定了用户离开元素后等待多长时间才能隐藏提示。默认设置为 100。
className
这允许您为工具提示包装器设置一个类名。默认设置为 Null。
Offset
这决定了工具提示与元素的距离。“x”指的是右侧偏移量,“y”指的是向下偏移量(如果“fixed”选项设置为 false,则相对于光标,否则偏移量相对于原始元素)。默认为 x: 16, y: 16
Fixed
这设置了如果您在元素周围移动鼠标,工具提示是否会跟随您的鼠标。如果您将其设置为 true,则当您移动光标时,工具提示不会移动,但会相对于原始元素保持固定。默认设置为 false。
工具提示事件
与该类的其余部分一样,工具提示事件仍然很简单。有两个事件——onShow 和 onHide,它们的工作方式与您预期的一样。
onShow()
当工具提示出现时,此事件将执行。如果您设置了延迟,则此事件只有在延迟结束后才会执行。
onHide()
工具提示在此事件执行时隐藏。如果有延迟,则此事件只有在延迟结束后才会执行。
工具提示方法
工具提示有两种方法——attach 和 detach。这允许您定位特定元素并将其添加到工具提示对象(从而继承该类实例中的所有设置)或分离特定元素。
attach()
要将新元素附加到工具提示对象,只需声明提示对象,然后添加 .attach();,最后将元素选择器放在括号 () 中。
语法
toolTips.attach('#tooltipID3');
dettach()
此方法的工作方式与 .attach 方法相同,但结果完全相反。首先,声明提示对象,然后添加 .dettach(),最后将您的元素选择器放在 () 中。
语法
toolTips.dettach('#tooltipID3');
示例
让我们来看一个解释工具提示的示例。请看下面的代码。
<!DOCTYPE html> <html> <head> <style> .custom_tip .tip { background-color: #333; padding: 5px; } .custom_tip .tip-title { color: #fff; background-color: #666; font-size: 20px; padding: 5px; } .custom_tip .tip-text { color: #fff; padding: 5px; } </style> <script type = "text/javascript" src = "MooTools-Core-1.6.0.js"></script> <script type = "text/javascript" src = "MooTools-More-1.6.0.js"></script> <script type = "text/javascript"> window.addEvent('domready', function() { var customTips = $$('.tooltip_demo'); var toolTips = new Tips(customTips, { showDelay: 1000, //default is 100 hideDelay: 100, //default is 100 className: 'custom_tip', //default is null offsets: { 'x': 100, //default is 16 'y': 16 //default is 16 }, fixed: false, //default is false onShow: function(toolTipElement){ toolTipElement.fade(.8); $('show').highlight('#FFF504'); }, onHide: function(toolTipElement){ toolTipElement.fade(0); $('hide').highlight('#FFF504'); } }); var toolTipsTwo = new Tips('.tooltip2', { className: 'something_else', //default is null }); $('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.'); $('tooltipID1').store('tip:title', 'Here is a new title.'); $('tooltipID1').set('rel', 'This will not change the tooltips text'); $('tooltipID1').set('title', 'This will not change the tooltips title'); toolTips.detach('#tooltipID2'); toolTips.detach('#tooltipID4'); toolTips.attach('#tooltipID4'); }); </script> </head> <body> <div id = "show" class = "ind">onShow</div> <div id = "hide" class = "ind">onHide</div> <p><a id = "tooltipID1" class = "tooltip_demo" title = "1st Tooltip Title" rel = "here is the default 'text' of 1" href = "https://tutorialspoint.com">Tool tip 1</a></p> <p><a id = "tooltipID2" class = "tooltip_demo" title = "2nd Tooltip Title" rel = "here is the default 'text' of 2" href = "https://tutorialspoint.com">Tool tip is detached</a></p> <p><a id = "tooltipID3" class = "tooltip_demo_2" title = "3rd Tooltip Title" rel = "here is the default 'text' of 3" href = "https://tutorialspoint.com">Tool tip 3</a></p> <p><a id = "tooltipID4" class = "tooltip_demo_2" title = "4th Tooltip Title" rel = "here is the default 'text' of 4, i was detached then attached" href = "https://tutorialspoint.com">Tool tip detached then attached again. </a></p> <p><a id = "tooltipID5" class = "tooltip2" title = "Other Tooltip Title" rel = "here is the default 'text' of 'other style'" href = "https://tutorialspoint.com/">A differently styled tool tip</a></p> </body> </html>
您将收到以下输出:
输出