Javascript common script Library Series (4) Improved pop-up layer scripts

ArticleDirectory

• Implementation ideas:
• Implementation Code:

This article is transferred from: Http://www.cnblogs.com/zhangziqiu/archive/2009/02/24/javascriptLibrary-4.html I. Summary

This article does not add a new method for the lightweight script library constructed in the series, but improves the original method for popping up the floating layer. the function used to obtain the position in the other method is reconstructed. The IFRAME overlay layer is automatically added for the pop-up layer to implement the <SELECT> Control Under IE6. it is also a record of your learning process in this series of articles.

Ii. Questions about how the pop-up layer cannot cover the select

There is a bug in IE6: If the pop-up layer is a div and there is a <SELECT> drop-down box control under the pop-up layer, the select control cannot be overwritten no matter how the Z-index value is set.:

There are currently two solutions:

1. The select control is hidden when a layer is displayed.

I personally think this method is ineffective and is not universal.

2. Add an IFRAME under the pop-up layer

In IE6, the select control is considered as a window-level element. therefore, you can use IFRAME, which is also a window-level element, to overwrite the select control. Note that you must set the zindex value of IFRAME to be greater than the select control.

There are many ways to add IFRAME. for example, add an IFRAME with the DIV width and Div Border width in the pop-up layer (to cover the pop-up layer border ), or add a transparent IFRAME on the page and control the synchronous display between firame and the pop-up layer.

Iii. Implementation of scripthelper in simplified version

Because we are building a general lightweight script library, I do not want to add a special IFRAME element on the page to use the script library. in addition, you do not want to add an IFRAME element to all the pop-up layers, becauseCodeTherefore, by improving the showdivcommon and closedivcommon layers, you can dynamically add IFRAME and hide IFRAME.

Implementation ideas:

1. dynamically Add a div to the body element for each pop-up layer. The DIV contains an IFRAME element. when the pop-up layer is displayed, set the IFRAME to the same position and length and width as the pop-up layer. The zindex value is pop-up layer-1. When the pop-up layer is closed, the IFRAME is also hidden.

2. The Container Div of IFRAME and IFRAME is created in the first pop-up, and will not be re-created after it is popped up or closed.

3. Each pop-up layer has a corresponding IFRAME to meet the needs of multiple pop-up layers popped up at the same time on a page.

Implementation Code:

