Mootools 1.2教程 Tooltips
人气:0
我们还将仔细学习一下工具提示的选项和事件，还有一些用来从元素上添加和移除工具提示的工具。最后，我们将学习一下怎么让一个页面有多个不同样式的工具提示。
基础知识
创建一个新的工具提示
创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接：
参考代码：
<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');
基础知识
创建一个新的工具提示
创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接：
参考代码：
复制代码 代码如下:
<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 detached then attached again.
更多学习
通读一遍MooTools文档中的Tips这一节。另外，这里还有David Walsh写的一篇很不错的关于定制Mootools Tips的文章。
加载全部内容