小狐狸事務所: 用 jQuery EasyUI 打造輕量級 CMS (一)

2014年12月15日星期一

用 jQuery EasyUI 打造輕量級 CMS (一)

公司的工作日誌系統明年將運轉屆滿十年, 這套當初用 ASP+Javascript+ACCESS 寫的簡易型 CMS 是我參考 myPHPNuke 的功能拼拼湊湊寫出來的, 前後端都使用 Javascript 撰寫. 我在這個架站平台上掛上加寫的營運所需的各個子系統, 因為系統是自己寫的, 所以要殺要剮都能隨心所欲, 使用至今倒也便利. 不過使用十年的系統畢竟太舊了, 網頁技術突飛猛進, 早已不知越過幾個世代, 所以靜極思動, 想要用 jQuery EasyUI 來改寫. 目前主要構想如下 :

後端改用 PHP + MySQL 架構.
前端 Javascript 框架使用 EasyUI 做介面.
版面使用 Layout 元件排版 (不需 South), 子系統用 Tabs 管理內容.
架站機平台極簡化, 只含留言板, 會員管理與子系統管理.
主要子系統為工作日誌, 以及各型機器之營運資料庫查詢管理子系統.
符合資安要求, 以免被電.

這兩天對以上構想的可能性做了一番測試, 基本模型如下面範例 1 :

範例 1 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-1.htm [看原始碼]

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>EasyUI 測試</title>
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="../jquery/easyui-themes/icon.css">
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript" src="../jquery/jquery.easyui.min.js"></script>
<script type="text/javascript" src="../jquery/easyui-lang-zh_TW.js"></script>
<style>
.navbar {
width:180px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
}
.nav {
margin-bottom:5px;
}
.content {
overflow:auto;
padding-bottom:5px;
}
.tab {
padding:10px;
overflow:auto;
position:relative;
}
#header {
padding-left:5px;
padding-right:5px;
padding-top:5px;
}
</style>
</head>
<body>
<div id="layout-1" class="easyui-layout" data-options="fit:true" style="">
<div id="header" data-options="region:'north',border:false">
<div class="easyui-panel" title="MySystem" data-options="tools:'#tools'" style="height:60px;padding-top:5px;padding-left:5px;padding-right:5px;">
歡迎光臨! 今天是 2014 年 12 月 12 日
</div>
</div>
<div id="tools">
<a href="#" id="nav-west" class="icon-remove"></a>
<a href="#" id="nav-east" class="icon-remove"></a>
</div>
<div class="navbar" data-options="region:'east',border:false">
<div class="easyui-panel nav" title="MyPanel">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
</div>

<div class="navbar" data-options="region:'west',border:false">
<div class="easyui-panel nav" title="MyPanel-1">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-2">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-3">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-4">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-5">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-6">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-7">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
<div class="easyui-panel nav" title="MyPanel-8">
<ul>
<li>Hello World!</li>
<li>Hello World!</li>
<li>Hello World!</li>
</ul>
</div>
</div>
<div class="content" data-options="region:'center',border:false">
<div class="easyui-tabs">
<div title="標題 1" class="tab">
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
內容 1<br>
</div>
<div title="標題 2" class="tab">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
<div title="標題 3" class="tab">內容 3</div>
</div>
</div>
</div>
<script language="javascript">
$(document).ready(function(){
$("#nav-west").bind("click",function(){
if (this.className.indexOf("icon-remove") != -1){
$("#layout-1").layout("collapse","west");
this.className="icon-add";
}
else{
$("#layout-1").layout("expand","west");
this.className="icon-remove";
}
});
$("#nav-east").bind("click",function(){
if (this.className.indexOf("icon-remove") != -1){
$("#layout-1").layout("collapse","east");
this.className="icon-add";
}
else{
$("#layout-1").layout("expand","east");
this.className="icon-remove";
}
});
});
</script>
</body>
</html>

此例中我用 Layout 排版, 底下的 South 不需要, 只剩下東西北中四個區域. 北方用作網站標頭, 擺放登入訊息與子系統進入口. 東西兩方用作導覽連結框, 中間作為內容區. 為了畫面的美觀, 我捨棄了各區域的標題, 從而無法擺放展開縮合紐, 北方區域的標題上我放了兩個按鈕, 分別控制左右導覽框之縮合與展開. 注意, 這裡 this.className 的 this 為兩個按鈕之 DOM 物件, 使用 indexOf 判斷的原因是, 第一次按時其 className 不是只有 icon-remove 而已, 用 this.className=="icon-remove" 會傳回 false, 但按第二次就可以了.

上面範例中, 我特地在頁籤 1 與 2 中分別給予垂直與水平方向很長的內容, 可見它會自動出現捲軸.

另外我又陸陸續續做了幾個測試, 實在太雜了, 就不一一詳述, 如下列範例 :

範例 2 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-2.htm [看原始碼]

範例 3 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-3.htm [看原始碼]

範例 4 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-4.htm [看原始碼]

範例 5 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-5.htm [看原始碼]

範例 6 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-6.htm [看原始碼]

最後進行微調, 將樣式集中, 單一性元素用 id, 重複性元素用 class, 這樣就清爽多了. 版面如下 :

範例 7 : http://mybidrobot.allalla.com/easyuitest/easyui-cms-7.htm [看原始碼]

接下來要考量資料庫了.

參考資料 :

2 則留言 :

erichuang 提到...: Tony，你好。看了您写的Jquery easy ui的博文我收益匪浅。现在我正在学习jquery easy ui以及php，希望能够获得你这个cms源码研究学习，不知能否如愿，谢谢。我的电邮：com.hzq@gmail.com,期待你的回信。; 2015年2月5日上午11:56
小狐狸事務所提到...: Eric 您好,

抱歉, 信太多了, 最近才發現您有留言給我.
我這個 EsyUICMS 還在開發階段, 還有幾個功能尚未寫完, 因此就目前完成的進度給您參考, 有發現 BUG 記得告訴我.

tony 敬上; 2015年2月17日上午11:17