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

Code The Framework has all been listed in (4), and now the job is to complete them by process. Originally, the implementation of a prototype menu class only requires a maximum of 300 lines of code, but after some operation habits support and UI display optimization, the Code soared to more than 1000 lines. However, the final version seems to be much better than the prototype.

In order to intuitively explain the role of the code, I will start with the display of the menu. To display a menu, you must create an instance with a menu. The complete code for building an instance is as follows: < Div Oncontextmenu = "Return showcontextmenu (this );" Style = "Width: 200; Height: 200; Border: solid 1px blue ;" >
< Table Width = "100%" Height = "100%" Border = "0" >
< Tr >
< TD Valign = "Middle" Align = "Center" >
Right click me
</ TD >
</ Tr >
</ Table >
</ Div > < Script Language = "JavaScript" >
Function Showcontextmenu (elmt)
{
If ( ! Elmt. contextmenu)
{
Elmt. contextmenu = Createcontextmenu ();
}
VaR Win = Window;
Elmt. contextmenu. Show (WIN );
Return   False ;
}
Createmenu # Region Createmenu
Function Createcontextmenu ()
{
VaR Menu =   New Menu ();
For ( VaR I = 1 ; I <   6 ; I ++ )
{
VaR Mi =   New Menuitem ('menu item 1 - ' + I, alert );
Menu. Add (MI );
}
VaR Submenu =   New Menu ();
For ( VaR I = 1 ; I <   5 ; I ++ )
{
VaR Mi =   New Menuitem ('menu I & TEM 3 - ' + I, alert );
Submenu. Add (MI );
}
VaR Submenu2 =   New Menu ();
Submenu2.add ( New Menuitem (' & Menu item 2 - 1 ', Null , Null , Null , Submenu ));
VaR Mi2 =   New Menuitem ('me & Nu item 1 - 6 ', Alert, 'images / Paste.small.png ', Null , Submenu2 );
Menu. addat (mi2, 2 );
Return Menu;
}
# Endregion
</Script>

Context Menu effect generated

This is a context menu generated by manually adding menu entries. At last, a menu data is automatically parsed to generate menus.

Now let's take a look at the menu. Prototype. Show (WIN) method. This is the menu's Level 1 Display method, which is called by the user, because the menu needs to be located at the user-specified position (the user-specified position of the contextmenu is the location where the mouse clicks ). After the first level is displayed in the menu, subsequent sub-menus are displayed in the menu class. The sub-menu position is relative to the parent menu, the subsequent logic is encapsulated in the menu class. The show () method code is as follows: Menu. Prototype. Show =   Function (WIN)
{
If ( ! Win)
{
Return ;
}
VaR Menuobj =   This ;
Menuobj. m_opener = Win;
Menuobj. _ resumeitem ();
VaR Win = Menuobj. m_opener;
VaR Popup, popwin, popdoc;
// Determine whether the menu container popup is created
If ( ! Menuobj. m_popup)
{
Popup = Win. createpopup ();
Popup.doc ument. Body. bgcolor = 'Windowtext ';
Popup.doc ument. Body. style. backgroundcolor = 'Window ';
Menuobj. m_popup = Popup;
}
Else
{
Popup = Menuobj. m_popup;
Menuobj. _ resumeall ();
}
Popdoc = Popup.doc ument;
Popwin = Popdoc. parentwindow;
// Determine whether to re-paint the menu content
If (Menuobj. m_invalidate |   ! Menuobj. m_drawn)
{
Popdoc. Body. innerhtml = Menuobj. Render (). outerhtml;
// Popdoc. Body. appendchild (menuobj. Render ());
Menuobj. m_invalidate =   False ;
Menuobj. m_drawn =   True ;
}
// Obtain the main table of the menu (the menu is implemented using the table)
VaR Menuhtml = Popup.doc ument. getelementbyid ('menu ');
// This show is called only to measure the bounds of the menu.
Popup. Show ( 0 , 0 , 1 , 1 );
VaR W = Popdoc. Body. scrollwidth;
//Determine whether the text display width of the menu bar is within the permitted range,
// If the permission is exceeded, ellipsis processes and returns the width of the new menuitem.
W =   This . _ Isellipsis ( This , Menuhtml );
VaR H = Popdoc. Body. scrollheight;
VaR X = Win. event. clientx + Win. screenleft;
VaR Y = Win. event. clienty + Win. screentop;
Popup. Show (X, Y, W, H );
// Display special effects of menus, which are implemented using filter
This . Fadeineffect (menu. Attributes. showmenueffect );
Menuobj. m_bounds =
{< br> top: X, left: Y,
width: menuhtml. offsetwidth,
Height: menuhtml. offsetheight
};
/// attach the menu operation event to the menu, and perform operations with the mouse and keyboard
menuobj. attachevents (menuhtml);
};

The above annotations should be clear, but this popup. show (0, 0, 1, 1); It is interesting. When we add the HTML elements of the menu to popup, we find that the popup has not been shown before, does not obtain the bounds information of the table element that constitutes the menu UI. Here show is used to let ie calculate its bounds information, and then use the actual show menu of bounds information. This is a small hack, which is more efficient in the menu, because the show (0, 0,) is not included in the bounds menu, of course you don't need it. However, why didn't bounds computing be made into lazy load as it is generated by popup? The reason is that you may modify the font size of IE after the menu is displayed (for example, press Ctrl and scroll the scroll wheel). This ensures that the actual bounds of the menu can be corrected when the menu is displayed again. The bounds of the menu is saved to facilitate the determination of whether the space is expanded to the right by default when the sub-menu is displayed. If the size is not wide enough, it is expanded from the left side of the parent menu.

To be continued...