Mootools 1.2教程 Tooltips


Posted in Javascript onSeptember 15, 2009

我们还将仔细学习一下工具提示的选项和事件,还有一些用来从元素上添加和移除工具提示的工具。最后,我们将学习一下怎么让一个页面有多个不同样式的工具提示。
基础知识
创建一个新的工具提示
创建一个新的工具提示非常简单。首先,我们来创建一个要添加工具提示的链接:
参考代码:

<a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" href="http://www.consideropen.com">Tool tip 1</a>

MooTools 1.2工具提示将默认显示链接中的title和rel属性的值。如果没有rel属性,将显示href属性值。
现在来创建一个新的默认工具条提示:
参考代码:
var customTips = $$('.tooltipA'); 
var toolTips = new Tips(customTips);

由于没有使用任何样式,你将看到下面这样的工具提示:
Tool tip 1
为你的工具提示使用样式
MooTools可以让你在很大程度上控制它的输出——我们来看一下工具提示的html代码:
参考代码:
// 你可以在options中指定 
// 工具提示容器的CSS类名 
<div class="options.className"> 
<div class="tip"></div> 
</div>

留意一下顶部和底部的div,你可以通过它们来轻松地在顶部和底部添加圆角,或者其他样式效果。
现在,让我们来创建一个我们的第一个选项并添加一些CSS。上面的html代码将用名为“options.className”的CSS样式来渲染。通过给我们的工具提示来指定一个CSS类名,我们就可以给它一个独立的样式而不会影响页面上的其他MooTools工具提示。
参考代码:
var customTipsB = $$('.tooltipB'); 
var toolTipsB = new Tips(customTipsB, { 
className: 'custom_tip' 
});

最后,我们再添加一些CSS:
参考代码:
.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 
}

Tool tip 2
选项
在Tips类中总共只有五个选项,每个都有很好的自解释性(也就是一看就明白什么意思了)。
showDelay
默认值为100
一个以毫秒为单位的整数,这将决定工具提示在鼠标移动到元素上面多久后再显示出来。
hideDelay
默认值为100
和上面的showDelay一样,不过这个值(也是以毫秒为单位)将决定当鼠标离开元素多久以后隐藏工具提示。
className
默认为null
就像你在上面的示例中看到的一样,这可以让你为工具提示容器设置一个CSS类名。
offsets
默认为 x:16, y:16
这将决定工具提示离你的元素的距离,x值为离元素往右的距离,y为离元素往下的距离(如果指定了fixed选项为false,将是相对于鼠标指针的距离,否则将是相对于元素的距离)。
fixed
默认为false
这个设置决定了当你的鼠标在元素上面移动时,这个工具提示是否跟随鼠标。如果设置为true,工具提示将不随鼠标指针的移动而移动,而只是停留在元素的附近固定的位置。
事件
和这个类的其他东西一样,工具提示的事件仍然非常简单。它有两个事件:onShow和onHide,它们将会像你期待的那样工作。
onShow
这个事件将在工具条显示的时候触发。如果你设置了延时,这个事件将在直到工具提示显示出来时触发。
onHide
和上面的onShow事件一样,相对地,它是在工具提示隐藏时触发。如果设置了延时,这个事件也将在直到工具提示隐藏起来时触发。
方法
Tips类有两个方法——attach和dettach,通过这两个方法,你可以给一个指定的元素添加一个工具提示(当然了,这些工具提示会有相同的设置),或者从一个特定的元素上移除工具提示。
.attach();
要给一个新的元素添加一个工具提示,你只需要在Tip对象的后面加上.attach();,最后再把这个元素的选择器放在括号里面。
参考代码:
toolTips.attach('#tooltipID3');

.dettach();
这个方法和.attach方法一样,不过它们的行为完全相反。首先,写下Tip对象,然后在这个元素的后面添加上.dettach();,最后把这个元素的选择器放在括号里面。
参考代码:
toolTips.dettach('#tooltipID3');

