SSH框架網上商城項目第4戰之EasyUI菜單的完成。本站提示廣大學習愛好者：（SSH框架網上商城項目第4戰之EasyUI菜單的完成）文章只能為提供參考，不一定能成為您想要的結果。以下是SSH框架網上商城項目第4戰之EasyUI菜單的完成正文
上篇文章我們應用EasyUI搭建了後台頁面的框架，點擊這裡檢查，這一節我們重要應用EasyUI技巧簡略完成後台菜單，先將簡略功效做出來，前期再持續豐碩。
1. 完成左邊菜單
起首看一下後果圖：
我們可以點擊“根本操作”和“其他操作”來切換菜單選項，在詳細的選項內，點擊分歧的銜接，會在右邊顯示出來。我們先把右邊的菜單做出來。
左邊菜單內容重要有兩個：“種別治理”和“商品治理”。我們曉得，上一節中，在aindex.jsp中應將後台頁面的框架搭建好了，那末如今我們只需做好這兩個超鏈接，然後放到aindex.jsp中響應的div中便可。所以我們先在WebRoot文件夾下新建一個temp.jsp文件作為暫時開辟文件，由於在這裡寫jsp可以直接測出來，等後果可今後，再將內容復制到aindex.jsp中的響應地位。
temp.jsp頁面以下：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/public/head.jspf" %>
<style type="text/css">
#menu {
width:200px;
/*border:1px solid red;*/
}
#menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#menu ul li {
border-bottom: 1px solid #fff;
}
#menu ul li a {
/*先將a標簽轉換為塊級元素，能力設置寬和內間距*/
display: block;
background-color: #00a6ac;
color: #fff;
padding: 5px;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #008792;
}
</style>
</head>
<body>
<div id="menu">
<ul>
<li><a href="#">種別治理</a>
<li><a href="#">商品治理</a>
</ul>
</div>
</body>
</html>
temp.jsp中只做了兩個鏈接，用li封裝起來並放到div中，下面css是給這兩個鏈接設置款式的，然後我們開啟tomcat，測試一下後果以下：
做好了這兩個超鏈接後，我們將封裝兩個超鏈接的ul拷貝到aindex.jsp中的左邊菜單內容顯示地位，並扼要的修正，以下：
css部門直接考到aindex.jsp的head標簽裡便可。看下面誰人a標簽，外面是title屬性，其實不是href，由於我們不是跳轉到新的頁面，由於EasyUI就這一個頁面，我們要讓點擊後的顯示放到左邊的tab選項卡那邊，所以我們先把跳轉的action寫在title屬性裡，前面再改。接上去，我們要經由過程點擊種別治理，在左邊的選項卡中彈出詳細類容的功效。
2. 完成右邊tab選項卡
完成點擊右邊菜單欄彈出左邊選項卡的功效，須要參加js代碼了。應用EasyUI的思緒是：起首點擊超鏈接，拿到這個超鏈接的名字，由於彈出來的選項卡題目應當和這個超鏈接的名字一樣的，好比“種別治理”；然後斷定更名字的選項卡能否曾經存在，假如存在則顯示，假如不存在則創立，並顯示要顯示的內容。我們來看下js部門的代碼：
<script type="text/javascript">
$(function(){
$("a[title]").click(function(){
var text = $(this).text();
var href = $(this).attr("title");
//斷定以後左邊能否已有響應的tab
if($("#tt").tabs("exists", text)) {
$("#tt").tabs("select", text);
} else {
//假如沒有則創立一個新的tab，不然切換到以後tag
$("#tt").tabs("add",{
title:text,
closable:true,
content:'<iframe title=' + text + 'src=' + href + ' frameborder="0" width="100%" height="100%" />'
//href:默許經由過程url地址加載長途的頁面，然則僅僅是body部門
//href:'send_category_query.action'
});
}
});
});
</script>
我們來剖析下這段js代碼，起首拿到a標簽，留意這個a標簽是帶title屬性的a標簽，也就是我們下面的“種別治理”超鏈接，然後點擊，click外面又有一個function，這個function都干啥了呢？起首獲得以後鏈接的名字，即text，然後經由過程title屬性拿到url（由於我們方才把url寫到title屬性了），接上去斷定能否曾經有這個名字的選項（tab），假如有則顯示該名字的選項，假如沒有則創立。
我們來詳細看看if外面的語句，起首經由過程"#tt"拿到左邊部門的jquery對象，然後挪用tabs結構辦法即拿到tab對象，假如有則前往true，不然前往false。那末tabs()外面的兩個參數是甚麼意思呢？起首第一個參數是辦法名，第二個參數是第一個參數（辦法）對應的參數，tabs("exists", text)表現挪用EasyUI的exists辦法，參數為text，即斷定名字為text的tab能否存在，異樣，上面的tabs("select", text)表現選擇名字為text的tab顯示，tabs("add", {})表現新創立一個tab，{}裡添加新添加tab的一些屬性：title表現名字，closable:true表現有封閉按鈕，即右上角的叉叉，content表現要顯示的內容從哪取得，前面用<iframe>標簽將一個頁面的內容給包出去，這個頁面不克不及直接拜訪，是經由過程action跳轉的，從action的名字中可以看出，是引入WEB-INF/category/query.jsp頁面。假如我們在該頁面中的body標簽中隨意寫個內容，然後經由過程點擊右邊菜單欄，就會在左邊選項卡中顯示內容。以下：
最初把aindex.jsp中的代碼放到這裡來：
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ include file="/public/head.jspf" %>
<style type="text/css">
#menu {
width:60px;
/*border:1px solid red;*/
}
#menu ul {
list-style: none;
padding: 0px;
margin: 0px;
}
#menu ul li {
border-bottom: 1px solid #fff;
}
#menu ul li a {
/*先將a標簽轉換為塊級元素，能力設置寬和內間距*/
display: block;
background-color: #00a6ac;
color: #fff;
padding: 5px;
text-decoration: none;
}
#menu ul li a:hover {
background-color: #008792;
}
</style>
<script type="text/javascript">
$(function(){
$("a[title]").click(function(){
var text = $(this).text();
var href = $(this).attr("title");
//斷定以後左邊能否已有響應的tab
if($("#tt").tabs("exists", text)) {
$("#tt").tabs("select", text);
} else {
//假如沒有則創立一個新的tab，不然切換到以後tag
$("#tt").tabs("add",{
title:text,
closable:true,
content:'<iframe src="send_category_query.action" frameborder="0" width="100%" height="100%" />'
//href:默許經由過程url地址加載長途的頁面，然則僅僅是body部門
//href:'send_category_query.action'
});
}
});
});
</script>
</head>
<body class="easyui-layout">
<div data-options="region:'north',title:'迎接離開易購後台治理',split:true" ></div>
<div data-options="region:'west',title:'體系操作',split:true" >
<!-- 此處顯示的是體系菜單 -->
<div id="menu" class="easyui-accordion" data-options="fit:true">
<div title="根本操作" data-options="iconCls:'icon-save'">
<ul>
<li><a href="#" title="send_category_query.action">種別治理</a>
<li><a href="#">商品治理</a>
</ul>
</div>
<div title="其他操作" data-options="iconCls:'icon-reload'">
<ul>
<li><a href="#">種別治理</a>
<li><a href="#">商品治理</a>
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'後台操作頁面'" >
<div id="tt" class="easyui-tabs" data-options="fit:true">
<div title="體系缺省頁面" >
此處今後顯示響應的體系信息（以後操作體系的類型，以後項目標域名，硬件的相干設置裝備擺設或許顯示報表
</div>
</div>
</div>
</body>
</html>
很顯著，代碼沒有抽取，css和js都混在一個jsp頁面了，沒緊要，前面會一路抽取的。
到此為止，我們完成了EasyUI菜單的完成，這裡只是將完成辦法完成了，詳細顯示的內容前面依據詳細需求再完美。
全部項目標源碼下載地址：http://www.jb51.net/article/86099.htm
原文地址：http://blog.csdn.net/eson_15/article/details/51297705
以上就是本文的全體內容，願望對年夜家的進修有所贊助，也願望年夜家多多支撐。
