jQuery MiniUI开发系列之：创建组件对象

fcrong

jQuery MiniUI可以使用Javascript和Html两种方式来创建对象。

1）Javascript创建对象
使用JavaScript创建对象，是最基本的方式，有如下几个要点：
1）使用new关键字。如: var grid = new mini.DataGrid();
2）使用set方法设置属性。如：grid.setUrl("getdata.jsp");
3）使用on方法监听事件。如：grid.on("rowclick", onRowClick);
4）使用render方法，呈现到页面。如：grid.render(document.body);

常见注意点：
1）构造器参数为空。创建任何一个MiniUI控件对象，都是：var button = new mini.Button(); 构造器函数是没有参数的。
2）可以批量set多个属性。如：

1. grid.set({
   
2.     url: "getdata.jsp",
   
3.     style: "width:700px;height:280px;",
   
4.     columns: [ ... ]
   
5.     ...
   
6. });

复制代码

这样，就不用写多个setUrl、setStyle、setColumns方法，而只需要写一个set方法。
3）事件处理函数对象。

1. grid.on("rowclick", onRowClick);
   
2. function onRowClick(e){
   
3.     var grid = e.sender;//sender是组件对象本身
   
4.     //...
   
5. }

复制代码

4）每个组件都有一个dom元素。如：var el = grid.getEl()。获得组件dom元素后，开发者可以将dom用传统的javascript方式加入到任何位置。

2）Html标签创建对象
jQuery MiniUI推荐使用Html标签配置的方式来创建对象。
当创建一个单独的表格对象时，javascript和html两种方式没什么区别。
当创建一个复杂表单界面时，html标签配置的优点就显露无遗了。

Html创建方式如下：
1）使用class来命名控件。如：<div class="mini-datagrid"></div>。
2）等号设置属性。如：<div class="mini-datagrid" url="getdata.jsp"></div>。
3）"on"加事件名绑定事件。如：<div class="mini-datagrid"></div>。

常见注意点：
1）组件的class类名，都是"mini-"加小写类名。如"mini-button"、"mini-textbox"、"mini-tree"、"mini-tabs”等。
2）事件名必须小写。不能出现“onClick”、"onRowClick"这样的命名方式。
3）事件绑定函数，没有括号。不能出现onclick="onClick()"、onrowclick="onRowClick()"等。
4）Html标签占位，即组件位置。不需要再调用"render"方法进行呈现。
5）通过id获取组件对象。如<div id="grid1" class="mini-datagrid"></div>定义后，可以通过：var grid = mini.get("grid1");来获取组件对象。之后的操作参考Javascript方式。

从简洁、快速、规范的开发角度，jQuery MiniUI建议使用Html标签化配置方式，来生成界面。
也是所有示例中默认的书写方式，大家可以很好的学习使用特点。