快捷導(dǎo)航

JavaScript 浮動(dòng)定位提示效果實(shí)現(xiàn)代碼第2/2頁(yè)

更新時(shí)間：2009年09月16日 16:21:51 作者：

本來(lái)想做一個(gè)集合浮動(dòng)定位和鼠標(biāo)跟隨的tooltips效果，但發(fā)現(xiàn)定位和鼠標(biāo)跟隨在一些關(guān)鍵的地方還是不同的，還是分開(kāi)來(lái)吧。

其中黑色框代表觸發(fā)元素，紅色框代表Tip。
一眼望去，要實(shí)現(xiàn)這么多的位置好像很復(fù)雜，這時(shí)要想找到最好的方法就要細(xì)心分析找出規(guī)律。
這25個(gè)位置其實(shí)都是由5個(gè)水平坐標(biāo)和5個(gè)垂直坐標(biāo)組合而來(lái)的，只要計(jì)算好這10個(gè)坐標(biāo)，就能組合出這25個(gè)位置來(lái)了。
其中1，2，3，4，5代表的水平坐標(biāo)，程序分別用left，clientleft，center，clientright，right來(lái)標(biāo)識(shí)。
而1，6，11，16，21代表的垂直坐標(biāo)，程序分別用top，clienttop，center，clientbottom，bottom來(lái)標(biāo)識(shí)。
ps：詞窮，只好加個(gè)client來(lái)充數(shù)。
下面說(shuō)說(shuō)如何獲取這些坐標(biāo)的值，首先通過(guò)getBoundingClientRect要獲取觸發(fā)元素的坐標(biāo)對(duì)象。
ps：關(guān)于getBoundingClientRect的介紹請(qǐng)看這里的元素位置。
再利用這個(gè)坐標(biāo)對(duì)像，通過(guò)GetRelative.Left和GetRelative.Top來(lái)獲取水平和垂直坐標(biāo)。
GetRelative.Left和GetRelative.Top里面都是些簡(jiǎn)單的獲取坐標(biāo)算法，具體請(qǐng)參考代碼。
使用時(shí)，把水平坐標(biāo)和垂直坐標(biāo)的標(biāo)識(shí)值（字符）分別賦給觸發(fā)對(duì)象的Align和vAlign屬性，系統(tǒng)就會(huì)自動(dòng)設(shè)置對(duì)應(yīng)的位置。
例如要設(shè)置位置14，那么Align設(shè)為"clientright"，vAlign設(shè)為"center"就可以了。
至于自定義定位就是在預(yù)設(shè)定位得到的坐標(biāo)基礎(chǔ)上，根據(jù)CustomLeft和CustomTop的值再進(jìn)行l(wèi)eft和top的修正。
自定義百分比定位是以觸發(fā)元素的寬和高為基準(zhǔn)，根據(jù)PercentLeft和PercentTop取百分比：
if (options.PercentLeft) { iLeft += .01 * options.PercentLeft * relElem.offsetWidth; };
if (options.PercentTop) { iTop += .01 * options.PercentTop * relElem.offsetHeight; };
注意數(shù)值單位是0.01。
【自適應(yīng)定位】
自適應(yīng)定位的作用是當(dāng)Tip顯示的范圍超過(guò)瀏覽器可視范圍的時(shí)候，自動(dòng)修正到可視范圍里面。
因?yàn)樯厦嫱ㄟ^(guò)getBoundingClientRect獲取的定位是以視窗為準(zhǔn)的，所以可以直接通過(guò)clientWidth/clientHeight來(lái)判斷是否超過(guò)視窗范圍。
首先獲取最大left和top值：
var maxLeft = document.documentElement.clientWidth - fixedElem.offsetWidth,
maxTop = document.documentElement.clientHeight - fixedElem.offsetHeight;
最小值是0就不用計(jì)算了。
如果Reset屬性是true會(huì)使用重新定位的方法。
理想的效果是能自動(dòng)從25個(gè)預(yù)設(shè)定位中找到適合的定位位置。
但這個(gè)需求實(shí)在變化太多，要全部實(shí)現(xiàn)估計(jì)要長(zhǎng)長(zhǎng)的代碼，程序僅僅做了簡(jiǎn)單的修正：
if (iLeft > maxLeft || iLeft < 0) {
iLeft = GetRelative.Left(2 * iLeft > maxLeft ? "left" : "right") + options.CustomLeft;
};
if (iTop > maxTop || iTop < 0) {
iTop = GetRelative.Top(2 * iTop > maxTop ? "top" : "bottom") + options.CustomTop;
};
實(shí)際應(yīng)用的話估計(jì)要按需求重寫(xiě)這部分才行。
如果不是用Reset重新定位，只需要根據(jù)這幾個(gè)值獲取適合的值就行了：
iLeft = Math.max(Math.min(iLeft, maxLeft), 0);
iTop = Math.max(Math.min(iTop, maxTop), 0);
【參數(shù)設(shè)計(jì)】
程序中用ShowType、HideType、ShowDelayType和HideDelayType這幾個(gè)屬性來(lái)設(shè)置執(zhí)行方式的。
以ShowType顯示方式屬性為例，原來(lái)的方式是分兩個(gè)bool屬性ClickShowType和TouchShowType表示的。
這樣的好處是程序判斷方便，效率高，問(wèn)題是使用不方便，感覺(jué)混亂。
為了減少參數(shù)數(shù)量，后來(lái)把屬性值改成字符形式，可以是以下4個(gè)值：
"click":只用點(diǎn)擊方式
"touch":只用觸發(fā)方式
"both":兩個(gè)都使用
"none":都不使用（其他字符值也當(dāng)成是"none"）
這樣就可以把ClickShowType和TouchShowType合并成一個(gè)ShowType來(lái)表示了。
參數(shù)數(shù)量是減少了，但程序中就必須每次都要根據(jù)字符值判斷一下屬于哪個(gè)類(lèi)型。
為了方便程序判斷，添加了IsClick和IsTouch方法，參數(shù)是上面的執(zhí)行方式屬性，用來(lái)判斷是否使用點(diǎn)擊和觸發(fā)方式。
例如IsClick是這樣的：
type = type.toLowerCase();
return type === "both" || type === "click";
這樣就間接把字符判斷變成bool判斷，只是代碼比直接bool判斷長(zhǎng)了點(diǎn)。
【隱藏select】
又是ie6的隱藏select問(wèn)題，這里用的是iframe遮蓋法。
首先初始化時(shí)插入iframe：

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

 
var iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>"); 
document.body.insertBefore(iframe, document.body.childNodes[0]); 
this._cssiframe = iframe.style; 

在Show的時(shí)候，參照Tip設(shè)置好樣式，再顯示：

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

 
var css = this._cssiframe; 
css.width = this.Tip.offsetWidth + "px"; 
css.height = this.Tip.offsetHeight + "px"; 
css.left = iLeft + "px"; css.top = iTop + "px"; css.display = ""; 

其實(shí)就是要墊在Tip的下面。
在Hidde時(shí)隱藏就可以了。
使用說(shuō)明
實(shí)例化時(shí)，第一個(gè)必要參數(shù)是Tip對(duì)象：
var ft = new FixedTips("idTip");
第二個(gè)可選參數(shù)用來(lái)設(shè)置觸發(fā)對(duì)象屬性的統(tǒng)一默認(rèn)值。
然后用Add方法添加觸發(fā)對(duì)象：
var trigger1 = ft.Add("idTrigger1");
第二個(gè)可選參數(shù)用來(lái)設(shè)置該觸發(fā)對(duì)象屬性。
要添加多個(gè)觸發(fā)對(duì)象時(shí)只需繼續(xù)用Add添加就行了。
程序源碼

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

 
var FixedTips = function(tip, options){ 
this.Tip = $$(tip);//提示框 

this._trigger = null;//觸發(fā)對(duì)象 
this._timer = null;//定時(shí)器 
this._cssTip = this.Tip.style;//簡(jiǎn)化代碼 
this._onshow = false;//記錄當(dāng)前顯示狀態(tài) 

this.SetOptions(options); 
//處理Tip對(duì)象 
var css = this._cssTip; 
css.margin = 0;//避免定位問(wèn)題 
css.position = "absolute"; css.visibility = "hidden"; 
css.display = "block"; css.zIndex = 99; 
css.left = this._cssTip.top = "-9999px";//避免占位出現(xiàn)滾動(dòng)條 
//offset修正參數(shù) 
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對(duì)象時(shí)保持顯示狀態(tài) 
addEvent(this.Tip, "mouseover", BindAsEventListener(this, function(e){ 
//如果是外部元素進(jìn)入，說(shuō)明當(dāng)前是隱藏延時(shí)階段，那么清除定時(shí)器取消隱藏 
this.Check(e.relatedTarget) && clearTimeout(this._timer); 
})); 
//ie6處理select 
if (isIE6) { 
var iframe = document.createElement("<iframe style='position:absolute;filter:alpha(opacity=0);display:none;'>"); 
document.body.insertBefore(iframe, document.body.childNodes[0]); 
this._cssiframe = iframe.style; 
}; 
//用于點(diǎn)擊方式隱藏 
this._fCH = BindAsEventListener(this, function(e) { 
if (this.Check(e.target) && this.CheckHide()) { 
this.ReadyHide(this.IsClick(this._trigger.HideDelayType)); 
}; 
}); 
//用于觸發(fā)方式隱藏 
this._fTH = BindAsEventListener(this, function(e) { 
if (this.Check(e.relatedTarget) && this.CheckHide()) { 
this.ReadyHide(this.IsTouch(this._trigger.HideDelayType)); 
}; 
}); 
}; 
FixedTips.prototype = { 
//設(shè)置默認(rèn)屬性 
SetOptions: function(options) { 
this.options = {//默認(rèn)值 
ShowType: "both",//顯示方式 
HideType: "both",//隱藏方式 
ShowDelayType: "touch",//顯示延遲方式 
HideDelayType: "touch",//隱藏延遲方式 
//"click":只用點(diǎn)擊方式,"touch":只用觸發(fā)方式,"both":兩個(gè)都使用,"none":都不使用 
ShowDelay: 300,//顯示延時(shí)時(shí)間 
HideDelay: 300,//隱藏延時(shí)時(shí)間 
Fixed: {},//定位對(duì)象 
onShow: function(){},//顯示時(shí)執(zhí)行 
onHide: function(){}//隱藏時(shí)執(zhí)行 
}; 
Extend(this.options, options || {}); 
}, 
//檢查觸發(fā)元素 
Check: function(elem) { 
//返回是否外部元素（即觸發(fā)元素和Tip對(duì)象本身及其內(nèi)部元素以外的元素對(duì)象） 
return !this._trigger || 
!( 
this.Tip === elem || this._trigger.Elem === elem || 
Contains(this.Tip, elem) || Contains(this._trigger.Elem, elem) 
); 
}, 
//準(zhǔn)備顯示 
ReadyShow: function(delay) { 
clearTimeout(this._timer); 
var trigger = this._trigger; 
//觸發(fā)方式隱藏 
this.IsTouch(trigger.HideType) && addEvent(this._trigger.Elem, "mouseout", this._fTH); 
//點(diǎn)擊方式隱藏 
this.IsClick(trigger.HideType) && addEvent(document, "click", this._fCH); 
//顯示 
if (delay) { 
this._timer = setTimeout(Bind(this, this.Show), trigger.ShowDelay); 
} else { this.Show(); }; 
}, 
//顯示 
Show: function() { 
clearTimeout(this._timer); 
this._trigger.onShow();//放在前面方便修改屬性 
//根據(jù)預(yù)設(shè)定位和自定義定位計(jì)算left和top 
var trigger = this._trigger, 
pos = GetRelative(trigger.Elem, this.Tip, trigger.Fixed), 
iLeft = pos.Left, iTop = pos.Top; 
//設(shè)置位置并顯示 
this._cssTip.left = iLeft - this._offsetleft + "px"; 
this._cssTip.top = iTop - this._offsettop + "px"; 
this._cssTip.visibility = "visible"; 
//ie6處理select 
if (isIE6) { 
var css = this._cssiframe; 
css.width = this.Tip.offsetWidth + "px"; 
css.height = this.Tip.offsetHeight + "px"; 
css.left = iLeft + "px"; css.top = iTop + "px"; css.display = ""; 
}; 
//觸發(fā)方式隱藏 
this.IsTouch(trigger.HideType) && addEvent(this.Tip, "mouseout", this._fTH); 
}, 
//準(zhǔn)備隱藏 
ReadyHide: function(delay) { 
clearTimeout(this._timer); 
if (delay) { 
this._timer = setTimeout(Bind(this, this.Hide), this._trigger.HideDelay); 
} else { this.Hide(); }; 
}, 
//隱藏 
Hide: function() { 
clearTimeout(this._timer); 
//設(shè)置隱藏 
this._cssTip.visibility = "hidden"; 
this._cssTip.left = this._cssTip.top = "-9999px"; 
//ie6處理select 
if (isIE6) { this._cssiframe.display = "none"; }; 
//處理觸發(fā)對(duì)象 
if (!!this._trigger) { 
this._trigger.onHide(); 
removeEvent(this._trigger.Elem, "mouseout", this._fTH); 
} 
this._trigger = null; 
//移除事件 
removeEvent(this.Tip, "mouseout", this._fTH); 
removeEvent(document, "click", this._fCH); 
}, 
//添加觸發(fā)對(duì)象 
Add: function(elem, options) { 
//創(chuàng)建一個(gè)觸發(fā)對(duì)象 
var elem = $$(elem), trigger = Extend( Extend( { Elem: elem }, this.options ), options || {} ); 
//點(diǎn)擊方式顯示 
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); 
}; 
}; 
})); 
//觸發(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); 
}; 
}; 
})); 
//返回觸發(fā)對(duì)象 
return trigger; 
}, 
//顯示檢查 
CheckShow: function(trigger) { 
if ( trigger !== this._trigger ) { 
//不是同一個(gè)觸發(fā)對(duì)象就先執(zhí)行Hide防止沖突 
this.Hide(); this._trigger = trigger; return true; 
} else { return false; }; 
}, 
//隱藏檢查 
CheckHide: function() { 
if ( this._cssTip.visibility === "hidden" ) { 
//本來(lái)就是隱藏狀態(tài)，不需要再執(zhí)行Hide 
clearTimeout(this._timer); 
removeEvent(this._trigger.Elem, "mouseout", this._fTH); 
this._trigger = null; 
removeEvent(document, "click", this._fCH); 
return false; 
} else { return true; }; 
}, 
//是否點(diǎn)擊方式 
IsClick: function(type) { 
type = type.toLowerCase(); 
return type === "both" || type === "click"; 
}, 
//是否觸發(fā)方式 
IsTouch: function(type) { 
type = type.toLowerCase(); 
return type === "both" || type === "touch"; 
} 
}; 