|
|
程序特點(diǎn)
1，同一個(gè)提示框用在多個(gè)觸發(fā)元素時(shí)，只需一個(gè)實(shí)例；
2，顯示和隱藏分別有點(diǎn)擊方式和觸發(fā)方式選擇；
3，能設(shè)置延時(shí)顯示和隱藏；
4，有25種預(yù)設(shè)定位位置；
5，可在預(yù)設(shè)定位基礎(chǔ)上，再自定義定位；
6，可設(shè)置自適應(yīng)窗口定位；
程序說明
【Tip對(duì)象】
Tip對(duì)象就是用來顯示提示信息的容器，程序用Tip屬性表示。這個(gè)沒什么要求，程序初始化時(shí)會(huì)對(duì)它進(jìn)行一些設(shè)置。
首先進(jìn)行下面設(shè)置：
復(fù)制代碼 代碼如下:
var css = this._cssTip;
css.margin = 0;
css.position = "absolute"; css.visibility = "hidden";
css.display = "block"; css.zIndex = 99;
css.left = this._cssTip.top = "-9999px";
其中margin設(shè)為0是為了避免一些定位問題，用visibility來隱藏而不是display是因?yàn)槌绦蛐枰@取Tip的offsetWidth、offsetHeight，還需要設(shè)置left和top是避免因Tip占位出現(xiàn)的滾動(dòng)條。
因?yàn)門ip可能會(huì)在其他定位元素里面，所以還要設(shè)兩個(gè)offset修正參數(shù)：
復(fù)制代碼 代碼如下:
var iLeft = 0, iTop = 0, p = this.Tip;
while (p.offsetParent) {
p = p.offsetParent; iLeft += p.offsetLeft; iTop += p.offsetTop;
};
this._offsetleft = iLeft;
this._offsettop = iTop;
最后給Tip的mouseover加一個(gè)事件，具體后面再說明。
【觸發(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)值//說明
復(fù)制代碼 代碼如下:
ShowType: "both",//顯示方式
HideType: "both",//隱藏方式
ShowDelayType: "touch",//顯示延遲方式
HideDelayType: "touch",//隱藏延遲方式
ShowDelay: 300,//顯示延時(shí)時(shí)間
HideDelay: 300,//隱藏延時(shí)時(shí)間
Fixed: {},//定位對(duì)象
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程序是怎么判斷的就明白了：
復(fù)制代碼 代碼如下:
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)部元素，最后取反就是判斷是否外部元素了。
【點(diǎn)擊方式】
點(diǎn)擊方式顯示是指點(diǎn)擊觸發(fā)元素的時(shí)候顯示Tip。
在Add程序中會(huì)給觸發(fā)元素的click事件綁定以下程序：
復(fù)制代碼 代碼如下:
addEvent(elem, "click", BindAsEventListener(this, function(e){
if ( this.IsClick(trigger.ShowType) ) {
if ( this.CheckShow(trigger) ) {
this.ReadyShow(this.IsClick(trigger.ShowDelayType));
} else {
clearTimeout(this._timer);
};
};
}));
首先根據(jù)ClickShow判斷是否進(jìn)行點(diǎn)擊顯示，再用CheckShow檢測(cè)是否同一個(gè)觸發(fā)對(duì)象。
CheckShow程序是這樣的：
復(fù)制代碼 代碼如下:
if (trigger !== this._trigger) {
this.Hide(); this._trigger = trigger; return true;
} else { return false; };
如果不是同一個(gè)觸發(fā)對(duì)象，就先執(zhí)行Hide清理前一個(gè)觸發(fā)對(duì)象，防止沖突，再執(zhí)行ReadyShow來顯示。
如果是同一個(gè)觸發(fā)對(duì)象，就說明當(dāng)前是延時(shí)隱藏階段，清除定時(shí)器保持顯示狀態(tài)就行了。
對(duì)應(yīng)的，點(diǎn)擊方式隱藏是指點(diǎn)擊外部元素的時(shí)候隱藏Tip。
在ReadyShow里，當(dāng)使用點(diǎn)擊方式隱藏時(shí)，就會(huì)把_fCH綁定到document的click事件里：
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH);
注意這里要把隱藏綁定事件放到ReadyShow，而不是Show里面，因?yàn)檠訒r(shí)的時(shí)候有可能還沒有顯示就觸發(fā)了隱藏事件。
其中_fCH是在初始化時(shí)定義的一個(gè)屬性，用于添加和移除點(diǎn)擊隱藏事件：
復(fù)制代碼 代碼如下:
this._fCH = BindAsEventListener(this, function(e) {
if (this.Check(e.target) && this.CheckHide()) {
this.ReadyHide(this.IsClick(this._trigger.HideDelayType));
};
});
注意不同于點(diǎn)擊顯示，由于綁定的是document，隱藏前要先確定e.target是不是外部元素。
其中CheckHide是作用是檢查Tip當(dāng)前是不是隱藏狀態(tài)：
復(fù)制代碼 代碼如下:
if (this._cssTip.visibility === "hidden") {
clearTimeout(this._timer);
removeEvent(this._trigger.Elem, "mouseout", this._fTH);
this._trigger = null;
removeEvent(document, "click", this._fCH);
return false;
} else { return true; };
如果本來就是隱藏狀態(tài)，清除定時(shí)器移除事件就行，不需要再執(zhí)行Hide了。
【觸發(fā)方式】
觸發(fā)方式針對(duì)的是mouseover和mouseout，它的流程跟點(diǎn)擊方式是差不多的。
觸發(fā)方式顯示是指鼠標(biāo)從外部元素進(jìn)入觸發(fā)元素（觸發(fā)mouseover）的時(shí)候顯示Tip。
在Add程序中會(huì)給觸發(fā)元素的mouseover事件綁定以下程序：
復(fù)制代碼 代碼如下:
addEvent(elem, "mouseover", BindAsEventListener(this, function(e){
if ( this.IsTouch(trigger.ShowType) ) {
if (this.CheckShow(trigger)) {
this.ReadyShow(this.IsTouch(trigger.ShowDelayType));
} else if (this.Check(e.relatedTarget)) {
clearTimeout(this._timer);
};
};
}));
跟點(diǎn)擊方式類似，也需要執(zhí)行一次CheckShow，但不同的是，還會(huì)用Check判斷e.relatedTarget是不是外部對(duì)象。
這是因?yàn)閙ouseover可能是從觸發(fā)元素的內(nèi)部元素（包括Tip）進(jìn)入或內(nèi)部元素冒泡觸發(fā)的，而這些情況不需要任何操作。
對(duì)應(yīng)的，觸發(fā)方式隱藏是指鼠標(biāo)從觸發(fā)元素或Tip離開時(shí)隱藏Tip。
當(dāng)TouchHide為true時(shí)，在ReadyShow的時(shí)候會(huì)把_fTH綁定到觸發(fā)元素的mouseout事件里：
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH);
在Show的時(shí)候，再綁定到Tip的mouseout：
this.IsClick(trigger.HideType) && addEvent(document, "click", this._fCH);
在ReadyShow綁定的原因同上，而Tip只需顯示時(shí)綁定。
其中_fTH跟_fCH類似，也是在初始化時(shí)定義的一個(gè)屬性，用于添加和移除觸發(fā)隱藏事件：
復(fù)制代碼 代碼如下:
this._fTH = BindAsEventListener(this, function(e) {
if (this.Check(e.relatedTarget) && this.CheckHide()) {
this.ReadyHide(this.IsTouch(this._trigger.HideDelayType));
};
});
不同的是mouseout在Check的時(shí)候是用e.relatedTarget。
【觸發(fā)原理】
上面是從程序的角度說明了觸發(fā)顯示和隱藏的過程，但要真正理解的話還需要做一次細(xì)致的分析。
下面是以觸發(fā)方式的顯示隱藏為例做的流程圖：
下面是文字說明：
1，等待觸發(fā)顯示；
2，進(jìn)入觸發(fā)元素，如果設(shè)置延時(shí)，跳到3，如果沒有設(shè)置延時(shí)，跳到4；
3，延時(shí)時(shí)間內(nèi)，離開到外部元素，清除定時(shí)器，返回1，超過延時(shí)時(shí)間，跳到4；
4，執(zhí)行顯示程序；
5，顯示Tip狀態(tài)；
6，離開觸發(fā)元素，如果是進(jìn)入到Tip，跳到7，如果是離開到外部元素，跳到9；
7，保持顯示狀態(tài)；
8，離開Tip，如果是進(jìn)入觸發(fā)元素，返回5，如果是離開到外部元素，跳到9；
9，如果設(shè)置延時(shí)，跳到10，如果沒有設(shè)置延時(shí)，跳到11；
10，延時(shí)時(shí)間內(nèi)，如果進(jìn)入Tip，清除定時(shí)器，返回7，如果進(jìn)入觸發(fā)元素，清除定時(shí)器，返回5，超過延時(shí)時(shí)間，跳到11；
11，執(zhí)行隱藏程序，返回1；
再對(duì)照程序，應(yīng)該就能理解整個(gè)流程了，當(dāng)然可能還不是那么好理解。
這個(gè)流程也只是單例的情況，多例的時(shí)候還要多加一些判斷。
可以說這個(gè)流程看似不難，但如果想做一個(gè)最優(yōu)化的流程，那要考慮的細(xì)節(jié)地方可能會(huì)讓人受不了。
點(diǎn)擊方式跟觸發(fā)方式的流程是差不多的，而且更簡(jiǎn)單，這里就不重復(fù)了。
【元素定位】
完成了顯示隱藏，就到本程序另一個(gè)重點(diǎn)，元素定位。
程序使用一個(gè)GetRelative函數(shù)，通過定位元素、參考元素和參數(shù)對(duì)象來獲取形如{ Left: 100, Top: 200 }的定位參數(shù)結(jié)果。
計(jì)算結(jié)果結(jié)合了以下定位方式：預(yù)設(shè)定位，自定義定位，自適應(yīng)定位。
觸發(fā)對(duì)象的Fixed屬性就是用來保存定位參數(shù)對(duì)象的，包括一下屬性：
屬性: 默認(rèn)值//說明
Align: "clientleft",//水平方向定位
vAlign: "clienttop",//垂直方向定位
CustomLeft: 0,//自定義left定位
CustomTop: 0,//自定義top定位
PercentLeft: 0,//自定義left百分比定位
PercentTop: 0,//自定義top百分比定位
Adaptive: false,//是否自適應(yīng)定位
Reset: false//自適應(yīng)定位時(shí)是否重新定位
下面再看看如何通過這些屬性設(shè)置定位。
【預(yù)設(shè)定位和自定義定位】
預(yù)設(shè)定位的意思是使用程序25個(gè)預(yù)設(shè)位置來定位。
25個(gè)位置是怎么來的呢？看下面的具體演示：
JavaScript技術(shù)：JavaScript 浮動(dòng)定位提示效果實(shí)現(xiàn)代碼第1/2頁(yè)，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
