Based on Ajax + div's "Left menu, right content" Page effect implementation, ajaxdiv
Demo:
① Default page (index. jsp ):
②: Click the user list option under the user management tab on the left, and the content on the default page on the right is updated to the user list page (userList. jsp:
③: Similarly, when you click the product list and order list under the product management and Order Management tabs, the content on the right will be refreshed as the product list page (productList. jsp), order list page (recordList. jsp) Content
In this way, Ajax + div is used to implement the menu selection on the left and the Display Effect on the right. Let's take a look at the specific implementation process.
I:
The example program used in the whole demonstration contains the default page (index. jsp), user list page (userList. jsp), product list page (productList. jsp), Order Management page (recordList. jsp)
The Bootstrap framework and FontAwesome icons are used (no way, the built-in icons of bootstrap are too few o (optional □strong) o). The usage of these two products is relatively simple on the official website.
Let's take a look at the code of index. jsp. I have commented in detail:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN "" http://www.w3.org/TR/html4/loose.dtd "> <Html lang =" zh-CN ">Note:
If the FontAwesomt icon is not correctly displayed, it is likely that the font file address in the font-awesome.css is incorrect
Check whether the url in the red box on the Right corresponds to the path of the fonts-awesome file in the red box on the left.
II:
UserList. jsp page code:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">ProductList. jsp:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">RecordList. jsp:
<% @ Page language = "java" contentType = "text/html; charset = UTF-8" pageEncoding = "UTF-8" %> <! DOCTYPE html PUBLIC "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">These three are just simple demo pages, so there will be no extra money.
3. Download source code
Http://files.cnblogs.com/files/Dreamer-1/AjaxExample.rar
The above section describes how to implement the "Left menu and right content" Page Based on Ajax + div. I hope it will help you. If you have any questions, please leave a message, the editor will reply to you in a timely manner. Thank you very much for your support for the help House website!
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
