This article explains the javascript Functions on the floating layer and the principles and precautions of the functions.
I. Summary
This series of articles aims to abstract common, cross-Browser Scripting methods.
This article explains the javascript Functions on the floating layer and the principles and precautions of the functions.
II. Implementation results
Using the script to pop up the floating layer is one of our most common script methods. The following is:
Click "Airline" in the figure and a floating layer will pop up under "Airline.
There are a lot of scripts in the pop-up box on the Internet, and there are various third-party JS frameworks available for us. however, some of the scripts are too simple. They just roughly implement the pop-up effect and ignore the flexibility, versatility, and cross-browser features. using the JS framework, some of them use a cool tool. after collecting and sorting out some information, I wrote the pop-up method of the ScriptHelper class below.
Main features include:
Support for multiple browsers
Use object-oriented method Encapsulation
Easy to use and versatile.
Extract the computing location and other functions. All related functions can be called independently. You can continue secondary development based on the specific project.
Iii. Script Method
Next, I will first contribute the script method, and then give an example of how to use it. Finally, I will explain the script principle.
The Code is as follows:
/* ============================== ScriptHelper start ====================== ==== */
/* ScriptHelper script help object.
Created by: ziqiu. zhang 2008.3.5
Add function:
GetScroll (): Get the distance from mouse rolling-compatible with XHTML
GetClient (): Get the size of the current display area of the browser-compatible with XHTML
ShowDivCommon (): Display layer.
Example:
I'm a test layer. I'm a test layer.
Event Source
*/
Function scriptHelper ()
{
}
// Obtain the distance between scrollTop and scrollLeft
/* Usage and test:
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.doc umentElement. scrollTop )? Document. body. scrollTop: document.doc umentElement. scrollTop;
If (isNaN (scrollTop) | scrollTop <0) {scrollTop = 0 ;}
ScrollLeft = (document. body. scrollLeft> document.doc umentElement. scrollLeft )? Document. body. scrollLeft: document.doc umentElement. scrollLeft;
If (isNaN (scrollLeft) | scrollLeft <0) {scrollLeft = 0 ;}
Return {scrollTop: scrollTop, scrollLeft: scrollLeft };
}
// Obtain the clientHeight and clientWidth of the current display area of the browser.
/* Usage and test:
Var myScroll = getScroll ();
Alert ("myScroll. sTop:" + myScroll. sTop );
Alert ("myScroll. sLeft:" + myScroll. sLeft );
*/
ScriptHelper. prototype. getClient = function ()
{
// Determine whether the page meets the XHTML Standard
Var isXhtml = true;
If (document.doc umentElement = null | document.doc umentElement. clientHeight <= 0)
{
If (document. body. clientHeight> 0)
{
IsXhtml = false;
}
}
This. clientHeight = isXhtml? Document.doc umentElement. clientHeight: document. body. clientHeight;
This. clientWidth = isXhtml? Document.doc umentElement. clientWidth: document. body. clientWidth;
Return {clientHeight: this. clientHeight, clientWidth: this. clientWidth };
}
// Display the layer, which is hidden when called again
/* Parameter description:
SObj: Event source for the layer to be popped up
PId: ID of the layer to be displayed
SObjHeight: the height of the event source. The default value is 20. You need to manually input it because the event source object may be a variety of HTML elements, and the calculation of the height of some elements cannot be used across browsers.
MoveLeft: the distance to move manually to the left. If it is not moved, it is 0 (default ).
PObjHeight: the height of the pop-up layer. if this parameter is input greater than 0, a layer is displayed on the event source when the space below the event source is insufficient. if this parameter is not set, it is always displayed below the event source.
Usage and test:
Event Source
*/
ScriptHelper. prototype. showDivCommon = function (sObj, pId, sObjHeight, moveLeft, pObjHeight)
{
// Cancel the bubble 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 parameter is input, the default value is set.
If (moveLeft = null)
{
MoveLeft = 0;
}
If (sObjHeight = null)
{
SObjHeight = 20;
}
If (pObjHeight = null)
{
PObjHeight = 0;
}
Var pObj = document. getElementById (pId); // get the layer object
Var sObjOffsetTop = 0; // vertical distance of the event Source
Var sObjOffsetLeft = 0; // horizontal distance of the event Source
Var myClient = this. getClient ();
Var myScroll = this. getScroll ();
Var sWidth = sObj. width; // The width of the event source object
Var sHeight = sObjHeight; // The height of the event source object
Var bottomSpace; // distance from the bottom
/* Obtain the height and width of the event source control .*/
If (sWidth = null)
{
SWidth = 100; // The value is 100 if it cannot be obtained.
}
Else
{
SWidth = sWidth + 1; // leave the 1px distance
}
If (pObj. style. display. toLowerCase ()! = "None ")
{
// Hide the Layer
PObj. style. display = "none ";
}
Else
{
If (sObj = null)
{
Alert ("event source object is null ");
Return false;
}
/* Get the offset of the event source object */
Var tempObj = sObj; // a temporary object used to calculate the coordinates of the event Source
While (tempObj & tempObj. tagName. toUpperCase ()! = "BODY ")
{
SObjOffsetTop + = tempObj. offsetTop;
SObjOffsetLeft + = tempObj. offsetLeft;
TempObj = tempObj. offsetParent;
}
TempObj = null;
/* Obtain the distance from the bottom */
BottomSpace = parseInt (myClient. clientHeight)-(parseInt (sObjOffsetTop)-parseInt (myScroll. scrollTop)-parseInt (sHeight );
/* Set the layer display position */
// If there is not enough space at the bottom of the event source and the upper control is sufficient to accommodate the pop-up layer, it will be shown above. Otherwise, it will be shown below.
If (pObjHeight> 0 & bottomSpace <pObjHeight & sObjOffsetTop> pObjHeight)
{
PObj. style. top = (parseInt (sObjOffsetTop)-parseInt (pObjHeight)-10). toString () + "px ";
}
Else
{
PObj. style. top = (parseInt (sObjOffsetTop) + parseInt (sHeight). toString () + "px ";
}
PObj. style. left = (parseInt (sObjOffsetLeft)-parseInt (moveLeft). toString () + "px ";
PObj. style. display = "block ";
}
}
// Close the Layer
/* Parameter description:
PId: ID of the layer to be hidden
Usage and test:
ScriptHelper. closeDivCommon ('testdiv ');
*/
ScriptHelper. prototype. closeDivCommon = function (pId)
{
//
Var pObj = document. getElementById (pId); // get the layer object
If (pObj! = Null)
{
PObj. style. display = "none ";
}
}
// Create an Instance Object of the scriptHelper class. It is used globally.
Var ScriptHelper = new scriptHelper ();
/* ============================== ScriptHelper end ====================== ==== */
Iv. Examples
Next, we will create an HTML page to demonstrate how to use this script. This instance is a menu and a sub-menu layer will be displayed when you click it.
1. reference the script file
Save the above Code in the ScriptHelper. js file. add reference to the page:
