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 相关文章推荐
javascript 中__proto__和prototype详解
Nov 25 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
Aug 10 Javascript
javascript新闻跑马灯实例代码
Jul 29 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
Mongoose学习全面理解(推荐)
Jan 21 Javascript
jquery easyui DataGrid简单示例
Jan 23 Javascript
vue.js获取数据库数据实例代码
May 26 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
Sep 12 Javascript
在layui.use 中自定义 function 的正确方法
Sep 16 Javascript
jquery弹窗时禁止body滚动条滚动的例子
Sep 21 jQuery
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
前端监听websocket消息并实时弹出(实例代码)
Nov 27 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
PHILIPS L4X25T电路分析和打理
2021/03/02 无线电
打造计数器DIY三步曲(上)
2006/10/09 PHP
解析PHP汉字转换拼音的类
2013/06/18 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
setTimeout和setInterval的浏览器兼容性分析
2007/02/27 Javascript
关于onchange事件在IE和FF下的表现及解决方法
2014/03/08 Javascript
JavaScript遍历table表格中的某行某列并打印其值
2014/07/08 Javascript
JS解析XML实例分析
2015/01/30 Javascript
jQuery实现验证年龄简单思路
2016/02/24 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
JS重载实现方法分析
2016/12/16 Javascript
nodejs基础知识
2017/02/03 NodeJs
js eval函数使用,js对象和字符串互转实例
2017/03/06 Javascript
jQuery中Chosen三级联动功能实例代码
2017/03/07 Javascript
获取url中用&amp;隔开的参数实例(分享)
2017/05/28 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
vue中的自定义分页插件组件的示例
2018/08/18 Javascript
vue项目中axios请求网络接口封装的示例代码
2018/12/18 Javascript
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Python编写检测数据库SA用户的方法
2014/07/11 Python
python实现的守护进程(Daemon)用法实例
2015/06/02 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Django外键(ForeignKey)操作以及related_name的作用详解
2019/07/29 Python
python使用python-pptx删除ppt某页实例
2020/02/14 Python
Pytorch转tflite方式
2020/05/25 Python
戴森台湾线上商城:Dyson Taiwan
2018/05/21 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
教你怎样写好自我评价
2013/10/05 职场文书
个人校本研修方案
2014/05/26 职场文书
体育课外活动总结
2014/07/08 职场文书
2014年实验室工作总结
2014/12/03 职场文书
企业廉洁教育心得体会
2016/01/20 职场文书
微信小程序基础教程之echart的使用
2021/06/01 Javascript
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