代码示例
在这个示例中,我们将创建两个不同的Tip插件实例,这样我们就可以有两个不同样式的工具提示。我们还将集成我们上面看到的选项、事件和方法。
参考代码:
var customTips = $$('.tooltip'); 
var toolTips = new Tips(customTips, { 
// 这将设置工具提示显示的延迟时间 
showDelay: 1000, // 默认是100 
// 这将设置工具提示隐藏的延迟事件 
hideDelay: 100, // 默认是100 
// 这将给工具提示的容器div添加一个CSS样式 
// 这样就可以在一个页面上 
// 有两个不同样式的工具条提示 
className: 'anything', // 默认是null 
// 这将设置x和y的偏移值 
offsets: { 
'x': 100, // 默认是16 
'y': 16 // 默认16 
}, 
// 这将设置工具提示是否跟随鼠标 
// 设为true将不会跟随鼠标 
fixed: false, // 默认是false 
// 如果你在选项之外调用这个函数 
// 并把这个函数留在这里 
// 它就闪一下,并有一个平滑的渐变效果 
onShow: function(toolTipElement){ 
// 传递进来tooltip对象 
// 你可以让它们渐变到完全不透明 
// 或者让它们有一点点透明 
toolTipElement.fade(.8); 
$('show').highlight('#FFF504'); 
}, 
onHide: function(toolTipElement){ 
toolTipElement.fade(0); 
$('hide').highlight('#FFF504'); 
} 
}); 
var toolTipsTwo = new Tips('.tooltip2', { 
className: 'something_else', // 默认是null 
}); 
// 你可以用.store();方法来改变rel的值 
// 从而改变工具提示的值 
// 你可以使用下面的代码 
$('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');

Tool tip 1

Tool tip is detached

Tool tip 3

Tool tip detached then attached again.

A differently styled tool tip

更多学习

通读一遍MooTools文档中的Tips这一节。另外,这里还有David Walsh写的一篇很不错的关于定制Mootools Tips的文章。

下载一个包含你所需要的全部东西的zip压缩包

Javascript 相关文章推荐
jquery 模式对话框终极版实现代码
Sep 28 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
JavaScript的jQuery库中function的存在和参数问题
Aug 13 Javascript
JavaScript实现页面跳转的方式汇总
May 16 Javascript
jQuery内容过滤选择器用法示例
Sep 09 Javascript
jQuery删除当前节点元素
Dec 07 Javascript
基于dataset的使用和图片延时加载的实现方法
Dec 11 Javascript
Vue组件内部实现一个双向数据绑定的实例代码
Apr 04 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
May 15 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue实现input宽度随文字长度自适应操作
Jul 29 Javascript
关于IDEA中的.VUE文件报错 Export declarations are not supported by current JavaScript version
Oct 17 Javascript
Mootools 1.2教程 类(一)
Sep 15 #Javascript
Mootools 1.2 手风琴(Accordion)教程
Sep 15 #Javascript
Mootools 1.2教程 排序类和方法简介
Sep 15 #Javascript
Mootools 1.2教程 滚动条(Slider)
Sep 15 #Javascript
Mootools 1.2教程 定时器和哈希简介
Sep 15 #Javascript
Mootools 1.2教程 正则表达式
Sep 15 #Javascript
MooTools 1.2中的Drag.Move来实现拖放
Sep 15 #Javascript
You might like
漂亮但不安全的CTB
2006/10/09 PHP
利用PHP动态生成VRML网页
2006/10/09 PHP
PHP实现检测客户端是否使用代理服务器及其匿名级别
2015/01/07 PHP
浅谈php(codeigniter)安全性注意事项
2017/04/06 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
最常用的12种设计模式小结
2011/08/09 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
2011/12/08 Javascript
把input初始值不写value的具体实现方法
2013/07/04 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
理解JavaScript表单的基础知识
2016/01/25 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
浅谈MVC+EF easyui dataGrid 动态加载分页表格
2016/11/10 Javascript
vuex state及mapState的基础用法详解
2018/04/19 Javascript
JQuery搜索框自动补全(模糊匹配)功能实现示例
2019/01/08 jQuery
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
vue+elementUI 复杂表单的验证、数据提交方案问题
2019/06/24 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
[01:15:56]2018DOTA2亚洲邀请赛3月30日 小组赛A组 TNC VS Newbee
2018/03/31 DOTA
centos系统升级python 2.7.3
2014/07/03 Python
使用Python编写基于DHT协议的BT资源爬虫
2016/03/19 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
python Pillow图像处理方法汇总
2019/10/16 Python
django实现HttpResponse返回json数据为中文
2020/03/27 Python
卸载tensorflow-cpu重装tensorflow-gpu操作
2020/06/23 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
使用Python提取文本中含有特定字符串的方法示例
2020/12/09 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
家庭睡衣和家庭用品:Little Blue House
2018/03/18 全球购物
医学生实习自荐信
2013/10/01 职场文书
2014年村官工作总结
2014/11/24 职场文书
2016中秋节晚会开场白
2015/11/26 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL
Python机器学习之决策树和随机森林
2021/07/15 Javascript