位置：首页>> 网络编程>> JavaScript>> Mootools 1.2教程(19)——Tooltips

Mootools 1.2教程(19)——Tooltips

作者：Fdream　来源：Fdream博客　发布时间：2008-12-25 13:26:00　

标签：Mootools,Tooltip,插件,提示,javascript

原文地址：30 Days of Mootools 1.2 Tutorials - Day 19 - Tooltips

Mootools 1.2工具提示（tooltip）教程

今天我们将来看一下MooTools绑定的Tooltip插件。通过“提示（Tips）”，你可以轻松地自定义一个包含一个标题和内容的工具提示，可以自定义样式，自定义淡入淡出渐变效果。我们还将仔细学习一下工具提示的选项和事件，还有一些用来从元素上添加和移除工具提示的工具。最后，我们将学习一下怎么让一个页面有多个不同样式的工具提示。

基础知识

创建一个新的工具提示

创建一个新的工具提示非常简单。首先，我们来创建一个要添加工具提示的链接：

参考代码：

<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，你可以通过它们来轻松地在顶部和底部添加圆角，或者其他样式效果。

现在，让我们来创建一个我们的第一个选项并添加一些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
}

2 3 下一页

投稿

Mootools 1.2教程(19)——Tooltips

Mootools 1.2工具提示（tooltip）教程

基础知识

创建一个新的工具提示

为你的工具提示使用样式

猜你喜欢