vue引入id3_MooTools工具提示

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

创建一个新的工具提示

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

rel = "here is the default "text" for toll tip demo"

href = "http://www.vue5.com">Tool tip _demo

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

var customTips = $$(".tooltip_demo");

var toolTips = new Tips(customTips);

例

以下示例说明了工具提示的基本思想。看看下面的代码。

window.addEvent("domready",function(){varcustomTips=$$(".tooltip_demo");vartoolTips=newTips(customTips);});Tool tip _demo

您将收到以下输出 -

输出

工具提示选项

提示中只有五个选项，它们都非常不言自明。

showDelay

一个以毫秒为单位的整数，这将确定工具提示之后的延迟，一旦用户将鼠标放在元素上。默认设置为100。

hideDelay

就像上面的showDelay一样，这个整数(也以毫秒为单位)以确定在用户离开元素之后隐藏提示需要等待多久。默认设置为100。

Class名称

这允许您为工具提示包装设置类名称。默认设置为Null。

抵消

这决定了工具提示出现的元素有多远。"x"是指右偏移，其中"y"是向下偏移(相对于游标IF""fixed"选项设置为false，否则偏移量相对于原始元素)。默认值为x：16，y：16

固定

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

工具提示事件

工具提示事件保持简单，就像这个类的其余部分一样。有两个事件 - onShow和onHide，他们按照你的期望工作。

展出()

当出现工具提示时，会执行此事件。如果设置延迟，则在延迟时间之前，该事件将不会执行。

onHide()

该工具提示隐藏执行此事件。如果有延迟，这个事件将不会执行，直到延迟。

工具提示方法

工具提示有两种方法 - 附加和分离。这允许您定位特定元素并将其添加到工具提示对象(从而固定该类实例中的所有设置)或分离特定元素。

连接()

要将一个新的元素附加到工具提示对象上，只需在.attach())上指定提示对象，然后将元素选择器放在括号()中。

用法

toolTips.attach("#tooltipID3");

dettach()

该方法的工作方式与.attach方法一样，但结果完全相反。首先，说明提示对象，然后添加.dettach()，最后将元素选择器放在()中。

用法

toolTips.dettach("#tooltipID3");

例

让我们举一个解释工具提示的例子。看看下面的代码。

window.addEvent("domready",function(){varcustomTips=$$(".tooltip_demo");vartoolTips=newTips(customTips,{showDelay:1000,//default is 100hideDelay:100,//default is 100className:"custom_tip",//default is nulloffsets:{"x":100,//default is 16"y":16//default is 16},fixed:false,//default is falseonShow:function(toolTipElement){toolTipElement.fade(.8);$("show").highlight("#FFF504");},onHide:function(toolTipElement){toolTipElement.fade(0);$("hide").highlight("#FFF504");}});vartoolTipsTwo=newTips(".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