先說一下具體的功能就是當我們點選左側選單選項時，右側主介面會顯示對應的內容。

也就是說每當我們點選左側導航選單就等於打開了一個新的頁面只不過它是選項卡的形式顯示在center中。

開啟easyUI API手冊搜尋 tabs

由於每一個選單選項單擊一下都會開啟一個tab 所以我們可以把這個抽出來作為一個方法

       /**
         * 開啟選項卡
         * @param text  選項卡標題
         * @param url   請求開啟路徑
         * @param icon  選項卡圖示
         */
        function
 
 openTab(text,url,icon) {
            //判斷當前選項卡是否存在
            if($('#tabs').tabs('exists',text)){
                //如果存在 顯示
                $("#tabs").tabs("select",text);
            }else{
                //如果不存在 則新建一個
                $("#tabs").tabs('add',{
                    title:text,
                    closable:true
 
,      //是否允許選項卡摺疊。
                    iconCls:icon,    //顯示圖示
                    content:"<iframe frameborder=0 scrolling='auto' style='width:100%;height:100%' src='${blog}/admin/"+url+"'></iframe>"
                    //url 遠端載入所開啟的url
                })
            }
        }

接下來我們給每一個選單選項註冊這個單擊事件

<div title="常用操作" data-options="selected:true,iconCls:'icon-item'" style="padding: 10px">
            <a href="javascript:openTab('寫部落格','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px">寫部落格</a>
            <a href="javascript:openTab('評論稽核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">評論稽核</a>
        </div>
        <div title="部落格管理" data-options="iconCls:'icon-bkgl'" style="padding:10px;">
            <a href="javascript:openTab('寫部落格','writeBlog.jsp','icon-writeblog')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-writeblog'" style="width: 150px;">寫部落格</a>
            <a href="javascript:openTab('部落格資訊管理','blogManage.jsp','icon-bkgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bkgl'" style="width: 150px;">部落格資訊管理</a>
        </div>
        <div title="部落格類別管理" data-options="iconCls:'icon-bklb'" style="padding:10px">
            <a href="javascript:openTab('部落格類別資訊管理','blogTypeManage.jsp','icon-bklb')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-bklb'" style="width: 150px;">部落格類別資訊管理</a>
        </div>
        <div title="評論管理" data-options="iconCls:'icon-plgl'" style="padding:10px">
            <a href="javascript:openTab('評論稽核','commentReview.jsp','icon-review')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-review'" style="width: 150px">評論稽核</a>
            <a href="javascript:openTab('評論資訊管理','commentManage.jsp','icon-plgl')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-plgl'" style="width: 150px;">評論資訊管理</a>
        </div>
        <div title="個人資訊管理" data-options="iconCls:'icon-grxx'" style="padding:10px">
            <a href="javascript:openTab('修改個人資訊','modifyInfo.jsp','icon-grxxxg')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-grxxxg'" style="width: 150px;">修改個人資訊</a>
        </div>
        <div title="系統管理" data-options="iconCls:'icon-system'" style="padding:10px">
            <a href="javascript:openTab('友情連結管理','linkManage.jsp','icon-link')" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-link'" style="width: 150px">友情連結管理</a>
            <a href="#" class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-modifyPassword'" style="width: 150px;">修改密碼</a>
            <a href="# class="easyui-linkbutton"
               data-options="plain:true,iconCls:'icon-refresh'" style="width: 150px;">刷新系統快取</a>
            <a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-exit'"
               style="width: 150px;">安全退出</a>
        </div>

這樣我們就完成了左側選單功能的實現。
在下一篇部落格我會講解如果通過mybatis實現部落格類別的分頁實現以及easyUI datagrid使用