上篇文章我們使用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" />' //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" />' //href:默認通過url地址加載遠程的頁面,但是僅僅是body部分//href:'send_category_query.action' }); } }); }); </script> </head> <body> <div data-options="region:'north',title:'歡迎來到易購後台管理',split:true" style="height:100px;"></div> <div data-options="region:'west',title:'系統操作',split:true"> <!-- 此處顯示的是系統菜單--> <div id="menu" data-options="fit:true"> <div data-options="iconCls:'icon-save'"> <ul> <li><a href="#">類別管理</a> <li><a href="#">商品管理</a> </ul> </div> <div data-options="iconCls:'icon-reload'"> <ul> <li><a href="#">類別管理</a> <li><a href="#">商品管理</a> </ul> </div> </div> </div> <div data-options="region:'center',title:'後台操作頁面'" style="padding:1px;background:#eee;"> <div id="tt" data-options="fit:true"> <div style="padding:10px;"> 此處以後顯示相應的系統信息(當前操作系統的類型,當前項目的域名,硬件的相關配置或者顯示報表</div> </div> </div> </body> </html>很明顯,代碼沒有抽取,css和js都混在一個jsp頁面了,沒關係,後面會一起抽取的。
到此為止,我們完成了EasyUI菜單的實現,這裡只是將實現方法完成了,具體顯示的內容後面根據具體需求再完善。
整個項目的源碼下載地址://www.VeVB.COm/article/86099.htm
原文地址:http://blog.csdn.net/eson_15/article/details/51297705
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持武林網。