jQuery MiniUI

标题: jQuery MiniUI开发系列之：HTML标签配置 [打印本页]
作者: fcrong    时间: 2012-3-16 16:15:40     标题: jQuery MiniUI开发系列之：HTML标签配置

全部使用Javascript写一个界面，是一件很困难的事。
1）要求有较高的Javascript编程能力。
2）会造成“代码树”问题。一级又一级子"children"，需要"{"和"}"对应，嵌套层次过多，会是一场灾难。
3）难以排错。JS是解释性语言，漏掉个","、"}"号，运行的时候才发现，而且很难直接定位到行。
4）维护困难。一个开发者写的复杂JS代码，另一个开发者很难接手。
5）布局困难。需要复杂的布局控件，并且难以做到原生HTML+CSS方式的布局效果。

MiniUI给开发者推荐的开发方式，是使用HTML标签来配置出界面，而不是用JS来生成。
比如创建一个DataGrid：
  1. <div id="datagrid1" class="mini-datagrid" style="width:700px;height:280px;"
  2.     url="../data/dataservice.aspx?method=SearchEmployees"  valueField="id"
  3. >
  4.     <div property="columns">
  5.         <div type="indexcolumn" ></div>
  6.         <div field="loginname" width="120" headerAlign="center" allowSort="true">员工帐号</div>   
  7.         <div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>  
  8.     </div>
  9. </div>
复制代码
如果是Javascript的方式，可以这样写：
  1. var grid = new mini.DataGrid();
  2. grid.set({
  3.     url: "../data/dataservice.aspx?method=SearchEmployees",
  4.     style: "width:700px;height:280px;",
  5.     valueField: "id",
  6.     columns: [
  7.         { type: "indexcolumn" },
  8.         { field: "loginname", width: 120, headerAlign: "center", allowSort: true },
  9.         { field: "name", width: 120, headerAlign: "center", allowSort: true }
  10.     ]
  11. });
  12. grid.render(document.body);
复制代码

以上创建一个单独的表格控件，还看不出两种开发方式的差别。
下面我们来创建一个稍微复杂一点的表单：
  1. <table class="form-table" border="0" cellpadding="1" cellspacing="2">
  2.     <tr>
  3.         <td class="form-label" style="width:60px;">姓名：</td>
  4.         <td style="width:150px">
  5.             <input name="name" class="mini-textbox" />
  6.         </td>
  7.         <td class="form-label" style="width:60px;">地址：</td>
  8.         <td style="width:150px">
  9.             <input name="addr" class="mini-textbox" />
  10.         </td>
  11.     </tr>
  12.     <tr>
  13.         <td class="form-label">性别：</td>
  14.         <td >
  15.             <input name="gender" class="mini-radiobuttonlist" data="[{id: 1, text: '男'}, {id: 2, text: '女'}]"/>
  16.         </td>
  17.         <td class="form-label">年龄：</td>
  18.         <td >
  19.             <input name="age" class="mini-spinner" />
  20.         </td>
  21.     </tr>
  22.     <tr>
  23.         <td class="form-label">备注：</td>
  24.         <td colspan="3" >
  25.             <input name="remarks" class="mini-textarea" style="width:343px;height:60px;"/>
  26.         </td>        
  27.     </tr>
  28. </table>
复制代码
呈现效果如下：



如果完全用Javascript开发这个表单，代码量显然会增加很多，而且不易修改和扩展。
使用HTML标签的组件生成方式，开发者可以使用HTML+CSS的开发经验，轻松实现，灵活布局。


作者: fcrong    时间: 2012-3-17 10:13:38

jQuery MiniUI是跨平台的，可以在php中使用。
使用时，php负责实现后台数据服务，界面交给miniui就可以了。



欢迎光临 jQuery MiniUI (http://miniui.com/discuss/) Powered by Discuz! X2