Ajax-based unlimited menu 3

Source: Internet
Author: User

FinallyDisplay page:

 

 

We can see that at any level, there is nothing different from the traditional one. Only the jsp part removes the file header (in fact, it does not remove the file header). In addition, we can also see that, A page has been divided into several parts. As I mentioned earlier, it is a modular structure (this is a structure proposed by the author when I saw a. net Framework Structure on the Internet. I think it is good and I applied it to JSP ).

I have made some reservations for some details. Please understand. However, the general framework is tested by IE and FireFox. I think about some functional extensions.

Principle:Actually, the page recursion is applied! Just like a general recursive method, but it is only used on the page.

<Div id = "tr $ {m. id}">
Loop to display the objects encapsulated into the vector one by one
For {
If (if it is the top menu sub = N ){
<Div id = "t $ {m. id}" onClick = "ShowMenu ($ {m. father...})">
Show menu content
</Div>
<! -- The content is not displayed here. It is only used as the next container -->
<Div style = "display: none" id = "td $ {m. id...}"> </div>
} Else {
<Div onClick = "OpenMenu ($ {m. id})"> display menu content </div>
}
}
</Div>

The showMenu (father, id...) method calls this page again after obtaining data from the server based on the passed-in father. In this case, the page content is displayed in the new ID. In this way, it looks like the tree menu in MSDN.

Advantage: Multi-Level menus are obtained multiple times, which speeds up the response. ajax requests are also applied, making the page flickering invisible and highly friendly. In addition, code can be added to JS so that users do not need to obtain server data every time they click. Instead, they can first determine whether there is any content and no more data... At the same time, menus and pages are synchronized. You can open the page at the corresponding place for each level menu opened. Similarly, operMenu () can also be ajax.

EffectYou can go to the http://www.start.com/Look:

<% @ Page contentType = "text/html; charset = GB2312" %>
<Meta http-equiv = Content-Type content = "text/html; charset = gb2312">
<Style>
. Text1: hover {border: 1px #999999 solid; background-color: # CCCCCC; height: 12px ;}
. Text1 {border: 1px # FFFFFF solid; height: 12px ;}
</Style>
<Script type = "" src = "js/Function. js"> </script>
Function ini (){
Bcandy ("0", "menu. jsp", "id = 0 & father = 0", "menu. js ");
}
</Script>
<Body onload = "ini ();">
<Div id = "load" style = "z-index: 1; color: # FF0000; visibility: hidden; filter: Alpha (opacity = 85); background-color: # FFFFFF; left: 48%; top: 48%; BORDER-RIGHT: #000000 1px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 1px solid; PADDING-LEFT: 12px; PADDING-BOTTOM: 12px; BORDER-LEFT: #000000 1px solid; LINE-HEIGHT: 22px; PADDING-TOP: 12px; BORDER-BOTTOM: #000000 1px solid; POSITION: absolute; ">
<br>
Processing Data. Please wait...
<Br>
</Div>
<Div id = "0" align = "center">
</Div>
</Body>
</Html>

Related Article

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.