The showdivcommon and closedivcommon methods after modification:

 // Display the layer, which is hidden when called again  /* Parameter description:  Sobj: Event source for the layer to be popped up  Divid: ID of the layer to be displayed Movetop: the offset of manual downward movement. If it is not moved, it is 0 (default ).  Moveleft: the distance to move manually to the left. If it is not moved, it is 0 (default ).    Usage and test:  <Div> <a href = "#" onclick = "scripthelperv2.showdivcommon (this, 'testdiv ', 20, 20)"> event source </a> </div>  */ Scripthelperv2.prototype. showdivcommon = Function (Sobj, divid, movetop, moveleft ){ // Cancel the bubble event      If ( Typeof (Window )! = 'Undefined' & Window! = Null & Window. Event ! =Null ) {Window. Event . Cancelbubble = True ;} Else   If (Scripthelperv2.showdivcommon. Caller. Arguments [0]! = Null ) {Scripthelperv2.showdivcommon. Caller. Arguments [0]. cancelbubble = True ;} // Parameter detection. If no parameter is input, the default value is set.      If (Moveleft = Null ) {Moveleft = 0 ;} If (Movetop = Null ) {Movetop = 0 ;}VaR Divobj = Document. getelementbyid (divid ); // Obtain the pop-up layer object      VaR Sobjoffsettop = 0; // Vertical distance of the event Source      VaR Sobjoffsetleft = 0; // Horizontal distance of the event Source      VaR Position = This . Getposition (sobj ); // Get the offset of the event source object      VaR Myclient = This . Getclient (); // Obtain the screen size      VaR Myscroll = This . Getscroll ();// Obtain the example of scroll bar      VaR Swidth = sobj. offsetwidth! = Null ? Parseint (sobj. offsetwidth): 0; // The width of the event source object      VaR Sheight = sobj. offsetheight! = Null ? Parseint (sobj. offsetheight): 20; // Height of the event source object      VaR Popdivwidth = 0; // The width of the pop-up layer      VaR Popdivheight = 0; // The height of the pop-up layer      VaR Bottomspace; // Distance from the bottom      VaR Iframedivid ="Tempiframediv" + Divid; // ID of the DIV where IFRAME is located      VaR Iframeid = "Tempiframe" + Divid; // IFRAME ID      VaR Iframediv = Document. getelementbyid (iframedivid ); // Div object where IFRAME is located      VaR IFRAME = Document. getelementbyid (iframeid ); // IFRAME object      If (Divobj. style. display. tolowercase ()! = "None" ){ // Hide the Layer Divobj. style. Display = "None" ;// Hide IFRAME          If (IFRAME! = Null ) {IFRAME. style. Display = "None" ;} If (Iframediv! = Null ) {Iframediv. style. Display = "None" ;}} Else { If (Sobj = Null ) {Alert ( "The Event source object is null" ); Return   False ;}// Display the layer to obtain the length and width of the pop-up layer. Divobj. style. Display = "Block" ; Popdivwidth = divobj. offsetwidth! = Null ? Parseint (sobj. offsetwidth): 0; // Pop-up Layer Width Popdivheight = divobj. offsetheight! = Null ? Parseint (divobj. offsetheight): 0; // The height of the pop-up layer          /* Obtain the distance from the bottom */ Bottomspace = parseint (myclient. clientheight)-(parseint (position. offsettop)-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 (Popdivheight> 0 & bottomspace <popdivheight & position. offsettop> popdivheight) {divobj. style. top = (parseint (position. offsettop)-parseint (popdivheight )). tostring () + "PX" ;} Else {Divobj. style. Top = (parseint (position. offsettop) + parseint (sheight). tostring () + "PX" ;} Divobj. style. Left = (parseint (position. offsetleft)-parseint (moveleft). tostring () + "PX" ;} // If the covered IFRAME layer does not exist, it is created      If (IFRAME = Null ){ // Some attributes cannot be controlled after nodes are added using DOM in IE6. Therefore, put IFRAME in a div so that you can add them using HTML writing.         VaR Tempiframediv = Document. createelement ( "Div" ); Tempiframediv. setattribute ( "ID" , Iframedivid); document. Body. appendchild (tempiframediv ); VaR Iframestring = "<IFRAME id = \"" + Iframeid + "\" Style = \ "position: absolute; display: none; border-width: 0px; \"> </iframe>" ; Tempiframediv. innerhtml = iframestring; IFRAME = Document. getelementbyid (iframeid); iframediv = Document. getelementbyid (iframedivid );} // Use the cover layer to cover the Select Control      If (IFRAME! = Null & Iframediv! =Null ) {Iframediv. style. Display = "Block" ; IFRAME. style. Top = divobj. style. Top; IFRAME. style. Left = divobj. style. Left; IFRAME. style. width = divobj. offsetwidth. tostring () + "PX" ; IFRAME. style. Height = divobj. offsetheight. tostring () + "PX" ; IFRAME. style. Display = "Block" ; IFRAME. style. zindex = divobj. style. zindex-1 ;}}

 // Close the Layer  /* Parameter description:  Divid: ID of the layer to be hidden    Usage and test: Scripthelperv2.closedivcommon ('testdiv ');  */ Scripthelperv2.prototype. closedivcommon = Function (Divid ){ VaR Iframedivid = "Tempiframediv" + Divid; // ID of the DIV where IFRAME is located      VaR Iframeid = "Tempiframe" + Divid; // IFRAME ID          VaR Divobj = Document. getelementbyid (divid ); // Obtain the layer object      If (Divobj! = Null ) {Divobj. style. Display ="None" ;} VaR IFRAME = Document. getelementbyid (iframeid ); If (IFRAME! = Null ) {IFRAME. style. Display = "None" ;} VaR Iframediv = Document. getelementbyid (iframedivid ); If (Iframediv! = Null ) {IFRAME. style. Display = "None" ;}}

 

IV. Other improvements

Compared with the method in the first version of this series of articles, the showdivcommon method has made the following improvements:

