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 相关文章推荐
js判断变量是否空值的代码
Oct 26 Javascript
JavaScript Konami Code 实现代码
Jul 29 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
javascript基础之查找元素的详细介绍(访问节点)
Jul 05 Javascript
JavaScript实现16进制颜色值转RGB的方法
Feb 09 Javascript
jQuery+AJAX实现网页无刷新上传
Feb 22 Javascript
利用PM2部署node.js项目的方法教程
May 10 Javascript
vue 组件的封装之基于axios的ajax请求方法
Aug 11 Javascript
Vue组件之高德地图地址选择功能的实例代码
Jun 21 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
JS函数本身的作用域实例分析
Mar 16 Javascript
JavaScript实现简单计算器
Mar 19 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
php正则提取html图片(img)src地址与任意属性的方法
2017/02/08 PHP
php file_get_contents取文件中数组元素的方法
2017/04/01 PHP
ThinkPHP5与单元测试PHPUnit使用详解
2020/02/23 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
lyhucSelect基于Jquery的Select数据联动插件
2011/03/29 Javascript
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
Express作者TJ告别Node.js奔向Go
2014/07/14 Javascript
JavaScript使用FileSystemObject对象写入文本文件内容的方法
2015/08/05 Javascript
浅谈jQuery 选择器和dom操作
2016/06/07 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
微信小程序-获得用户输入内容
2017/02/13 Javascript
jQuery表单设置值的方法
2017/06/30 jQuery
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
Vue2 配置 Axios api 接口调用文件的方法
2017/11/13 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
javascript设计模式 ? 迭代器模式原理与用法实例分析
2020/04/17 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
一则python3的简单爬虫代码
2014/05/26 Python
python GUI库图形界面开发之PyQt5切换按钮控件QPushButton详细使用方法与实例
2020/02/28 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Django 多对多字段的更新和插入数据实例
2020/03/31 Python
Sport-Thieme荷兰:购买体育用品
2019/08/25 全球购物
How to spawning asynchronous work in J2EE
2016/08/29 面试题
工程班组长岗位职责
2013/12/30 职场文书
办公室文员工作职责
2014/01/31 职场文书
运动会入场词50字
2014/02/20 职场文书
我的小天地教学反思
2014/04/30 职场文书
绘画专业自荐信
2014/07/04 职场文书
身边的榜样活动方案
2014/08/20 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
财务审计整改报告
2014/11/06 职场文书
Pytorch中的数据集划分&正则化方法
2021/05/27 Python
SpringBoot实现quartz定时任务可视化管理功能
2021/08/30 Java/Android