Mootools 1.2教程(19)——Tooltips

原文地址:30 Days of Mootools 1.2 Tutorials – Day 19 – Tooltips

Mootools 1.2工具提示(tooltip)教程

请尊重个人劳动,转载请注明出处:http://fdream.net,译者:Fdream

如果你还没有准备好开始这一讲,请参考这一系列的教程,这里是《MooTools 1.2系列教程目录》

今天我们将来看一下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>

留意一下顶部和底部的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');

onShow
onHide

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压缩包

 

5 comments on “Mootools 1.2教程(19)——Tooltips”

  1. 麻烦站长帮我看一下 为什么我的这段代码 提示部分 只出现一次 然后就不出现了

    var biaoti_t=$$('.toggler');
    var neirong_t=$$('.element');

    var myAccordion=new Accordion(biaoti_t,neirong_t,{
    opacity:true,
    fixedHeight:100,
    onActive:function(toggler,element){
    toggler.setStyle('color', '#41464D');
    },
    onBackground:function(toggler,element){
    toggler.setStyle('color', '#528CE0');
    }
    })
    });

    标题1

    核心提示:据央视天气预报今晨说,中央气象台今日未再发布寒潮警报。中央气象台今日早上发布的未来三天天气趋势预报说,明日,此次强冷空气对中国的影响将基本结束,北方大部地区的气温将逐渐回升。

    标题2

    中央气象台今日发布的未来三天天气趋势预报说,受强冷空气东移南下影响,今天白天到夜间,内蒙古中东部、华北、东北地区、黄淮东部、江淮东部、江南东北部等地将有4~6级偏北风,江南中南部、华南北部等地将有4级左右偏北风;江南中南部、华南以及西南地区东部等地的气温将下降4~6℃,局部地区降温可达6℃以上;渤海、黄海、东海将有7~8级、阵风9级的西北风,台湾海峡、台湾以东洋面和以南海域、南海大部海域将有8~9级、阵风10~11级的东北风,北部湾将有7~8级、阵风9级的东北风。

    标题3

    25日起,受南支波动东移影响,青藏高原东部、西南地区、江南、华南等地将出现一次弱降水天气过程。未来三天,贵州中南部的部分地区有冻雨。

  2. className: ‘something_else’,
    逗号的存在让这个例子在IE浏览器里面无法实现。删除就可以了。

发表评论

您的电子邮箱地址不会被公开。

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据