码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2015-10-14 13:58:36      阅读:146      评论:0      收藏:0      [点我收藏+]

标签:

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标签化配置方式,来生成界面。
也是所有示例中默认的书写方式,大家可以很好的学习使用特点。

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

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

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

标签:

原文地址:http://www.cnblogs.com/gantt/p/4877022.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!