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

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多个属性。如：

grid.set({

    url: "getdata.jsp",

    style: "width:700px;height:280px;",

    columns: [ ... ]

    ...

});

复制代码
这样，就不用写多个setUrl、setStyle、setColumns方法，而只需要写一个set方法。

3）事件处理函数对象。

grid.on("rowclick", onRowClick);

function onRowClick(e){

    var grid = e.sender;//sender是组件对象本身

    //...

}

复制代码
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标签化配置方式，来生成界面。

也是所有示例中默认的书写方式，大家可以很好的学习使用特点。

网站地址：http://www.miniui.com/demo/

论坛地址：http://miniui.com/bbs/forum.php?mod=viewthread&tid=20&extra=page%3D1