I. Summary
This series of articles is designed to abstract generic, Cross-browser scripting methods.
This article explains the JavaScript functions that pop up floating layers, as well as the principle and usage considerations of functions.
Two. Realize the effect
Using script to eject the floating layer is one of our most common scripting methods. Here is the effect chart:
After clicking on the "Airline" in the picture, a floating layer will be ejected under "airline".
There are quite a few scripts for pop-up boxes on the web, and there are a variety of Third-party JS frameworks available for us to use. But some of these scripts are too simple to simply implement pop-up effects without the flexibility, versatility and cross-browser features. Use the JS framework and some overkill. So after collecting some data, write out the pop-up layer method of the Scripthelper class below.
The main features are:
Multi-browser support
Encapsulating with object-oriented methods
Simple to use, strong versatility.
The function of the calculation position is extracted, all the related functions can be called separately, and can be developed two times according to the specific project.
Three. Scripting methods
Let me first make a contribution to the scripting method and then illustrate how to use it. Finally, explain the principle of the script.
Copy Code code as follows:
/* ==================== scripthelper start ==================== * *
/* Scripthelper script Help object.
Created by: Ziqiu.zhang 2008.3.5
To add a function:
Getscroll (): Get the mouse over the distance-compatible with XHTML
Getclient (): Get the size of the current display area of the browser-compliant XHTML
Showdivcommon (): Displays the layer.
Use examples:
<div id= "Testdiv" style= "display:none; Position:absolute; border:1px #000000; " > I am the test layer I am the test layer </div>
<div style= "width:400px; Text-align:center; " ><div><a href= "#" onclick= "Scripthelper.showdivcommon (This, ' Testdiv ',)" > Event source </a></ Div></div>
*/
function Scripthelper ()
{
}
Get the mouse roll over the distance scrolltop and ScrollLeft
/* Usage and testing:
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};
}
Get the size of the current display area of the browser clientheight and ClientWidth
/* Usage and testing:
var myscroll = Getscroll ();
Alert ("Myscroll.stop:" + myscroll.stop);
Alert ("Myscroll.sleft:" + myscroll.sleft);
*/
ScriptHelper.prototype.getClient = function ()
{
Determine if the page conforms to XHTML standards
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};
}
Show layer, call again to hide
/* Parameter Description:
Sobj: Event Source to eject layer
divID: Layer ID to display
Sobjheight: The height of the event source, defaults to 20. You need to pass it in manually because some element heights cannot be calculated across browsers because the event source object might be a variety of HTML elements.
MoveLeft: The distance that is manually moved to the left. 0 is not moved (default).
Divobjheight: The height of the pop-up layer. If you pass this parameter that is greater than 0, the layer is ejected above the event source if there is insufficient space underneath the event source. If this argument is not passed, it pops up below the event source.
Usage and testing:
<div><a href= "#" onclick= "Scripthelper.showdivcommon (This, ' Testdiv ',)" > Event source </a></div >
*/
ScriptHelper.prototype.showDivCommon = function (Sobj,divid, sobjheight, MoveLeft, Divobjheight)
{
Cancel 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. Set the default value if no parameters are passed in
if (MoveLeft = null)
{
MoveLeft = 0;
}
if (sobjheight = null)
{
Sobjheight = 20;
}
if (divobjheight = null)
{
divobjheight = 0;
}
var divobj = document.getElementById (divID); Get Layer Object
var sobjoffsettop = 0; The vertical distance of the event source
var sobjoffsetleft = 0; The 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
/* Gets the height and width of the event source control. * *
if (swidth = null)
{
Swidth = 100;//cannot be fetched then 100
}
Else
{
Swidth = swidth + 1; Set aside a 1px of distance
}
if (DivObj.style.display.toLowerCase ()!= "None")
{
Hide Layers
DivObj.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; Temporary object used to compute event source coordinates
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 sufficient to hold the pop-up layer, it is displayed above. Otherwise shown below
if (divobjheight>0 && bottomspace < divobjheight && sobjoffsettop >divobjheight)
{
DivObj.style.top = (parseint (sobjoffsettop)-parseint (Divobjheight)-ten). 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";
}
}
Close Layer
/* Parameter Description:
divID: Layer ID to hide
Usage and testing:
Scripthelper.closedivcommon (' Testdiv ');
*/
ScriptHelper.prototype.closeDivCommon = function (divID)
{
//
var divobj = document.getElementById (divID); Get Layer Object
if (divobj!= null)
{
DivObj.style.display = "None";
}
}
Creates an instance object of the Scripthelper class. Global use.
var scripthelper = new Scripthelper ();
/* ==================== Scripthelper End ==================== * *
Four. Use examples
Next we create an HTML page that demonstrates how to use this script. This instance is a menu that displays a submenu layer when clicked.
1. Referencing script files
Save the above code in the Scripthelper.js file. Add a reference to the page:
<script src= "Http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type= "Text/javascript" defer= "defer" >< /script>
2. Write a submenu
Write two submenu layers first.
Copy Code code as follows:
<!--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>
For submenus, the most important thing is to set two styles: position and display.
Position:absolute allows this layer to pinpoint the display. Thus controlling his display position.
The Display:none Jeantou layer is not displayed at load time.
3. Write the main menu
The main menu code is as follows:
Copy Code code as follows:
<!--Main Menu-->
<div >
<a class= "Cursorhand" onclick= "Scripthelper.showdivcommon (This, ' subMenu1 ', 0,)" >Menu1</a>
<a class= "Cursorhand" onclick= Scripthelper.showdivcommon (This, ' subMenu2 ', 0) ">Menu2</a>
<a class= "Cursorhand" href= "#" >NoSubMenu</a>
</div>
We created three menus. where Menu1 and Menu2 have submenus, Nosubmenu do not have submenus.
We used the a element to create the menu object, but because the href attribute was not added to it, the mouse is not turned into a hand graphic by default. You need to add a style cursorhand to it, the secondary style code is as follows:
<style type= "Text/css" >
. Cursorhand {Cursor:pointer}
</style>
The most critical is the OnClick event added for the menu, which calls the Scripthelper.showdivcommon method to display the layer.
Method The first parameter value is this indicates that the event source object is passed in, and the display position is computed from the event source in the function.
Method The second parameter represents the ID of the pop-up diagram
Method The third parameter is an optional parameter that sets the downward offset. Because the position we calculate is the upper-left corner of the "<a>Menu1</a>" element. You need to set a downward offset. Typically set to the height of the event source, the default is 20px.
The fourth parameter of the method is an optional parameter that sets the offset to the left. The reason is as above. The default is 0px;
The fifth parameter of the method is an optional parameter, and the height of the pop-up layer needs to be passed in. If this property is used, the pop-up layer may pop up above the event source. If this property is not passed, the layer is always ejected below the event source.
4. Effect and complete code
The full instance code is as follows:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title>scripthelper Class test Page </title>
<script src= "Http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" type= "Text/javascript" defer= "defer" >< /script>
<style type= "Text/css" >
. Cursorhand {Cursor:pointer}
</style>
<body style= "position:relative;" >
<div style= "height:200px;" ></div>
<!--Main Menu-->
<div >
<a class= "Cursorhand" onclick= "Scripthelper.showdivcommon (This, ' subMenu1 ', 0,)" >Menu1</a>
<a class= "Cursorhand" onclick= Scripthelper.showdivcommon (This, ' subMenu2 ', 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>
Five. Matters needing attention:
1. To add position:relative style to the BODY element:
<body style= "position:relative;" >
No increase in IE6 sometimes there are situations where the event source cannot be precisely positioned. For example, add a few <br/> to the menu's <div>, and the pop-up layer's position is wrong.
Add this style to the container element of the event source object if you add this style to the BODY element and still eject the location error
2. The pop-up layer only pops up below the event source if the last argument is not passed. Otherwise, an example of the bottom of the event source will be computed, and if the bottom control is insufficient and the upper control is sufficient, the pop-up layer appears above the event source.
3. Add the DOCTYPE element to the page. If you do not add it is likely that an error has occurred in some browsers. For the purpose of DOCTYPE, please review the following article:
DOCTYPE element parsing
Six. Summary
Compatible with multiple browsers is really a headache. I guess there's still a problem with this function. I was going to write a script analysis, But some bugs were found and corrected while writing. Compatibility to the end of the compatibility of their own dizzy. In fact, if a project can use the script library will be a good choice. This series of articles just wants to build a lightweight script class library. There are any questions you would like to communicate with. Create a simple and Easy-to-use script library together!
