欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Javascript公共腳本庫(kù)系列(一): 彈出層腳本

 更新時(shí)間：2011年02月24日 00:33:22   作者：  
本篇文章講解彈出浮動(dòng)層的javascript函數(shù), 以及函數(shù)的原理和使用注意事項(xiàng).
一.摘要
本系列文章是為了抽象通用的,跨瀏覽器的腳本方法.

本篇文章講解彈出浮動(dòng)層的javascript函數(shù), 以及函數(shù)的原理和使用注意事項(xiàng).

二.實(shí)現(xiàn)效果
用腳本彈出浮動(dòng)層是我們最常用的腳本方法之一.下面是效果圖:

image 
點(diǎn)擊圖中的"航空公司"后,會(huì)在"航空公司"下面彈出浮動(dòng)層.

在網(wǎng)上彈出框的腳本相當(dāng)多, 而且還有各種第三方JS框架可供我們使用.但是其中有的腳本過(guò)于簡(jiǎn)單,僅僅粗略的實(shí)現(xiàn)彈出效果而忽略了靈活性,通用性和跨瀏覽器特性. 使用JS框架又有些殺雞用牛刀.所以在收集整理了一些資料后, 寫(xiě)出了下文中的ScriptHelper類(lèi)的彈出層方法.

主要特點(diǎn)有:
支持多瀏覽器
使用面向?qū)ο蠓椒ǚ庋b
使用簡(jiǎn)單,通用性強(qiáng).
將計(jì)算位置等函數(shù)進(jìn)行提取, 所有的相關(guān)函數(shù)都可以單獨(dú)調(diào)用, 可根據(jù)具體項(xiàng)目繼續(xù)二次開(kāi)發(fā).
三.腳本方法
下面我先將腳本方法貢獻(xiàn)出來(lái),然后舉例如何使用. 最后講解腳本的原理.

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

/* ==================== ScriptHelper 開(kāi)始 ==================== */
/* scriptHelper 腳本幫助對(duì)象.
創(chuàng)建人: ziqiu.zhang 2008.3.5
添加函數(shù):
getScroll():得到鼠標(biāo)滾過(guò)的距離-兼容XHTML
getClient():得到瀏覽器當(dāng)前顯示區(qū)域的大小-兼容XHTML
showDivCommon():顯示圖層.
使用舉例:
<div id="testDiv" style="display:none; position:absolute; border:1px #000000;">我是測(cè)試圖層我是測(cè)試圖層</div>
<div style="width:400px; text-align:center;"><div><a href="#" onclick="ScriptHelper.showDivCommon(this,'testDiv', 20, 70)">事件源</a></div></div>
*/
function scriptHelper()
{
}

// 得到鼠標(biāo)滾過(guò)的距離 scrollTop 與 scrollLeft
/* 用法與測(cè)試:
var myScroll = getScroll();
alert("myScroll.scrollTop:" + myScroll.scrollTop);
alert("myScroll.scrollLeft:" + myScroll.scrollLeft);
*/
scriptHelper.prototype.getScroll = function ()
{
var scrollTop = 0, scrollLeft = 0;
scrollTop = (document.body.scrollTop > document.documentElement.scrollTop)? document.body.scrollTop:document.documentElement.scrollTop;
if( isNaN(scrollTop) || scrollTop <0 ){ scrollTop = 0 ;}
scrollLeft = (document.body.scrollLeft > document.documentElement.scrollLeft )? document.body.scrollLeft:document.documentElement.scrollLeft;
if( isNaN(scrollLeft) || scrollLeft <0 ){ scrollLeft = 0 ;}
return { scrollTop:scrollTop, scrollLeft: scrollLeft};
}
// 得到瀏覽器當(dāng)前顯示區(qū)域的大小 clientHeight 與 clientWidth
/* 用法與測(cè)試:
var myScroll = getScroll();
alert("myScroll.sTop:" + myScroll.sTop);
alert("myScroll.sLeft:" + myScroll.sLeft);
*/
scriptHelper.prototype.getClient = function ()
{
//判斷頁(yè)面是否符合XHTML標(biāo)準(zhǔn)
var isXhtml = true;
if( document.documentElement == null || document.documentElement.clientHeight <= 0)
{
if( document.body.clientHeight>0 )
{
isXhtml = false;
}
}
this.clientHeight = isXhtml?document.documentElement.clientHeight:document.body.clientHeight;
this.clientWidth = isXhtml?document.documentElement.clientWidth:document.body.clientWidth;
return {clientHeight:this.clientHeight,clientWidth:this.clientWidth};
}

