Javascript public script library series (1): Pop-up layer script_javascript skills

1. Summary
This series of articles is to abstract common, cross-browser scripting methods.

This article explains the javascript function that pops up the floating layer, as well as the principle and function of the function. Precautions for use.

2. Achieving the effect
Using a script to pop up the floating layer is one of our most commonly used scripting methods. The following is the rendering:

After clicking "Airline" in the picture, a floating layer will pop up under "Airline".

There are quite a lot of scripts for pop-up boxes on the Internet , and there are various third-party JS frameworks available for us to use. However, some of the scripts are too simple, only roughly achieving the pop-up effect and ignoring flexibility, versatility and cross-browser features. Using JS frameworks is a bit of a waste. It’s a good idea. So after collecting and sorting out some information, I wrote the pop-up layer method of the ScriptHelper class below.

The main features are:
Supports multiple browsers
Using object-oriented method encapsulation
Easy to use and highly versatile.
Extract functions such as calculating position. All related functions can be called separately, and secondary development can be continued according to specific projects.
3. Script method
Below I will first contribute the script method, and then give examples of how to use it. Finally, I will explain the principle of the script.

Copy codeThe code is as follows:

/* ==================== ScriptHelper 开始 ==================== */
/* scriptHelper 脚本帮助对象.
创建人: ziqiu.zhang 2008.3.5
添加函数:
getScroll():得到鼠标滚过的距离-兼容XHTML
getClient():得到浏览器当前显示区域的大小-兼容XHTML
showDivCommon():显示图层.
使用举例:

我是测试图层我是测试图层

事件源

*/
function scriptHelper()
{
}

// 得到鼠标滚过的距离 scrollTop 与 scrollLeft
/* 用法与测试:
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};
}
// 得到浏览器当前显示区域的大小 clientHeight 与 clientWidth
/* 用法与测试:
var myScroll = getScroll();
alert("myScroll.sTop:" + myScroll.sTop);
alert("myScroll.sLeft:" + myScroll.sLeft);
*/
scriptHelper.prototype.getClient = function ()
{
//判断页面是否符合XHTML标准
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};
}

// 显示图层,再次调用则隐藏
/* 参数说明:
sObj : 要弹出图层的事件源
divId : 要显示的图层ID
sObjHeight : 事件源的高度,默认为20.需要手工传入是因为对于由于事件源对象可能是各种HTML元素,有些元素高度的计算无法跨浏览器通用.
moveLeft : 手工向左移动的距离.不移动则为0(默认).
divObjHeight: 弹出层的高度.如果传入大于0的此参数, 则当事件源下方空间不足时,在事件源上方弹出层.如果不传此参数则一直在事件源下方弹出.
用法与测试:

事件源

*/
scriptHelper.prototype.showDivCommon = function (sObj,divId, sObjHeight, moveLeft, divObjHeight)
{
//Cancel the bubbling event
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;
}
//Parameter detection. If no parameters are passed in, set the default value
if( moveLeft == null )
{
moveLeft = 0;
}
if( sObjHeight == null )
{
sObjHeight = 20;
}
if(divObjHeight == null)
{
divObjHeight = 0;
}

var divObj = document.getElementById(divId); //Get the layer object
var sObjOffsetTop = 0; //Vertical distance of event source
var sObjOffsetLeft = 0; //Horizontal distance of event source
var myClient = this.getClient();
var myScroll = this.getScroll();
var sWidth = sObj.width; //Width of the event source object
var sHeight = sObjHeight; //Height of the event source object
var bottomSpace; //Distance from the bottom
/* Get The height and width of the event source control.*/
if( sWidth == null )
{
sWidth = 100;//If it cannot be obtained, it is 100
}
else
{
sWidth = sWidth 1; //leave 1px distance
}

if( divObj.style.display.toLowerCase() != "none" )
{
/ /Hide layer
divObj.style.display = "none";
}
else
{
if( sObj == null )
{
alert("event The source object is null");
return false;
}
/* Get the offset of the event source object*/
var tempObj = sObj; //Temporary used to calculate the event source coordinates Object
while( tempObj && tempObj.tagName.toUpperCase() != "BODY" )
{
sObjOffsetTop = tempObj.offsetTop;
sObjOffsetLeft = tempObj.offsetLeft;
tempObj = tempObj. offsetParent;
}
tempObj = null;

/* Get the distance from the bottom*/
bottomSpace = parseInt(myClient.clientHeight) - ( parseInt(sObjOffsetTop) - parseInt(myScroll. scrollTop)) - parseInt(sHeight);
/* Set the layer display position*/
//If there is insufficient space below the event source and the upper control is enough to accommodate the pop-up layer, it will be displayed above. Otherwise, it will be displayed below
if( divObjHeight>0 && bottomSpace < divObjHeight && sObjOffsetTop >divObjHeight )
{
divObj.style.top = ( parseInt( sObjOffsetTop ) - parseInt( divObjHeight ) - 10).toString() "p x ";
}
else
{
divObj.style.top = ( parseInt( sObjOffsetTop ) parseInt( sHeight ) ).toString() "px";
}
divObj. style.left = ( parseInt( sObjOffsetLeft ) - parseInt( moveLeft ) ).toString() "px";
divObj.style.display="block";
}
}

// Close the layer
/* Parameter description:
divId: ID of the layer to be hidden
Usage and testing:
ScriptHelper.closeDivCommon('testDiv');
*/
scriptHelper.prototype.closeDivCommon = function (divId)
{
//
var divObj = document.getElementById(divId); //Get the layer object
if( divObj != null )
{
divObj.style.display = "none";
}
}
//Create an instance object of the scriptHelper class. Use it globally.
var ScriptHelper = new scriptHelper() ;
/* ==================== ScriptHelper end ==================== */

4. Usage Example
Next we create an HTML page to demonstrate how to use this script. This example is a menu that displays a submenu layer when clicked.
1. Reference the script file
Save the above code in the ScriptHelper.js file. Add a reference to the page:

2. Write submenus
First write two submenu layers.

Copy code The code is as follows:

1 -1

1-2

2-1

2-2

For submenus, the most important thing is to set two styles: position and display.
position:absolute allows this layer to be accurately positioned and displayed, thereby controlling its display position.
display:none allows the layer not to be displayed when loading.
3. Write the main menu
main menu code As follows:

Copy code The code is as follows:

Menu1
Menu2
NoSubMenu

We created three menus. Among them Menu1 and Menu2 Has a submenu, NoSubMenu does not have a submenu.
We used the a element to create the menu object, but because no href attribute was added to it, by default it will not turn into a hand graphic when the mouse is placed on it. You need to add the style cursorHand to it , the code of the sub-style is as follows:

The most important thing is for the menu Added onclick event, this event calls the ScriptHelper.showDivCommon method to display the layer.
The first parameter value of the method is this, which means that the event source object is passed in, and the display position is calculated based on the event source in the function.
The second parameter of the method represents the Id of the pop-up image
The third parameter of the method is an optional parameter, used to set the downward offset. Because the position we calculate is "Menu1 "The coordinates of the upper left corner of this element. A downward offset needs to be set. Generally set to the height of the event source, the default is 20px. The fourth parameter of the
method is an optional parameter, used to set the left offset. Shift amount. The reason is the same as above. The default is 0px; the fifth parameter of the
method is an optional parameter and needs to be passed in the height of the pop-up layer. If this attribute is used, the pop-up layer may pop up above the event source. Do not pass this attribute The layer will always pop up below the event source.
4. Effect and complete code

The complete example code is as follows:

Copy code The code is as follows: