上一節我們使用EasyUI搭建了後台頁面的框架,這一節我們主要使用EasyUI技術簡單實現後台菜單,先将簡單功能做出來,後期再繼續豐富。(EasyUI下載地址

  1. 實現左側菜單

  首先看一下效果圖:

SSH電商項目實戰之四:EasyUI菜單的實現

  我們可以點擊“基本操作”和“其他操作”來切換菜單選項,在具體的選項内,點擊不同的連接,會在右側顯示出來。我們先把左邊的菜單做出來。

  左側菜單内容主要有兩個:“類别管理”和“商品管理”。我們知道,上一節中,在aindex.jsp中應将後台頁面的框架搭建好了,那麼現在我們隻要做好這兩個超鍊接,然後放到aindex.jsp中相應的div中即可。所以我們先在WebRoot文件夾下新建一個temp.jsp文件作為臨時開發文件,因為在這裡寫jsp可以直接測出來,等效果可以後,再将内容複制到aindex.jsp中的相應位置。

  temp.jsp頁面如下:

XML/HTML代碼
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4.   <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.     <style type="text/css">    
  7.         #menu {    
  8.             width:200px;    
  9.             /*border:1px solid red;*/    
  10.         }    
  11.         #menu ul {    
  12.             list-style: none;    
  13.             padding: 0px;    
  14.             margin: 0px;    
  15.         }    
  16.         #menu ul li {    
  17.             border-bottom: 1px solid #fff;    
  18.                 
  19.         }    
  20.         #menu ul li a {    
  21.             /*先将a标簽轉換為塊級元素,才能設置寬和内間距*/    
  22.             display: block;    
  23.             background-color: #00a6ac;    
  24.             color: #fff;    
  25.             padding: 5px;    
  26.             text-decoration: none;    
  27.         }    
  28.         #menu ul li a:hover {    
  29.             background-color: #008792;    
  30.         }    
  31.             
  32.     </style>    
  33.   </head>    
  34.       
  35.   <body>    
  36.     <div id="menu">       
  37.         <ul>    
  38.             <li><a href="#">類别管理</a>    
  39.             <li><a href="#">商品管理</a>    
  40.         </ul>    
  41.     </div>    
  42.   </body>    
  43. </html>    

  temp.jsp中隻做了兩個鍊接,用li封裝起來并放到div中,上面css是給這兩個鍊接設置樣式的,然後我們開啟tomcat,測試一下效果如下:

SSH電商項目實戰之四:EasyUI菜單的實現

  做好了這兩個超鍊接後,我們将封裝兩個超鍊接的ul拷貝到aindex.jsp中的左側菜單内容顯示位置,并簡要的修改,如下:

SSH電商項目實戰之四:EasyUI菜單的實現

  css部分直接考到aindex.jsp的head标簽裡即可。看上面那個a标簽,裡面是title屬性,并不是href,因為我們不是跳轉到新的頁面,因為EasyUI就這一個頁面,我們要讓點擊後的顯示放到右邊的tab選項卡那裡,所以我們先把跳轉的action寫在title屬性裡,後面再改。接下來,我們要通過點擊類别管理,在右邊的選項卡中彈出具體類容的功能。

  2. 實現右側tab選項卡

  實現點擊左邊菜單欄彈出右邊選項卡的功能,需要加入js代碼了。使用EasyUI的思路是:首先點擊超鍊接,拿到這個超鍊接的名字,因為彈出來的選項卡标題應該和這個超鍊接的名字一樣的,比如“類别管理”;然後判斷改名字的選項卡是否已經存在,如果存在則顯示,如果不存在則創建,并顯示要顯示的内容。我們來看下js部分的代碼:

XML/HTML代碼
  1. <script type="text/javascript">    
  2.     $(function(){    
  3.         $("a[title]").click(function(){    
  4.             var text = $(this).text();    
  5.             var href = $(this).attr("title");    
  6.             //判斷當前右邊是否已有相應的tab    
  7.             if($("#tt").tabs("exists", text)) {    
  8.                 $("#tt").tabs("select", text);    
  9.             } else {    
  10.                 //如果沒有則創建一個新的tab,否則切換到當前tag    
  11.                 $("#tt").tabs("add",{    
  12.                     title:text,    
  13.                     closable:true,    
  14.                     content:'<iframe title=' + text + 'src=' + href + ' frameborder="0" width="100%" height="100%" />'    
  15.                     //href:默認通過url地址加載遠程的頁面,但是僅僅是body部分    
  16.                     //href:'send_category_query.action'    
  17.                 });    
  18.             }    
  19.                     
  20.         });    
  21.     });    
  22. </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标簽中随便寫個内容,然後通過點擊左邊菜單欄,就會在右邊選項卡中顯示内容。如下:

