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点击tr实现checkbox选中的方法
Mar 19 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
Sep 26 Javascript
JQuery处理json与ajax返回JSON实例代码
Jan 03 Javascript
轻量级网页遮罩层jQuery插件用法实例
Jul 31 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
May 24 Javascript
Vue2.0基于vue-cli+webpack Vuex的用法(实例讲解)
Sep 15 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
Vue 组件传值几种常用方法【总结】
May 28 Javascript
vue.js 实现评价五角星组件的实例代码
Aug 13 Javascript
使用Vuex解决Vue中的身份验证问题
Sep 28 Javascript
vue cli使用融云实现聊天功能的实例代码
Apr 19 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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
自己动手做一个SQL解释器
2006/10/09 PHP
php获取本地图片文件并生成xml文件输出具体思路
2013/04/27 PHP
codeigniter中测试通过的分页类示例
2014/04/17 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
PHP实现删除字符串中任何字符的函数
2015/08/11 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
jQuery html()等方法介绍
2009/11/18 Javascript
40款非常棒的jQuery 插件和制作教程(系列二)
2011/11/02 Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
2012/09/14 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
jQuery插件bxSlider实现响应式焦点图
2015/04/12 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
jQuery多文件异步上传带进度条实例代码
2016/08/16 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
vuejs绑定class和style样式
2017/04/11 Javascript
jquery实现用户登陆界面(示例讲解)
2017/09/06 jQuery
JavaScript 中使用 Generator的方法
2017/12/29 Javascript
详解nodeJs文件系统(fs)与流(stream)
2018/01/24 NodeJs
javascript实现随机抽奖功能
2020/12/30 Javascript
在Django的URLconf中使用命名组的方法
2015/07/18 Python
windows下pycharm安装、创建文件、配置默认模板
2018/07/31 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
基于python的ini配置文件操作工具类
2019/04/24 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python实现键盘输入的实操方法
2019/07/16 Python
python程序 线程队列queue使用方法解析
2019/09/23 Python
HTML5离线缓存Manifest是什么
2016/03/09 HTML / CSS
老总助理工作岗位职责
2014/02/06 职场文书
小班秋游活动方案
2014/02/22 职场文书
党员年终个人总结
2015/02/14 职场文书
2015年党员创先争优公开承诺书
2015/04/27 职场文书
学习商务礼仪心得体会
2016/01/22 职场文书
创业计划书之餐饮
2019/09/02 职场文书
基于docker安装zabbix的详细教程
2022/06/05 Servers
css如何把元素固定在容器底部的四种方式
2022/06/16 HTML / CSS