'微商紅'系統, 經技術選型,使用easyUI框架作爲後臺開發頁面.在開發過程中涉及到的技術點,在此進行記錄分析,加深印象,以便往後的開發中若再遇此能夠迎刃而解.
1. easyUI的layout組件的引入 -- layout & tabs
<%
String path = request.getContextPath();
request.setAttribute("base", path);
%><body class="easyui-layout">
<div data-options="region:'north',border:false" style="height:60px; padding:5px; background:#F3F3F3">
<span class="northTitle">微商紅系統</span>
</div>
<div data-options="region:'west',title:'菜單',split:true" style="width:180px;">
<!-- 使用隱藏域加載session中的當前登錄用戶 -->
<input id="id" name="id" type="hidden" value="${loginUser.id}" />
<ul id="menu" class="easyui-tree" style="margin-top: 10px;margin-left: 5px;">
<li>
<span>膜卡管理</span>
<ul>
<li data-options="attributes:{'url':'${base}/card-list'}">查看膜卡</li>
<li data-options="attributes:{'url':'${base}/card-querySell'}">膜卡銷售查詢</li>
<li data-options="attributes:{'url':'${base}/card-queryBuy'}">膜卡購彩查詢</li>
</ul>
</li>
///其他菜單項
</div>
<div data-options="region:'center',title:''">
<!-- 選項卡:作爲下面各個面板的總容器 -->
<div id="tabs" class="easyui-tabs">
<div title="首頁" style="padding:20px;"></div>
</div>
</div> <!-- 頁腳信息 -->
<div data-options="region:'south',border:false" style="height:20px; background:#F3F3F3; padding:2px; vertical-align:middle;">
<span id="sysVersion">系統版本：V1.0</span>
<span id="nowTime"></span>
</div>以下是與之對應的jQuery代碼:
$(function(){
$('#menu').tree({
onClick: function(node){
if($('#menu').tree("isLeaf",node.target)){
var tabs = $("#tabs");
var tab = tabs.tabs("getTab",node.text);
if(tab){
tabs.tabs("select",node.text);
}else{
tabs.tabs('add',{
title:node.text, //設置面板標題爲tree節點的內容
href: node.attributes.url, //從URL讀取遠程數據並且顯示到面板
closable:true, //選項卡面板有關閉按鈕
bodyCls:"content" //添加一個CSS類ID到面板正文部分
});
}
}
}
});
})setInterval("document.getElementById('nowTime').innerHTML=new Date().toLocaleString()+' 星期'+'日一二三四五六'.charAt(new Date().getDay());",1000);以上實現了:
1. 實現了easyUI的layout佈局 <body class="easyui-layout">;
2. 菜單項以'樹'的形式展示 $('#menu').tree;
3. 每個菜單項,點擊後將請求展示與之對應的頁面,並且會以"切面"的形式出現在tab上 tabs.tabs('add',
4. setInterval 可以實時獲取當前時間,並顯示在頁腳信息的 <span id="nowTime"></span>中
jQuery easyUI 技術支持鏈接: 點擊打開鏈接