1. Abstract The Method for Calculating coordinates:

 // Get the offset coordinate of the object relative to the body object. Add position: relative to the body element, and ensure that no parent element has position: relative. /* Parameter description:  Sobj: Event source for the layer to be popped up    Usage and test:  VaR sobj = Document. getelementbyid ("divid ");  VaR position = scripthelperv2.getposition (sobj );  VaR sobjoffsettop = parseint (position. offsettop );  VaR sobjoffsetleft = parseint (position. offsetleft );  */ Scripthelperv2.prototype. getposition = Function (Sobj ){ VaR Sobjoffsettop = 0; // Vertical distance of the event Source      VaR Sobjoffsetleft = 0; // Horizontal distance of the event Source     /* Get the offset of the event source object */      VaR Tempobj = sobj; // Temporary object used to calculate event source coordinates      While (Tempobj & tempobj. tagname. touppercase ()! = "Body" ) {Sobjoffsettop + = tempobj. offsettop; sobjoffsetleft + = tempobj. offsetleft; tempobj = tempobj. offsetparent;} tempobj = Null ; Return {Offsettop: sobjoffsettop, offsetleft: sobjoffsetleft };}

2. due to the shallow experience, we thought we could not get the height and width of the object. After learning, we found that we can use offsetwidth and offsetheight to get the value. therefore, the showdivcommon parameter is further standardized. now, the coordinates used by only two parameters are correctly calculated:

    A   class   =" cursorhand "  onclick   = "scripthelperv2.showdivcommon (this, 'submenu1 '); "   menu1    A    

 

V. Instance

Original scripthelper implementation results:

New scripthelperv2 implementation: note that the select control has been overwritten

Instance code:

<! 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 class test page-showdivcomon display pop-up layer method </title> <! -- <SCRIPT src = Http://files.cnblogs.com/zhangziqiu/ScriptHelper.js" Type = "Text/JavaScript" > </SCRIPT> --> <SCRIPT src = Http://files.cnblogs.com/zhangziqiu/ScriptHelperV2.js" Type = "Text/JavaScript" > </SCRIPT> <style type = "Text/CSS" >. Cursorhand {cursor: pointer ;}</style>  "Position: relative ;" > <Div style = "Height: 300px ;" > </Div> <! -- Main menu --> <div> < Class = "Cursorhand" Onclick = "Scripthelperv2.showdivcommon (this, 'submenu1 ');" > Menu1 </a> </div> <select id = "Select1" Style = "Z-index: 1 ;" > <Option> 123 </option> <option> 456 </option> </SELECT> </div> <! -- Sub menu 1 --> <Div id ="Submenu1" Style = "Position: absolute; display: none; Background-color: # d7efcd; Border: solid 1px #000000; margin: 0px; padding: 5px; width: 200px; Z-index: 100 ;" > <Div> SubMent-1 </div> <div> SubMent-2 </div> <div> SubMent-3 </div> <div> SubMent-4 </div> <div> SubMent-5 </div>> <div> SubMent-6 </div> </body> 

 
 
 
6. Packaging
 
Http://files.cnblogs.com/zhangziqiu/TestScriptHelper_ShowDivComon.rar
 

 
Javascript file:
 

 
Http://files.cnblogs.com/zhangziqiu/ScriptHelperV2.js
 
7. related experience and skills

 

 
  
 
   
The width of a li object is set to 100px or the UL width of the Li container is 100px. In Firefox, The offsetwidth of Li is always 100, and the excess content is not automatically extended, even if overflow: visible is set, the excess content is displayed only outside of Li. the solution is to add another span object to the Li object to place the content text. In this case, the offsetwidth of the span object is the content length instead of the Li length.
 
   
Use document. although the object can be obtained in IE6, the width and height of the object created by the createelement method cannot be set. that is to say, createelement can be used in both IE and FF, but to dynamically create a tag and set its width and height, such as <IFRAME>, you can write HTML code, after writing, you can get the object and set its width and height.
 
   
A Div contains an IFRAME. When you close the DIV, you must first disable IFRAME before closing the Div. Otherwise, IFRAME cannot be closed in IE6.
 
  
 

 
8. Summary
 
This article does not have much technical content. Please forgive me. I learned new knowledge in the improvement process and hope to make progress with the birds.
 
Author: Zhang Ziqiu

Source: http://www.cnblogs.com/zhangziqiu/

The copyright of this article is shared by the author and the blog Park. You are welcome to repost this article. However, you must retain this statement without the author's consent and provide a clear link to the original article on the article page. Otherwise, you will be held legally liable.