|
觸發(fā)對(duì)象：
由于很多情況下都是一個(gè)Tip對(duì)應(yīng)多個(gè)地方的提示，所以程序參考了 Table排序 的方式，添加了一個(gè)Add方法。
一個(gè)Tip實(shí)例化后，再用Add方法就可以對(duì)多個(gè)觸發(fā)元素分別添加觸發(fā)對(duì)象，程序中用_trigger屬性表示當(dāng)前的觸發(fā)對(duì)象。
Add方法的一個(gè)必要參數(shù)是觸發(fā)元素，就是觸發(fā)顯示Tip的元素。
需要的話還可以用options參數(shù)，來自定義觸發(fā)對(duì)象的屬性，包括：
屬性: 默認(rèn)值//說明
ClickShow: true,//是否點(diǎn)擊方式顯示
ClickShowDelay: false,//是否點(diǎn)擊顯示延時(shí)
ClickHide: true,//是否點(diǎn)擊方式隱藏
ClickHideDelay: false,//是否點(diǎn)擊隱藏延時(shí)
TouchShow: true,//是否觸發(fā)方式顯示
TouchShowDelay: true,//是否觸發(fā)顯示延時(shí)
TouchHide: true,//是否觸發(fā)方式隱藏
TouchHideDelay: true,//是否觸發(fā)隱藏延時(shí)
ShowDelay: 300,//顯示延時(shí)時(shí)間
HideDelay: 300,//隱藏延時(shí)時(shí)間
vAlign: "clienttop",//垂直方向定位
Align: "left",//水平方向定位
Custom: { left: 0, top: 0 },//自定義定位
Percent: { left: 0, top: 0 },//自定義百分比定位
Adaptive: true,//是否自適應(yīng)定位
onShow: function(){},//顯示時(shí)執(zhí)行
onHide: function(){}//隱藏時(shí)執(zhí)行
具體作用后面再說明，可以在程序初始化時(shí)修改這些默認(rèn)值。
一個(gè)經(jīng)典應(yīng)用是在onShow中把Tip修改為各個(gè)觸發(fā)對(duì)象對(duì)應(yīng)的內(nèi)容。
此外還有Elem屬性保存觸發(fā)元素。
顯示和隱藏：
提示效果的一個(gè)重點(diǎn)就是顯示和隱藏提示信息。程序是通過設(shè)置Tip的visibility是否hidden來顯示和隱藏Tip的。
具體的顯示和隱藏程序分別在Show和Hide程序中，還有ReadyShow和ReadyHide程序，主要用來處理延時(shí)。
這種提示效果的一個(gè)特點(diǎn)是鼠標(biāo)移動(dòng)到Tip上時(shí)，會(huì)保持顯示狀態(tài)。
為了實(shí)現(xiàn)這個(gè)效果，給Tip的mouseover寫入程序：
this.Check(e.relatedTarget) && clearTimeout(this._timer);
其中Check程序是用來判斷relatedTarget是不外部元素，即鼠標(biāo)離開的元素是不是外部元素。
如果是外部元素，就說明當(dāng)前是隱藏延時(shí)階段，那么只要清除定時(shí)器來取消隱藏就可以了。
這里的外部元素是指觸發(fā)元素和Tip對(duì)象本身及其內(nèi)部元素以外的元素。
這個(gè)有點(diǎn)拗口，那再看看Check程序是怎么判斷的就明白了：
return !this._trigger ||
!(
this.Tip === elem || this._trigger.Elem === elem ||
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem)
);
首先判斷_trigger是否存在，不存在的話說明是剛開始觸發(fā)，也看成是外部觸發(fā)。
存在的話再判斷傳遞過來的元素是不是Tip或觸發(fā)元素本身，最后再用Contains判斷判斷是不是在Tip或觸發(fā)元素內(nèi)部。
ps：關(guān)于Contains請(qǐng)參考這里的比較文檔位置。
這樣得到的是判斷是否內(nèi)部元素，最后取反就是判斷是否外部元素了。
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) JavaScript 浮動(dòng)定位提示效果 [1] 下一頁(yè) JavaScript 浮動(dòng)定位提示效果 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) JavaScript 浮動(dòng)定位提示效果 [2]
