logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

基于JQuery的机电设备管理系统

 gyb98 2010-12-31

easyui for jQuery项目地址：http://jquery-easyui./

 

编写这个范例的目的在于介绍easyui的基本用法，这个例子中着重于介绍布局。

来看首页的布局：

Html代码 
  1.   <body>  
  2.   
  3. <div region="north" style="background:#fafafa;color:#2d5593;height:40px;">  
  4.     <div style="font-size:16px;font-weight:bold;width:400px;padding:10px 0 0 10px;">机电设备管理系统</div>  
  5. </div>  
  6.   
  7. <div region="west" title="导航菜单" split="true" fit="true" style="width:150px;">  
  8.     <div id="menus">  
  9.         <div title="业务操作">  
  10.             <table style="width:100%;">  
  11.                 <tr>  
  12.                     <td class="menu">  
  13.                         <a href="javascript:addTab('设备档案','device/index')">  
  14.                             <img src="images/print_class.png"></img><br/>  
  15.                             <span>设备档案</span>  
  16.                         </a>  
  17.                     </td>  
  18.                 </tr>  
  19.                 <tr>  
  20.                     <td class="menu">  
  21.                         <a href="javascript:addTab('设备申购')">  
  22.                             <img src="images/kdmconfig.png"></img><br/>  
  23.                             <span>设备申购</span>  
  24.                         </a>  
  25.                     </td>  
  26.                 </tr>  
  27.                 <tr>  
  28.                     <td class="menu">  
  29.                         <a href="javascript:addTab('设备维修')">  
  30.                             <img src="images/package_settings.png"></img><br/>  
  31.                             <span>设备维修</span>  
  32.                         </a>  
  33.                     </td>  
  34.                 </tr>  
  35.             </table>  
  36.         </div>  
  37.         <div title="数据设置">  
  38.             <table style="width:100%;">  
  39.                 <tr>  
  40.                     <td class="menu">  
  41.                         <a href="javascript:addTab('区域设置')">  
  42.                             <img src="images/package.png"></img><br/>  
  43.                             <span>区域设置</span>  
  44.                         </a>  
  45.                     </td>  
  46.                 </tr>  
  47.                 <tr>  
  48.                     <td class="menu">  
  49.                         <a href="javascript:addTab('设备类别')">  
  50.                             <img src="images/kontact.png"></img><br/>  
  51.                             <span>设备类别</span>  
  52.                         </a>  
  53.                     </td>  
  54.                 </tr>  
  55.             </table>  
  56.         </div>  
  57.     </div>  
  58. </div>  
  59.   
  60. <div region="center" fit="true">  
  61.     <div id="main-center">  
  62.         <div title="首页" style="padding:20px;">  
  63.             <img src="images/banner.gif"></img>  
  64.             <div style="margin-top:20px;">  
  65.             <p>该系统是一个由etmvc和easyui for jQuery技术构建的应用示例，如果您对本系统所使用的技术感兴趣，请与我们联系。</p>  
  66.             <p> </p>  
  67.             <p>设备管理是一款记录设备使用流程的软件，其中有设备信息录入，设备类别设置，区域信息的录制，设备的使用流程，设备使用流程中出错的处理，以及报表查询等功能。</p>  
  68.             <p> </p>  
  69.             <p>我们对系统进行简化，旨在说明一般功能的开发方法。</p>  
  70.             </div>  
  71.         </div>  
  72.     </div>  
  73. </div>  
  74.   </body>  

我们不用写一大堆JS代码，取而代之是用基本的HTML，这对网页设计者而言是最直接最直观的。

怎样让这个布局定义发生作用，看下面的代码：

Js代码 
  1. $('#menus').accordion();  
  2. $('#main-center').tabs();  
  3. $('body').layout();  

用少量的代码做最多的事情，这是jQuery的风格。

 

设备档案表格正常显示需要配置好数据库：

1、使用MYSQL。

2、配置文件：/WEB-INF/classes/activerecord.properties

3、执行程序：http://localhost:8080/easyui-test1

 

来看看效果：



 

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： gyb98 > 《Web》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多