快捷導(dǎo)航

Mootools 1.2教程 Tooltips

更新時間：2009年09月15日 22:32:37 作者：

今天我們將來看一下MooTools綁定的Tooltip插件。通過“提示（Tips）”，你可以輕松地自定義一個包含一個標(biāo)題和內(nèi)容的工具提示，可以自定義樣式，自定義淡入淡出漸變效果。

我們還將仔細(xì)學(xué)習(xí)一下工具提示的選項和事件，還有一些用來從元素上添加和移除工具提示的工具。最后，我們將學(xué)習(xí)一下怎么讓一個頁面有多個不同樣式的工具提示。
基礎(chǔ)知識
創(chuàng)建一個新的工具提示
創(chuàng)建一個新的工具提示非常簡單。首先，我們來創(chuàng)建一個要添加工具提示的鏈接：
參考代碼：

復(fù)制代碼代碼如下:

 
<a class="tooltipA" title="1st Tooltip Title" rel="here is the default 'text' of 1" >Tool tip 1</a> 

MooTools 1.2工具提示將默認(rèn)顯示鏈接中的title和rel屬性的值。如果沒有rel屬性，將顯示href屬性值。
現(xiàn)在來創(chuàng)建一個新的默認(rèn)工具條提示：
參考代碼：

復(fù)制代碼代碼如下:

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

由于沒有使用任何樣式，你將看到下面這樣的工具提示：
Tool tip 1
為你的工具提示使用樣式
MooTools可以讓你在很大程度上控制它的輸出——我們來看一下工具提示的html代碼：
參考代碼：

復(fù)制代碼代碼如下:

 
// 你可以在options中指定 
// 工具提示容器的CSS類名 
<div class="options.className"> 
<div class="tip"></div> 
</div> 

留意一下頂部和底部的div，你可以通過它們來輕松地在頂部和底部添加圓角，或者其他樣式效果。
現(xiàn)在，讓我們來創(chuàng)建一個我們的第一個選項并添加一些CSS。上面的html代碼將用名為“options.className”的CSS樣式來渲染。通過給我們的工具提示來指定一個CSS類名，我們就可以給它一個獨(dú)立的樣式而不會影響頁面上的其他MooTools工具提示。
參考代碼：

復(fù)制代碼代碼如下:

 
var customTipsB = $$('.tooltipB'); 
var toolTipsB = new Tips(customTipsB, { 
className: 'custom_tip' 
}); 

最后，我們再添加一些CSS：
參考代碼：

復(fù)制代碼代碼如下:

 
.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
默認(rèn)值為100
一個以毫秒為單位的整數(shù)，這將決定工具提示在鼠標(biāo)移動到元素上面多久后再顯示出來。
hideDelay
默認(rèn)值為100
和上面的showDelay一樣，不過這個值（也是以毫秒為單位）將決定當(dāng)鼠標(biāo)離開元素多久以后隱藏工具提示。
className
默認(rèn)為null
就像你在上面的示例中看到的一樣，這可以讓你為工具提示容器設(shè)置一個CSS類名。
offsets
默認(rèn)為 x:16, y:16
這將決定工具提示離你的元素的距離，x值為離元素往右的距離，y為離元素往下的距離（如果指定了fixed選項為false，將是相對于鼠標(biāo)指針的距離，否則將是相對于元素的距離）。
fixed
默認(rèn)為false
這個設(shè)置決定了當(dāng)你的鼠標(biāo)在元素上面移動時，這個工具提示是否跟隨鼠標(biāo)。如果設(shè)置為true，工具提示將不隨鼠標(biāo)指針的移動而移動，而只是停留在元素的附近固定的位置。
事件
和這個類的其他東西一樣，工具提示的事件仍然非常簡單。它有兩個事件：onShow和onHide，它們將會像你期待的那樣工作。
onShow
這個事件將在工具條顯示的時候觸發(fā)。如果你設(shè)置了延時，這個事件將在直到工具提示顯示出來時觸發(fā)。
onHide
和上面的onShow事件一樣，相對地，它是在工具提示隱藏時觸發(fā)。如果設(shè)置了延時，這個事件也將在直到工具提示隱藏起來時觸發(fā)。
方法
Tips類有兩個方法——attach和dettach，通過這兩個方法，你可以給一個指定的元素添加一個工具提示（當(dāng)然了，這些工具提示會有相同的設(shè)置），或者從一個特定的元素上移除工具提示。
.attach();
要給一個新的元素添加一個工具提示，你只需要在Tip對象的后面加上.attach();，最后再把這個元素的選擇器放在括號里面。
參考代碼：

復(fù)制代碼代碼如下:

toolTips.attach('#tooltipID3');

.dettach();
這個方法和.attach方法一樣，不過它們的行為完全相反。首先，寫下Tip對象，然后在這個元素的后面添加上.dettach()；，最后把這個元素的選擇器放在括號里面。
參考代碼：

復(fù)制代碼代碼如下:

toolTips.dettach('#tooltipID3');

代碼示例
在這個示例中，我們將創(chuàng)建兩個不同的Tip插件實例，這樣我們就可以有兩個不同樣式的工具提示。我們還將集成我們上面看到的選項、事件和方法。
參考代碼：

復(fù)制代碼代碼如下:

 
var customTips = $$('.tooltip'); 
var toolTips = new Tips(customTips, { 
// 這將設(shè)置工具提示顯示的延遲時間 
showDelay: 1000, // 默認(rèn)是100 
// 這將設(shè)置工具提示隱藏的延遲事件 
hideDelay: 100, // 默認(rèn)是100 
// 這將給工具提示的容器div添加一個CSS樣式 
// 這樣就可以在一個頁面上 
// 有兩個不同樣式的工具條提示 
className: 'anything', // 默認(rèn)是null 
// 這將設(shè)置x和y的偏移值 
offsets: { 
'x': 100, // 默認(rèn)是16 
'y': 16 // 默認(rèn)16 
}, 
// 這將設(shè)置工具提示是否跟隨鼠標(biāo) 
// 設(shè)為true將不會跟隨鼠標(biāo) 
fixed: false, // 默認(rèn)是false 
// 如果你在選項之外調(diào)用這個函數(shù) 
// 并把這個函數(shù)留在這里 
// 它就閃一下，并有一個平滑的漸變效果 
onShow: function(toolTipElement){ 
// 傳遞進(jìn)來tooltip對象 
// 你可以讓它們漸變到完全不透明 
// 或者讓它們有一點(diǎn)點(diǎn)透明 
toolTipElement.fade(.8); 
$('show').highlight('#FFF504'); 
}, 
onHide: function(toolTipElement){ 
toolTipElement.fade(0); 
$('hide').highlight('#FFF504'); 
} 
}); 
var toolTipsTwo = new Tips('.tooltip2', { 
className: 'something_else', // 默認(rèn)是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'); 