dhtml|htc|window|xml| Standard | menu
With the development of the Internet, XML as a cross-platform general-purpose structured data Description language has been paid more and more attention, and has been widely used, such as Micromedia company produced Dreamweaver, Flash and Game Landing login software all use the XML file as the way of data storage, and Microsoft.NET is also the schema in XML. The current generation of HTML-producing language XHTML (Extensible Hypertext Markup Language)
is based on XML, so mastering XML technology is a necessary skill for future web page makers.
This article introduces the application of XML technology through a mock standard Windows menu program.
First, the principle of procedure
Considering cascading menu complexity, to simplify the program, only the Level two submenu is emulated. Below we take a look at the standard Windows menu process: The mouse moved into the menu highlighting, remove the original, click the menu SAG display and open the submenu, the mouse click on the submenu to complete the corresponding function.
When the submenu is open, move the mouse, then move into the menu SAG display and open the corresponding submenu, remove the menu then revert to the original and hide the corresponding submenu, if the mouse is not moved to another menu but in other places, then the removal menu is still sunken display, the corresponding submenu is not hidden, Revert to the original and hide submenus only when clicked on a non menu. One important feature of the standard Windows menu is that when the submenu is open,
Hidden when the mouse is moved out of the menu or at any point in the document's non-menu click. At present, a lot of web menu programs can not do this, generally are moved into the menu when the submenu, move out of the menu to hide the submenu. This problem can be completely solved by using the newly provided mouse capture technology in IE5.0. The so-called mouse capture, that is, all mouse-related events are set by the mouse capture object processing, regardless of whether these events triggered by the object.
Because XML documents are ideal for describing structured data, we use XML documents to store information about menus and the first level of submenus.
To make it easier to use the mock standard Windows menu on other pages, we do not use code functionality to reuse performance-poor external scripting including file methods, but to encapsulate menu functionality code in an HTML behavior component (HTC) using IE 5.0 newly introduced DHTML Behavior (Behavior) technology Within The HTML behavior component encapsulates a specific function or action on the page, when you attach a behavior component to a standard HTML element (object) on a page, the default functionality of that element (object) is enhanced so that the element (object) contains properties, methods, or events for the behavior, which makes code reuse easy. and simplifies the HTML code of the page, improve the manageability of the page.
For more details on the XML document and the HTML behavior component, please refer to the information, which is not detailed in this article.
Second, the realization of the program
1. Main Face (index.htm)
We first define the DIV element that acts as a menu container in the main page and use the behavior attribute in CSS to attach a behavior component (MENU.HTC) so that you can use the element-extended attribute xmlsrc to specify the data file that stores the menu information (menu.xml) As well as using Onmenuclick to capture new events triggered by the component and invoke the corresponding event handler function.
In addition, in order to simplify the program, the main page has defined the highlight (Up_menu), concave (Dn_menu), original (menu) Three menu appearance style, in the actual application should be defined in the Component menu display appearance, so that more consistent with the principle of component development.
2. Menu component (MENU.HTC)
The ability to simulate standard Windows menus is primarily provided by menu components. The menu consists of the following HTML elements: a DIV element that acts as a menu container (defined on the main page), span elements for a level menu item (created when the menu is initialized), a DIV element that contains a level two menu item (established when a menu is clicked), and a DIV element for a Level two menu item (created when you click the first-level menus). The Onmenuclick event that is triggered when you click the Level two menu is defined in the component to specify the Xmlsrc property for the menu data file.
When the main page is parsed and the Ondocumentready event is triggered, the component captures the event and invokes the event-handling menuinit () function to initialize the first level menu. When mouse events are triggered, such as onmouseover, onmouseout, Onmouseclick, and so on, the component captures these events and invokes the corresponding event-handler functions Menuover (), Menuout (), Menuclick (). In these processing functions, the object that triggers the event is first determined by the Event.srcelement property, and then handled according to the type of the object (such as Parentmenu, submenu, or others) respectively.
such as changing menu display appearance, opening or hiding submenus, triggering new events, and so on.
After the first level menu triggers the mouse event, open the level two menu and set mouse Capture on the primary menu object by the SetCapture () method. All onmouseover, onmouseout, Onmouseclick mouse events that are triggered at any point in the menu or document will then be handled by the menu object. However, the Event.srcelement property is still the object that triggers the mouse event rather than the object that sets the mouse capture. Hides the level two menu and releases mouse capture through the ReleaseCapture () method when you click anywhere in the Level two submenu or the non-menu of the document.
When you click the Level two menu, its event handler Onmouseclick creates an event (event) object through the Createeventobject method, triggers a new event by fire method, and passes information using the properties of the event object ( If Event.menuid returns the selected menu ID),
The event is then captured by the container and the corresponding event handler function Handersubmenu () is invoked. Defining a function Handersubmenu () in the main page can make the menu component more versatile.
3. Menu data File (menu.xml)
Item node stores level menu information, subitem nodes store level two menu information, each node contains two attributes: value (menu ID), name (menu name).
===================================================
The program must be in IE5.0 and above version of the browser running, shipping
The row results are shown in figure. What do you think? The image is not like a standard Windows menu.
Attached: Analog standard Windows menu source code (passed under win98+ie5.0)
===================================================
<Html><Head>
<Title> Menu Components Example </Title>
<style>
<!--. menu{
Border-top:2 solid #CCCCCC;
Border-bottom:1 solid #CCCCCC;
Border-left:2 solid #CCCCCC; border-right:1 solid #CCCCCC;
}
. Up_menu {
Border-top:2 Outset;border-left:2 outset;border-right:1 outset #FFFFFF;
Border-bottom:1 outset #FFFFFF;
Background-color: #CCCCCC; }
. dn_menu{
Border-top:2 inset;
Border-left:2 inset;
Border-right:1 inset;
Border-bottom:1 inset;
Background-color: #CCCCCC;
}--></style><script>
function Handersubmenu () {///Select submenu and handle switch (EVENT.MENUID) {case Event.menuId:alert (event.menuid) accordingly; Break }}</script><TBODY><TR height= "Ten" >
<TD align= "center" height=25 style= "border-top:2px groove;border-bottom:2px groove;" > <div id= "menu" style= "Behavior:url (MENU.HTC)" xmlsrc= "Menu.xml" onmenuclick= "Handersubmenu ()" ></div >
</TD> </TR>
</TBODY></TABLE></Body></Html>
================================================
MENU.HTC file:
<PUBLIC:COMPONENT>
<public:property name= "xmlsrc" put= "Putxmlsrc"/>
<public:event name= "Onmenuclick" id= "Menuclick"/>
<public:attach event= "Ondocumentready" for= "element" onevent= "Menuinit ()"/>
<public:attach event= "onmouseover" for= "element" onevent= "Menuover ()"/>
<public:attach event= "onmouseout" for= "element" onevent= "menuout ()"/>
<public:attach event= "onclick" for= "element" onevent= "Menuclick ()"/>
<script language= "JavaScript" >
var xmldoc=null;//XML Document object variable
var activemenu=null;//Open Submenu's parent Menu object variable
var menucontainer=null;//contains submenu items container object variables
function Putxmlsrc (str) {//Load menu data file
xmldoc= new ActiveXObject ("Microsoft.XMLDOM");//create XML Document Object
Xmldoc.async=false; Xmldoc.load (str);//Load Menu Data}
function Menuinit () {//Initialize menu
var parentmenuitems = xmldoc.selectnodes ("//itemlist/item"); FILE://read the first-level menu data
var XmlElement = Parentmenuitems.nextnode ();
var newelement;
while (XmlElement!= null) {newelement = Document.createelement ("span"); file://Create menu Element
Newelement.type = "Parentmenu";
With (newelement) {InnerHTML = Xmlelement.getattribute ("name");
Id=xmlelement.getattribute ("value");
Classname= "Menu"; }
With (Newelement.style) {
Position= "relative";
Width= 60;
Cursor= "Default"; }
Element.appendchild (newelement); File://element refers to an element of additional behavior
XmlElement = Parentmenuitems.nextnode (); }}
function Menuover () {var eventsource=event.srcelement;//captures the object that triggers the event
Switch (activemenu) {//Determine if submenu exists
Case null://does not exist submenu
if (eventsource.type== "Parentmenu")
Eventsource.classname= "Up_menu";
Break
Default
Switch (eventsource.type) {//Judge trigger event object type
Case "Parentmenu"://Move to First level menu
if (Activemenu!=eventsource) {//Decide whether to move to the new level menu
Removesubmenu ()//Delete existing submenu
Buildsubmenu (eventsource.id);//Create a new submenu
Eventsource.setcapture ()//Set mouse capture on new menu
Activemenu.classname= "Menu";
Activemenu=eventsource; file://Update the parent menu object variable that opens the submenu
Activemenu.classname= "Dn_menu"; }
Break
Case "submenu"://Move to submenu
Eventsource.style.color= "#FF0000";
eventsource.style.textdecoration= "Underline";
Break } break; }}
function Menuout () {eventsource=event.srcelement
Switch (activemenu) {case NULL:
if (eventsource.type== "Parentmenu") eventsource.classname= "menu";
Break
Default:if (eventsource.type== "submenu") {
Eventsource.style.color= "#000000";
Eventsource.style.textdecoration= "None";
} break; }}
function Menuclick () {eventsource=event.srcelement
Switch (eventsource.type) {
Case "Parentmenu":
if (Activemenu!=eventsource) {
Removesubmenu ();
Buildsubmenu (eventsource.id);
Eventsource.setcapture ();
Eventsource.classname= "Dn_menu";
Activemenu=eventsource; }
Break
Case "submenu":
Removesubmenu ();
Activemenu.classname= "Menu";
Activemenu.releasecapture ()//release mouse capture settings
Activemenu=null;
var eventobject = Createeventobject ();//Create Event object
Eventobject.menuid = eventsource.id;//Pass the selected submenu ID through the Event object property
Menuclick.fire (EventObject);//triggers the event to the container page break;
Default
Removesubmenu ();
if (activemenu!=null) {
Activemenu.releasecapture ();
Activemenu.classname= "Menu";
Activemenu=null; }
Break } }
function Buildsubmenu (Eventsourceid) {//Create submenu
Menucontainer = document.createelement ("div");
With (Menucontainer.style) {
position= "Absolute"; left=0; top=15; Color= "#000000"; Cursor= "Default"; }
Eval (Eventsourceid). appendchild (Menucontainer);
var submenuitems = xmldoc.selectnodes ("//item[@value = '" +eventsourceid+ "']/submenu");
var XmlElement = Submenuitems.nextnode ();
var newelement;
while (XmlElement!= null) {n
Ewelement = document.createelement ("div");
Newelement.type = "submenu";
With (newelement) {
InnerHTML = "-" +xmlelement.getattribute ("name");
Id=xmlelement.getattribute ("value"); }
With (Newelement.style) {width=75; height=18; }
Menucontainer.appendchild (newelement);
Menucontainer.classname= "Up_menu";
XmlElement = Submenuitems.nextnode ();
}}function Removesubmenu () {//Delete submenu
if (Menucontainer!=null) Menucontainer.removenode (true);}
</Script></Component>
===========================
Menu.xml file:
<?xml version= "1.0" encoding= "gb2312"?>
File://xml processing instruction is specified as Chinese code and does not support Chinese if not specified
<Itemlist> <item value= "file" name= "Files"
=======================