SSH電商項目實戰之四:EasyUI菜單的實現

  最後把aindex.jsp中的代碼放到這裡來:

XML/HTML代碼
  1. <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>    
  2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">    
  3. <html>    
  4. <head>    
  5.     <%@ include file="/public/head.jspf" %>    
  6.     <style type="text/css">    
  7.         #menu {    
  8.             width:60px;    
  9.             /*border:1px solid red;*/    
  10.         }    
  11.         #menu ul {    
  12.             list-style: none;    
  13.             padding: 0px;    
  14.             margin: 0px;    
  15.         }    
  16.         #menu ul li {    
  17.             border-bottom: 1px solid #fff;    
  18.                 
  19.         }    
  20.         #menu ul li a {    
  21.             /*先将a标簽轉換為塊級元素,才能設置寬和内間距*/    
  22.             display: block;    
  23.             background-color: #00a6ac;    
  24.             color: #fff;    
  25.             padding: 5px;    
  26.             text-decoration: none;    
  27.         }    
  28.         #menu ul li a:hover {    
  29.             background-color: #008792;    
  30.         }    
  31.             
  32.     </style>    
  33.         
  34.     <script type="text/javascript">    
  35.         $(function(){    
  36.             $("a[title]").click(function(){    
  37.                 var text = $(this).text();    
  38.                 var href = $(this).attr("title");    
  39.                 //判斷當前右邊是否已有相應的tab    
  40.                 if($("#tt").tabs("exists", text)) {    
  41.                     $("#tt").tabs("select", text);    
  42.                 } else {    
  43.                     //如果沒有則創建一個新的tab,否則切換到當前tag    
  44.                     $("#tt").tabs("add",{    
  45.                         title:text,    
  46.                         closable:true,    
  47.                         content:'<iframe src="send_category_query.action" frameborder="0" width="100%" height="100%" />'    
  48.                         //href:默認通過url地址加載遠程的頁面,但是僅僅是body部分    
  49.                         //href:'send_category_query.action'    
  50.                     });    
  51.                 }    
  52.                     
  53.             });    
  54.         });    
  55.     </script>    
  56. </head>    
  57.     
  58.     <body class="easyui-layout">    
  59.         <div data-options="region:'north',title:'歡迎來到易購後台管理',split:true" style="height:100px;"></div>       
  60.         <div data-options="region:'west',title:'系統操作',split:true" style="width:200px;">    
  61.             <!-- 此處顯示的是系統菜單 -->    
  62.             <div id="menu" class="easyui-accordion" data-options="fit:true">       
  63.                 <div title="基本操作" data-options="iconCls:'icon-save'">       
  64.                     <ul>    
  65.                         <li><a href="#" title="send_category_query.action">類别管理</a>    
  66.                         <li><a href="#">商品管理</a>    
  67.                     </ul>    
  68.                 </div>       
  69.                 <div title="其他操作" data-options="iconCls:'icon-reload'">    
  70.                     <ul>    
  71.                         <li><a href="#">類别管理</a>    
  72.                         <li><a href="#">商品管理</a>    
  73.                     </ul>    
  74.                 </div>       
  75.             </div>       
  76.         </div>       
  77.         <div data-options="region:'center',title:'後台操作頁面'" style="padding:1px;background:#eee;">    
  78.             <div id="tt" class="easyui-tabs" data-options="fit:true">       
  79.                 <div title="系統缺省頁面" style="padding:10px;">    
  80.                     此處以後顯示相應的系統信息(當前操作系統的類型,當前項目的域名,硬件的相關配置或者顯示報表    
  81.                 </div>       
  82.                     
  83.             </div>                        
  84.         </div>       
  85.     </body>      
  86.     
  87. </html>    

  很明顯,代碼沒有抽取,css和js都混在一個jsp頁面了,沒關系,後面會一起抽取的。

  到此為止,我們完成了EasyUI菜單的實現,這裡隻是将實現方法完成了,具體顯示的内容後面根據具體需求再完善。

 

除非特别注明,雞啄米文章均為原創
轉載請标明本文地址:http://dnsf85p.top/software/763.html
2017年9月11日
作者:雞啄米 分類:軟件開發 浏覽: 評論:0