easyui for jQuery項(xiàng)目地址：http://jquery-easyui./
編寫這個(gè)范例的目的在于介紹easyui的基本用法，這個(gè)例子中著重于介紹布局。
來(lái)看首頁(yè)的布局：
- <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;">機(jī)電設(shè)備管理系統(tǒng)</div>
- </div>
-
- <div region="west" title="導(dǎo)航菜單" split="true" fit="true" style="width:150px;">
- <div id="menus">
- <div title="業(yè)務(wù)操作">
- <table style="width:100%;">
- <tr>
- <td class="menu">
- <a href="javascript:addTab('設(shè)備檔案','device/index')">
- <img src="images/print_class.png"></img><br/>
- <span>設(shè)備檔案</span>
- </a>
- </td>
- </tr>
- <tr>
- <td class="menu">
- <a href="javascript:addTab('設(shè)備申購(gòu)')">
- <img src="images/kdmconfig.png"></img><br/>
- <span>設(shè)備申購(gòu)</span>
- </a>
- </td>
- </tr>
- <tr>
- <td class="menu">
- <a href="javascript:addTab('設(shè)備維修')">
- <img src="images/package_settings.png"></img><br/>
- <span>設(shè)備維修</span>
- </a>
- </td>
- </tr>
- </table>
- </div>
- <div title="數(shù)據(jù)設(shè)置">
- <table style="width:100%;">
- <tr>
- <td class="menu">
- <a href="javascript:addTab('區(qū)域設(shè)置')">
- <img src="images/package.png"></img><br/>
- <span>區(qū)域設(shè)置</span>
- </a>
- </td>
- </tr>
- <tr>
- <td class="menu">
- <a href="javascript:addTab('設(shè)備類別')">
- <img src="images/kontact.png"></img><br/>
- <span>設(shè)備類別</span>
- </a>
- </td>
- </tr>
- </table>
- </div>
- </div>
- </div>
-
- <div region="center" fit="true">
- <div id="main-center">
- <div title="首頁(yè)" style="padding:20px;">
- <img src="images/banner.gif"></img>
- <div style="margin-top:20px;">
- <p>該系統(tǒng)是一個(gè)由etmvc和easyui for jQuery技術(shù)構(gòu)建的應(yīng)用示例，如果您對(duì)本系統(tǒng)所使用的技術(shù)感興趣，請(qǐng)與我們聯(lián)系。</p>
- <p> </p>
- <p>設(shè)備管理是一款記錄設(shè)備使用流程的軟件，其中有設(shè)備信息錄入，設(shè)備類別設(shè)置，區(qū)域信息的錄制，設(shè)備的使用流程，設(shè)備使用流程中出錯(cuò)的處理，以及報(bào)表查詢等功能。</p>
- <p> </p>
- <p>我們對(duì)系統(tǒng)進(jìn)行簡(jiǎn)化，旨在說(shuō)明一般功能的開(kāi)發(fā)方法。</p>
- </div>
- </div>
- </div>
- </div>
- </body>
我們不用寫一大堆JS代碼，取而代之是用基本的HTML，這對(duì)網(wǎng)頁(yè)設(shè)計(jì)者而言是最直接最直觀的。
怎樣讓這個(gè)布局定義發(fā)生作用，看下面的代碼：
- $('#menus').accordion();
- $('#main-center').tabs();
- $('body').layout();
用少量的代碼做最多的事情，這是jQuery的風(fēng)格。
設(shè)備檔案表格正常顯示需要配置好數(shù)據(jù)庫(kù)：
1、使用MYSQL。
2、配置文件：/WEB-INF/classes/activerecord.properties
3、執(zhí)行程序：http://localhost:8080/easyui-test1
來(lái)看看效果：