// 顯示圖層,再次調(diào)用則隱藏
/* 參數(shù)說(shuō)明:
sObj : 要彈出圖層的事件源
divId : 要顯示的圖層ID
sObjHeight : 事件源的高度,默認(rèn)為20.需要手工傳入是因?yàn)閷?duì)于由于事件源對(duì)象可能是各種HTML元素,有些元素高度的計(jì)算無(wú)法跨瀏覽器通用.
moveLeft : 手工向左移動(dòng)的距離.不移動(dòng)則為0(默認(rèn)).
divObjHeight: 彈出層的高度.如果傳入大于0的此參數(shù), 則當(dāng)事件源下方空間不足時(shí),在事件源上方彈出層.如果不傳此參數(shù)則一直在事件源下方彈出.
用法與測(cè)試:
<div><a href="#" onclick="ScriptHelper.showDivCommon(this,'testDiv', 20, 20)">事件源</a></div>
*/
scriptHelper.prototype.showDivCommon = function (sObj,divId, sObjHeight, moveLeft, divObjHeight)
{
//取消冒泡事件
if( typeof(window)!='undefined' && window != null && window.event != null )
{
window.event.cancelBubble = true;
}
else if( ScriptHelper.showDivCommon.caller.arguments[0] != null )
{
ScriptHelper.showDivCommon.caller.arguments[0].cancelBubble = true;
}
//參數(shù)檢測(cè).如果沒(méi)有傳入?yún)?shù)則設(shè)置默認(rèn)值
if( moveLeft == null )
{
moveLeft = 0;
}
if( sObjHeight == null )
{
sObjHeight = 20;
}
if(divObjHeight == null)
{
divObjHeight = 0;
}

var divObj = document.getElementById(divId); //獲得圖層對(duì)象
var sObjOffsetTop = 0; //事件源的垂直距離
var sObjOffsetLeft = 0; //事件源的水平距離
var myClient = this.getClient();
var myScroll = this.getScroll();
var sWidth = sObj.width; //事件源對(duì)象的寬度
var sHeight = sObjHeight; //事件源對(duì)象的高度
var bottomSpace; //距離底部的距離
/* 獲取事件源控件的高度和寬度.*/
if( sWidth == null )
{
sWidth = 100;//無(wú)法獲取則為100
}
else
{
sWidth = sWidth + 1; //留出1px的距離
}

if( divObj.style.display.toLowerCase() != "none" )
{
//隱藏圖層
divObj.style.display = "none";
}
else
{
if( sObj == null )
{
alert("事件源對(duì)象為null");
return false;
}
/* 獲取事件源對(duì)象的偏移量 */
var tempObj = sObj; //用于計(jì)算事件源坐標(biāo)的臨時(shí)對(duì)象
while( tempObj && tempObj.tagName.toUpperCase() != "BODY" )
{
sObjOffsetTop += tempObj.offsetTop;
sObjOffsetLeft += tempObj.offsetLeft;
tempObj = tempObj.offsetParent;
}
tempObj = null;

/* 獲取距離底部的距離 */
bottomSpace = parseInt(myClient.clientHeight) - ( parseInt(sObjOffsetTop) - parseInt(myScroll.scrollTop)) - parseInt(sHeight);
/* 設(shè)置圖層顯示位置 */
//如果事件源下方空間不足且上方控件足夠容納彈出層,則在上方顯示.否則在下方顯示
if( divObjHeight>0 && bottomSpace < divObjHeight && sObjOffsetTop >divObjHeight )
{
divObj.style.top = ( parseInt( sObjOffsetTop ) - parseInt( divObjHeight ) - 10).toString() + "px";
}
else
{
divObj.style.top = ( parseInt( sObjOffsetTop ) + parseInt( sHeight ) ).toString() + "px";
}
divObj.style.left = ( parseInt( sObjOffsetLeft ) - parseInt( moveLeft ) ).toString() + "px";
divObj.style.display="block";
}
}

// 關(guān)閉圖層
/* 參數(shù)說(shuō)明:
divId : 要隱藏的圖層ID
用法與測(cè)試:
ScriptHelper.closeDivCommon('testDiv');
*/
scriptHelper.prototype.closeDivCommon = function (divId)
{
//
var divObj = document.getElementById(divId); //獲得圖層對(duì)象
if( divObj != null )
{
divObj.style.display = "none";
}
}
//建立scriptHelper類(lèi)的一個(gè)實(shí)例對(duì)象.全局使用.
var ScriptHelper = new scriptHelper();
/* ==================== ScriptHelper 結(jié)束 ==================== */

四.使用舉例
接下來(lái)我們創(chuàng)建HTML頁(yè)面演示如何使用此腳本.此實(shí)例是一個(gè)菜單,當(dāng)點(diǎn)擊時(shí)顯示子菜單圖層.
1.引用腳本文件
將上面的代碼保存在ScriptHelper.js文件中.在頁(yè)面中添加引用:
<script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript" defer="defer"></script>
2.編寫(xiě)子菜單
先編寫(xiě)兩個(gè)子菜單圖層.
復(fù)制代碼 代碼如下:

<!-- Sub Menu 1 -->
<div id="subMenu1" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; margin:0px; padding:5px; height:100px;">
<div>1-1</div>
<div>1-2</div>
</div>
<!-- Sub Menu 2 -->
<div id="subMenu2" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; padding:5px;" >
<div>2-1</div>
<div>2-2</div>
</div>

對(duì)于子菜單, 最重要的就是要設(shè)置兩個(gè)樣式:position和display.
position:absolute 讓此圖層能夠精確定位顯示.從而控制他的顯示位置.
display:none 讓圖層在加載時(shí)不顯示.
3.編寫(xiě)主菜單
主菜單代碼如下:
復(fù)制代碼 代碼如下:

<!-- Main Menu -->
<div >
<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a>
<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a>
<a class="cursorHand" href="#">NoSubMenu</a>
</div>

我們創(chuàng)建了三個(gè)菜單.其中Menu1和Menu2擁有子菜單, NoSubMenu沒(méi)有子菜單.
我們使用了a元素創(chuàng)建菜單對(duì)象, 但是因?yàn)闆](méi)有為其添加href屬性,所以默認(rèn)情況下鼠標(biāo)放上去不會(huì)變成hand圖形.需要為其添加樣式cursorHand,次樣式的代碼如下:
<style type="text/css">
.cursorHand { cursor:pointer;}
</style>
最關(guān)鍵的是為菜單添加的onclick事件, 此事件調(diào)用ScriptHelper.showDivCommon方法用于顯示圖層.
方法第一個(gè)參數(shù)值為this表示將事件源對(duì)象傳入, 在函數(shù)中會(huì)根據(jù)事件源計(jì)算顯示位置.
方法第二個(gè)參數(shù)表示彈出圖的Id
方法第三個(gè)參數(shù)是可選參數(shù), 用于設(shè)置向下的偏移量.因?yàn)槲覀冇?jì)算的位置是"<a>Menu1</a>"這個(gè)元素的左上角坐標(biāo).需要設(shè)置一個(gè)向下的偏移量.一般設(shè)置為事件源的高度,默認(rèn)為20px.
方法第四個(gè)參數(shù)是可選參數(shù),用于設(shè)置向左的偏移量.原因同上.默認(rèn)為0px;
方法第五個(gè)參數(shù)是可選參數(shù),需要傳入彈出層的高度.如果使用了此屬性則彈出層可能彈出在事件源上方.不傳遞此屬性則始終在事件源下方彈出圖層.
4.效果與完整代碼

image 
完整實(shí)例代碼如下:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>ScriptHelper 類(lèi)測(cè)試頁(yè)面</title>
<script src="http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type="text/javascript" defer="defer"></script>
<style type="text/css">
.cursorHand { cursor:pointer;}
</style>
</head>
<body style="position:relative;">
<div style="height:200px;"></div>
<!-- Main Menu -->
<div >
<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu1', 20, 0, 100)">Menu1</a>
<a class="cursorHand" onclick="ScriptHelper.showDivCommon(this,'subMenu2', 20, 0)">Menu2</a>
<a class="cursorHand" href="#">NoSubMenu</a>
</div>
<!-- Sub Menu 1 -->
<div id="subMenu1" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; margin:0px; padding:5px; height:100px;">
<div>1-1</div>
<div>1-2</div>
</div>
<!-- Sub Menu 2 -->
<div id="subMenu2" style="position:absolute; display:none; background-color:#D7EFCD; border:solid 1px #000000; padding:5px;" >
<div>2-1</div>
<div>2-2</div>
</div>
</body>
</html>

五.注意事項(xiàng):
1.要給Body元素加上position:relative樣式:
<body style="position:relative;">
不增加的話(huà)在IE6下有時(shí)會(huì)出現(xiàn)無(wú)法精確定位事件源的情況.比如在menu的<div>上添加幾個(gè)<br/>,則彈出層的位置就發(fā)生錯(cuò)誤了.
如果在Body元素上增加此樣式仍然彈出位置錯(cuò)誤,則請(qǐng)?jiān)谑录磳?duì)象的容器元素中也添加此樣式
2.不傳遞最后一個(gè)參數(shù)則彈出層只在事件源下面彈出.否則將會(huì)計(jì)算事件源底部的舉例, 如果底部控件不足并且上部控件充足,則彈出層顯示在事件源上方.
3.在頁(yè)面上要添加DOCTYPE元素.不添加的話(huà)很可能在某些瀏覽器中出現(xiàn)錯(cuò)誤.有關(guān)DOCTYPE的作用,請(qǐng)查看下面的文章:
DOCTYPE元素解析
六.總結(jié)
兼容多瀏覽器真的是一件讓人頭疼的事情.我估計(jì)此函數(shù)還是會(huì)有問(wèn)題.本來(lái)想寫(xiě)腳本分析的, 但是在寫(xiě)作的時(shí)候又發(fā)現(xiàn)了一些Bug并且進(jìn)行了修正.兼容來(lái)兼容去最后把自己兼容暈了.其實(shí)如果一個(gè)項(xiàng)目能使用腳本庫(kù)將會(huì)是一個(gè)很好的選擇.本系列文章只是希望構(gòu)建一個(gè)輕量級(jí)的腳本類(lèi)庫(kù).大家使用中有任何問(wèn)題希望多多交流, 一起打造簡(jiǎn)單易用的腳本庫(kù)!

相關(guān)文章

最新評(píng)論