Use the popup window to create an infinitely webpage menu (3)

Source: Internet
Author: User
In addition to displaying the menu, it is critical that the menu can execute actions. Popup is a subwindow, although it does not have opener. There are two ways to execute the script in popup: Code Write it to its document to run it, for example:

VaR Win = Window;

VaR Doc = Win.doc ument;

VaR Popup = Win. createpopup ();

VaR Popwin = Popup.doc ument. parentwindow;

VaR Popdoc = Popwin.doc ument;



Popdoc. Write (' < Script > Function Showalert () {alert ( " A " );} < ' + ' / Script > < Div onclick = " Showalert () " > Click me </ Div > ');

Popup. Show ( 0 , 0 , 100 , 100 );

In this way, you can click "Click me" in the pop-up popup to create an alert MSG box.

Another method is to use attachevent, so that popup can execute scripts in its opener window, such:
Popdoc. Write (' < Div > Click me </ Div > ');

VaR Div = Popdoc. getelementsbytagname ('div ')[ 0 ];

Div. attachevent ('onclick', alert3 );

Popup. Show ( 0 , 0 , 100 , 100 );

Scirpt method in the opener window:
FunctionAlert3 () {alert (3);}

In the second method, there is an uninitialized ented feature,When the Event Response Function Using the attachevent method attach is triggered, the first parameter is the event attribute on its window by default.Why is it in its window? Because popup is indeed an element with its own window object (although we have mentioned it as weird ). This feature is well used in the Response Processing When a menu entry is clicked, and is used in the menu. Show () and menu. showex.

As we mentioned at the end of using (2), the use of appendchild on the doucment object of popup has a problem with the UI effect, therefore, we have to use the innerhtml value assignment method to generate the ui html code for displaying menus. There is no connection between such code and the menu class written in Javascript. to re-establish this connection, we used a global hashtable-like class _ menucache _ to store the one-to-one relationship between the menu logic and ui html. This method was not created by me, it is the method in DHTML menu 4 Implemented by Erik Arvidsson. I borrowed it and thought it was quite good.

VaR _ Menucache __ =

{

M_count: 0 ,

M_idprefix: " _ Menuobject __ " ,

M_activeitem: Null ,


Newid: Function ()

{

Return   This . M_idprefix +   This . M_count ++ ;

},


Remove: Function (MI)

{

Delete   This [MI. m_id];

}

};


Although I have read Eric's menu4 code, I can only say that _ menucache _ is a bright spot in it, while other parts are really messy, after all, his menu class lasted two years, during which he fixed multiple bugs. Of course, the implementation of this menu is naturally a little bit standing on the shoulders of giants.

Besides, Eric's JavaScript level is beyond doubt, including the rich DHTML component classes on webfx.eae.net and bindows, which are even more shocking.But what makes me think is even more valuable is the detailed tutorials on webfx. After reading his tutorials, I made a prototype of menu one night, now we have completed all the functions of the menu part of DHTML menu 4 in one week. (I have not done this part of menubotton because it is unavailable for the time being ). Originally, I could simply get the code done right away, and it may be even more popular. However, I think I will introduce in detail the implementation process of this popmenu and some problems encountered during the process, so that those who learn it will learn more, at the same time, I also urged myself to study and work more practically. It would be even more fun for me to find out the mistakes and shortcomings in my methods and give suggestions.

To be continued...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.