easyui for jQuery項目地址:http://jquery-easyui.wikidot.com/
編寫這個範例的目的在於介紹easyui的基本用法,這個例子中着重於介紹佈局。
來看首頁的佈局:
<body>
<div region="north" style="background:#fafafa;color:#2d5593;height:40px;">
<div style="font-size:16px;font-weight:bold;width:400px;padding:10px 0 0 10px;">機電設備管理系統</div>
</div>
<div region="west" title="導航菜單" split="true" fit="true" style="width:150px;">
<div id="menus">
<div title="業務操作">
<table style="width:100%;">
<tr>
<td class="menu">
<a href="javascript:addTab('設備檔案','device/index')">
<img src="images/print_class.png"></img><br/>
<span>設備檔案</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('設備申購')">
<img src="images/kdmconfig.png"></img><br/>
<span>設備申購</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('設備維修')">
<img src="images/package_settings.png"></img><br/>
<span>設備維修</span>
</a>
</td>
</tr>
</table>
</div>
<div title="數據設置">
<table style="width:100%;">
<tr>
<td class="menu">
<a href="javascript:addTab('區域設置')">
<img src="images/package.png"></img><br/>
<span>區域設置</span>
</a>
</td>
</tr>
<tr>
<td class="menu">
<a href="javascript:addTab('設備類別')">
<img src="images/kontact.png"></img><br/>
<span>設備類別</span>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div region="center" fit="true">
<div id="main-center">
<div title="首頁" style="padding:20px;">
<img src="images/banner.gif"></img>
<div style="margin-top:20px;">
<p>該系統是一個由etmvc和easyui for jQuery技術構建的應用示例,如果您對本系統所使用的技術感興趣,請與我們聯繫。</p>
<p> </p>
<p>設備管理是一款記錄設備使用流程的軟件,其中有設備信息錄入,設備類別設置,區域信息的錄製,設備的使用流程,設備使用流程中出錯的處理,以及報表查詢等功能。</p>
<p> </p>
<p>我們對系統進行簡化,旨在說明一般功能的開發方法。</p>
</div>
</div>
</div>
</div>
</body>
我們不用寫一大堆JS代碼,取而代之是用基本的HTML,這對網頁設計者而言是最直接最直觀的。
怎樣讓這個佈局定義發生作用,看下面的代碼:
$('#menus').accordion(); $('#main-center').tabs(); $('body').layout();
用少量的代碼做最多的事情,這是jQuery的風格。
設備檔案表格正常顯示需要配置好數據庫:
1、使用MYSQL。
2、配置文件:/WEB-INF/classes/activerecord.properties
3、執行程序:http://localhost:8080/easyui-test1
來看看效果: