Using menus on the Web can greatly save the page space, and it is also consistent with the UI operation experience inherited from Windows. In the previous web page menu design, we generally use div nested table to implement menus. The most critical problem with such menus is that they will be overwritten by <select>. To solve this problem, we can hide all drop-down lists on the page while displaying the layers menu, and then display them when the menu disappears. Although this method can solve the problem, after optimization, it can only hide the list box that intersection the drop-down list box, but these solutions are not perfect. There are also some minor issues, which are difficult to locate the menu, because when <div> is displayed, you can scroll the page with the mouse wheel, in this way, do you want to synchronize the <div> menu and page scrolling? If you don't want it, the page is rolled away, and the menu is still displayed in a location that is irrelevant to you. If you want to synchronize data, the nightmare is that the scrolling area is not necessarily the <body> area. It may also be something similar to <div style = "overflow: auto "> <div>, it is very troublesome to calculate the menu position.
The webpage menu implemented by Popup will completely solve the problem encountered when <div> is used as a menu container. The Popup window is a new feature provided by IE5.5 and later versions. What is popup? To put it simply, popup is actually a pop-up window with the following features (described by MSDN ):
· The popup window is automatically closed when the user clicks any place outside of it or another popup is opened;
· Popup cannot obtain the focus when it is displayed, so the user's focused operation will continue to be executed in its parent window;
· DHTML that makes up popup can be stored in its parent document or other document elements;
· The popup window does not support editing box elements such as text boxes;
· The elements in the popup window cannot be selected;
· Cannot navigate in the popup window (click the connection in popup, and the updated content cannot be displayed in this popup );
· Once displayed, the popup window cannot be moved or resize.
Here, MSDN is not complete, and some are not very accurate. The popup window has several important features. It can be out of the browser's window range and will not be blocked by the drop-down box, flash, IFrame and other elements. In fact, the content in popup can be selected. I don't know what it means that MSDN cannot choose ?. As for MSDN, it is also a problem that popup cannot get focus. In fact, the edit box controls in popup cannot get focus, while other non-editable controls can get focus. When popup is displayed, the IE main window cannot obtain the onmousewheel event of the mouse.
Some of these features indicate that the popup window is very suitable for making pop-up menus, and because the files in the IE window cannot be moved when the popup window is displayed, in this way, the location synchronization problem of the context menu does not exist, because after all, the popup window cannot be moved (the move position requires hide to be re-displayed in the new position), which is quite annoying.
There are two problems to solve when using the popup window to create an unlimited menu: one is to display multiple Popup windows in one IE, the second is to capture some events in the window and execute the script process. When MSDN describes the features of the popup window, the first one says that as long as another popup window is opened, the previously displayed popup window will be closed automatically. What should I do now? However, since we have all said that we want to implement an unlimited menu, there are still some solutions. For popup, the usage is actually very simple. It only contains two methods: hide () and show (...), and two attributes: document and isOpen. Specified ument. the createPopup method of parentWindow. The popup window generated by parentWindow does not close the previously displayed popup window, and you can continue to enable child popup for the new popup. After studying this problem, we will find some weird aspects of implementing popup in IE (of course, these are not very relevant to implementing this menu, but we just feel confused ).
For example, in an IE window, var popup = window. createPopup (); var win = popup.doc ument. parentWindow; we will find window! = Win. Multiple popups can coexist. This inequality is understandable, but when we call win. resizeTo (...) we found that the parent IE window was resize. Similarly, we select all in popup, and the result is that all content in the parent IE window is selected @_@...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
