First, create a data table menu
MId menu primary key
Name menu name
Url menu Link
Father low-level menu ID
Whether sub is the underlying menu (used to determine whether sub can be expanded)
Target menu Link target (as the display id when opened in ajax Mode)
Pa menu parameters (this is used to open the menu in ajax Mode)
CreateMenu object class
Class Menu {
Private int mId;
Private String name;
... // Other members
Public getMid (){
Return mId;
}
Public setMid (int mId ){
This. mId = mId;
}
... // Get set Method for other members,
}
AnotherYesoperation class
Class MenuOpt (){
Public Vector getMenus (int father ){
Vector vector = new Vector ();
// Obtain all the menus whose parent menu ID is father.
// And encapsulate it in an object of the Vector ..
Return vector;
}
}
The second is the general JSP file. However, do not include the <HTML> <body> tag!
Menu. jsp:
<% @ Page contenttype = "text/html; charset = gb2312" %>
<% @ Taglib uri = "http://java.sun.com/jsp/jstl/core" prefix = "C" %>
<! -- The label definition of jstl is used earlier. (It is strongly recommended to learn JSP !) -->
<JSP: usebean id = "menu" Scope = "page" class = "ycoe. Basic. menuopt"/>
<JSP: setproperty name = "menu" property = "father" value = "$ {Param. Father}"/>
<Div>
<C: foreach Var = "M" items = "$ {menu. Vector}" varstatus = "C">
<C: Choose>
<C: When test = "$ {M. sub EQ 'y'}">
<Div onclick = "showmenu('{}m.mid}', '{}m.url}', '{}m.tar get} ', 'Father =$ {M. Mid}')">
<A href = "#" class = "text1" >$ {M. name} </a>
</Div>
<Div style = "display: none;" id = "tr $ {m. mid}">
<Div style = "padding-left: 12pt" id = "$ {m. mid}"> </div>
</Div>
</C: when>
<C: otherwise>
<Div onclick = "openmenu('{}m.url}', '{}m.tar get} ',' $ {m. pa} ');">
<A href = "#" class = "text1" >$ {m. name} </a>
</Div>
</C: otherwise>
</C: choose>
</C: forEach>
</Div>
Menu. js:
// OperMenu (open the drop-down menu ID, open address, link to open the target, parameters ).
// This is the method used in menu. jsp
Function showMenu (id, url, target, param ){
Var trObj = document. getElementById ("tr" + id );
Var tdObj = document. getElementById (id );
// Try {
If (document. getElementById ("tr" + id). style. display = "none "){
// Display menu
If (tdObj. innerHTML = null | tdObj. innerHTML = ""){
// Extract data
Document. getElementById ("tr" + id). style. display = "";
Document. getElementById ("img" + id). src = "pic/menu2.gif"
Bcandy (id, "page/menu. jsp", param ,"");
OpenMenu (url, target, param );
} Else {
// If there is content in it, it is displayed directly
Document. getElementById ("tr" + id). style. display = "";
Document. getElementById ("img" + id). src = "pic/menu2.gif"
OpenMenu (url, target, param );
}
// Bcandy (target, url, param, ""); // open the menu Link
} Else {
// Hide the menu
Document. getElementById ("tr" + id). style. display = "none ";
Document. getElementById ("img" + id). src = "pic/menu0.gif"
}
//} Catch (e ){}
}
// Open the menu
Function openMenu (url, target, param ){
// Do not write it here. There are several implementation methods. We recommend using ajax!
}