|
|
基礎(chǔ)知識(shí)
創(chuàng)建一個(gè)新的工具提示
創(chuàng)建一個(gè)新的工具提示非常簡(jiǎn)單。首先，我們來(lái)創(chuàng)建一個(gè)要添加工具提示的鏈接：
參考代碼： 復(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屬性的值。如果沒(méi)有rel屬性，將顯示href屬性值。
現(xiàn)在來(lái)創(chuàng)建一個(gè)新的默認(rèn)工具條提示：
參考代碼：
復(fù)制代碼 代碼如下:
var customTips = $$('.tooltipA');
var toolTips = new Tips(customTips);
由于沒(méi)有使用任何樣式，你將看到下面這樣的工具提示：
Tool tip 1
為你的工具提示使用樣式
MooTools可以讓你在很大程度上控制它的輸出――我們來(lái)看一下工具提示的html代碼：
參考代碼：
復(fù)制代碼 代碼如下:
// 你可以在options中指定
// 工具提示容器的CSS類(lèi)名
<div class="options.className">
<div class="tip"></div>
</div>
留意一下頂部和底部的div，你可以通過(guò)它們來(lái)輕松地在頂部和底部添加圓角，或者其他樣式效果。
現(xiàn)在，讓我們來(lái)創(chuàng)建一個(gè)我們的第一個(gè)選項(xiàng)并添加一些CSS。上面的html代碼將用名為“options.className”的CSS樣式來(lái)渲染。通過(guò)給我們的工具提示來(lái)指定一個(gè)CSS類(lèi)名，我們就可以給它一個(gè)獨(dú)立的樣式而不會(huì)影響頁(yè)面上的其他MooTools工具提示。
參考代碼：
復(fù)制代碼 代碼如下:
var customTipsB = $$('.tooltipB');
var toolTipsB = new Tips(customTipsB, {
className: 'custom_tip'
});
最后，我們?cè)偬砑右恍〤SS：
參考代碼：
復(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
選項(xiàng)
在Tips類(lèi)中總共只有五個(gè)選項(xiàng)，每個(gè)都有很好的自解釋性（也就是一看就明白什么意思了）。
showDelay
默認(rèn)值為100
一個(gè)以毫秒為單位的整數(shù)，這將決定工具提示在鼠標(biāo)移動(dòng)到元素上面多久后再顯示出來(lái)。
hideDelay
默認(rèn)值為100
和上面的showDelay一樣，不過(guò)這個(gè)值（也是以毫秒為單位）將決定當(dāng)鼠標(biāo)離開(kāi)元素多久以后隱藏工具提示。
className
默認(rèn)為null
就像你在上面的示例中看到的一樣，這可以讓你為工具提示容器設(shè)置一個(gè)CSS類(lèi)名。
offsets
默認(rèn)為 x:16, y:16
這將決定工具提示離你的元素的距離，x值為離元素往右的距離，y為離元素往下的距離（如果指定了fixed選項(xiàng)為false，將是相對(duì)于鼠標(biāo)指針的距離，否則將是相對(duì)于元素的距離）。
fixed
默認(rèn)為false
這個(gè)設(shè)置決定了當(dāng)你的鼠標(biāo)在元素上面移動(dòng)時(shí)，這個(gè)工具提示是否跟隨鼠標(biāo)。如果設(shè)置為true，工具提示將不隨鼠標(biāo)指針的移動(dòng)而移動(dòng)，而只是停留在元素的附近固定的位置。
事件
和這個(gè)類(lèi)的其他東西一樣，工具提示的事件仍然非常簡(jiǎn)單。它有兩個(gè)事件：onShow和onHide，它們將會(huì)像你期待的那樣工作。
onShow
這個(gè)事件將在工具條顯示的時(shí)候觸發(fā)。如果你設(shè)置了延時(shí)，這個(gè)事件將在直到工具提示顯示出來(lái)時(shí)觸發(fā)。
onHide
和上面的onShow事件一樣，相對(duì)地，它是在工具提示隱藏時(shí)觸發(fā)。如果設(shè)置了延時(shí)，這個(gè)事件也將在直到工具提示隱藏起來(lái)時(shí)觸發(fā)。
方法
Tips類(lèi)有兩個(gè)方法――attach和dettach，通過(guò)這兩個(gè)方法，你可以給一個(gè)指定的元素添加一個(gè)工具提示（當(dāng)然了，這些工具提示會(huì)有相同的設(shè)置），或者從一個(gè)特定的元素上移除工具提示。
.attach();
要給一個(gè)新的元素添加一個(gè)工具提示，你只需要在Tip對(duì)象的后面加上.attach();，最后再把這個(gè)元素的選擇器放在括號(hào)里面。
參考代碼：
復(fù)制代碼 代碼如下:
toolTips.attach('#tooltipID3');
.dettach();
這個(gè)方法和.attach方法一樣，不過(guò)它們的行為完全相反。首先，寫(xiě)下Tip對(duì)象，然后在這個(gè)元素的后面添加上.dettach()；，最后把這個(gè)元素的選擇器放在括號(hào)里面。
參考代碼：
復(fù)制代碼 代碼如下:
toolTips.dettach('#tooltipID3');
代碼示例
在這個(gè)示例中，我們將創(chuàng)建兩個(gè)不同的Tip插件實(shí)例，這樣我們就可以有兩個(gè)不同樣式的工具提示。我們還將集成我們上面看到的選項(xiàng)、事件和方法。
參考代碼：
復(fù)制代碼 代碼如下:
var customTips = $$('.tooltip');
var toolTips = new Tips(customTips, {
// 這將設(shè)置工具提示顯示的延遲時(shí)間
showDelay: 1000, // 默認(rèn)是100
// 這將設(shè)置工具提示隱藏的延遲事件
hideDelay: 100, // 默認(rèn)是100
// 這將給工具提示的容器div添加一個(gè)CSS樣式
// 這樣就可以在一個(gè)頁(yè)面上
// 有兩個(gè)不同樣式的工具條提示
className: 'anything', // 默認(rèn)是null
// 這將設(shè)置x和y的偏移值
offsets: {
'x': 100, // 默認(rèn)是16
'y': 16 // 默認(rèn)16
},
// 這將設(shè)置工具提示是否跟隨鼠標(biāo)
// 設(shè)為true將不會(huì)跟隨鼠標(biāo)
fixed: false, // 默認(rèn)是false
// 如果你在選項(xiàng)之外調(diào)用這個(gè)函數(shù)
// 并把這個(gè)函數(shù)留在這里
// 它就閃一下，并有一個(gè)平滑的漸變效果
onShow: function(toolTipElement){
// 傳遞進(jìn)來(lái)tooltip對(duì)象
// 你可以讓它們漸變到完全不透明
// 或者讓它們有一點(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();方法來(lái)改變r(jià)el的值
// 從而改變工具提示的值
// 你可以使用下面的代碼
$('tooltipID1').store('tip:text', 'You can replace the href with whatever text you want.');
$('tooltipID1').store('tip:title', 'Here is a new title.');
// 下面的代碼將改不會(huì)改變工具提示的文本
$('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');
Tool tip 1
Tool tip is detached
Tool tip 3
Tool tip detached then attached again.
A differently styled tool tip
更多學(xué)習(xí)
通讀一遍MooTools文檔中的Tips這一節(jié)。另外，這里還有David Walsh寫(xiě)的一篇很不錯(cuò)的關(guān)于定制Mootools Tips的文章。
下載一個(gè)包含你所需要的全部東西的zip壓縮包
JavaScript技術(shù)：Mootools 1.2教程 Tooltips，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
