jQuery MiniUI

 找回密码
 立即注册
查看: 20553|回复: 0

jQuery MiniUI开发系列之:创建组件对象   [复制链接]

Rank: 9Rank: 9Rank: 9

发表于 2012-3-17 15:57:28 |显示全部楼层
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标签化配置方式,来生成界面。
也是所有示例中默认的书写方式,大家可以很好的学习使用特点。



Archiver|普加软件

GMT+8, 2024-3-29 19:56 , Processed in 1.016892 second(s), 10 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部