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" style="height:100px;"></div>     
        <div data-options="region:'west',title:'系統操作',split:true" style="width:200px;">  
            <!-- 此處顯示的是系統菜單 -->  
            <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:'后臺操作頁面'" style="padding:1px;background:#eee;">  
            <div id="tt" class="easyui-tabs" data-options="fit:true">     
                <div title="系統缺省頁面" style="padding:10px;">  
                    此處以后顯示相應的系統信息（當前操作系統的類型，當前項目的域名，硬件的相關配置或者顯示報表  
                </div>     
                  
            </div>                      
        </div>     
    </body>    
  
</html>