开发手册 欢迎您!
软件开发者资料库

MooTools - 工具提示

MooTools工具提示 - 从简介,安装,程序结构,选择器,使用数组,函数,事件处理,DOM操作,样式属性,输入过滤,拖放,正则表达式,期刊,滑块,可排序,手风琴,工具提示开始学习MooTools选项卡式内容,类,Fx.Element,Fx.Slide,Fx.Tween,Fx.Morph,Fx.Options,Fx.Events。

MooTools提供了不同的工具提示来设计自定义样式和效果.在本章中,我们将学习工具提示的各种选项和事件,以及一些可以帮助您添加或删除元素工具提示的工具.

创建新的工具提示

创建工具提示非常简单.首先,我们必须创建我们将附加工具提示的元素.让我们举一个创建锚标记的示例,并将其添加到构造函数中的Tips类.看看下面的代码.

Tool tip _demo

查看用于创建工具提示的代码.

var customTips = $$('.tooltip_demo');var toolTips = new Tips(customTips);

示例

以下示例说明了工具提示的基本概念.请看下面的代码.

                                    window.addEvent('domready', function() {            var customTips = $$('.tooltip_demo');            var toolTips = new Tips(customTips);         });                     Tool tip _demo      

Tooltip Options

提示中只有五个选项,它们都是不言自明的。

showDelay

一个以毫秒为单位的整数,它将确定用户将鼠标移到元素上时工具提示显示之前的延迟。 默认设置为100。

hideDelay

就像上面的showDelay一样,该整数(也以毫秒为单位)确定了一旦用户离开元素,在隐藏笔尖之前要等待多长时间。 默认设置为100。

className

这使您可以设置工具提示包装的类名称。 默认设置为Null。

Offset

这确定了工具提示将与元素相距多远。 " x"是指右偏移,其中" y"是向下偏移(如果" fixed"选项设置为false,则两者都是相对于光标的偏移,否则,偏移是相对于原始元素的)。 默认值为x:16,y:16

Fixed

设置在元素周围移动时工具提示是否跟随鼠标。 如果将其设置为true,则当您移动光标时工具提示将不会移动,但相对于原始元素将保持固定。 默认设置为false。

Tooltip Events

工具提示事件仍然很简单,就像本课程的其余部分一样。 有两个事件-onShow和onHide,它们按您期望的那样工作。

onShow()

出现工具提示时执行此事件。 如果设置了延迟,则直到延迟结束,此事件才会执行。

onHide()

执行此事件时,工具提示将隐藏。 如果存在延迟,则直到延迟结束,此事件才会执行。

Tooltip Methods

工具提示有两种方法-附加和分离。 这样,您就可以将特定元素作为目标并将其添加到工具提示对象中(从而使该类实例具有固有的所有设置)或分离特定元素。

attach()

要将新元素附加到工具提示对象,只需在.attach();上声明提示对象,大头钉,最后将元素选择器放在方括号()中。

Syntax

toolTips.attach('#tooltipID3');

dettach()

此方法的工作方式与.attach方法相同,但结果完全相反。 首先,声明技巧对象,然后添加.dettach(),最后将元素选择器放置在()中。

Syntax

toolTips.dettach('#tooltipID3');

Example

让我们以说明工具提示的示例为例。 看一下下面的代码。

                                                   window.addEvent('domready', function() {            var customTips = $$('.tooltip_demo');                        var toolTips = new Tips(customTips, {               showDelay: 1000,    //default is 100               hideDelay: 100,     //default is 100               className: 'custom_tip', //default is null                              offsets: {                  'x': 100,       //default is 16                  'y': 16         //default is 16               },                              fixed: false,      //default is false               onShow: function(toolTipElement){                  toolTipElement.fade(.8);                  $('show').highlight('#FFF504');               },                              onHide: function(toolTipElement){                  toolTipElement.fade(0);                  $('hide').highlight('#FFF504');               }            });                        var toolTipsTwo = new Tips('.tooltip2', {               className: 'something_else', //default is null            });            $('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

            
nPgpT" })