首页 > 代码库 > jQuery MiniUI开发系列之:创建组件对象
jQuery MiniUI开发系列之:创建组件对象
原文:http://miniui.com/bbs/forum.php?mod=viewthread&tid=20&extra=page%3D1
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标签化配置方式,来生成界面。
也是所有示例中默认的书写方式,大家可以很好的学习使用特点。