jQuery MiniUI

 找回密码
 立即注册
查看: 20761|回复: 0
打印 上一主题 下一主题

jQuery MiniUI开发系列之:使用API文档   [复制链接]

Rank: 9Rank: 9Rank: 9

跳转到指定楼层
楼主
发表于 2012-3-17 16:39:07 |只看该作者 |倒序浏览
jQuery MiniUI在组件设计上,是简约、独立的,没有复杂的继承体系。
比如使用DataGrid,可以在api文档的datagrid部分,查找到datagrid的所有属性、方法、事件,而无需关注除datagrid之外的任何组件内容。

下面,我们通过查看和理解datagrid的api,来学习如何使用api文档。
1)打开http://www.miniui.com/docs/api,查看datagrid。

2)datagrid的顶部全名是"mini.DataGrid。
通过这个信息,我们可以分别使用javascript和html来创建对象:
Javascript方式:var grid = new mini.DataGrid();
Html方式:<div class="mini-datagrid"></div>;

3)在"Properties”属性表格内,有一些属性名称、数据类型、描述和默认值。
比如"url"属性是“String”类型,我们可以这样操作:
Javascript方式:grid.setUrl("getdata.jsp");
Html方式:<div class="mini-datagrid" url="getdata.jsp"></div>

4)在"Methods"方法表格,有一些方法名称、参数、描述和返回类型。
这些都是公开方法,可以直接调用。
如:grid.gotoPage(0, 1);

5)在"Events"事件表格,有事件名称、事件对象属性、描述。
比如"rowclick"事件,我们可以这样调用:
Javascript方式:grid.on("rowclick", onRowClick);
Html方式:<div class="mini-datagrid"></div>。

使用API时,需要注意如下几点:
1)Html方式创建时,class一般是"mini-"加上小写类名。如"mini-button"、"mini-tree"、"mini-datagrid"。
2)一个属性,对应一个set方法。如:url对应setUrl、data对应setData、columns对应setColumns等,这些方法并没有在“Mehotds”中显示声明,但是照样可以调用,作为属性的一个约定。
3)Html方式设置时,属性数据类型:
      String:字符串。如url="getdata.jsp"、valueField="id"、style="width:500px;height:300px"。
      Boolean:布尔值。如showPager="true"、showHeader="false"。
      Number:数字。如pageSize="20"、pageIndex="0"。
      Date:日期。如DatePicker的value="2010-11-12"。
      Array:数组。不能直接设置,通过方法调用,如grid.setData([ ])。还有比如columns属性就通过特殊的方式设置,具体可以参考任何一个datagrid示例。
3)事件名必须小写。不能出现“onClick”、"onRowClick"这样的命名方式。
4)事件绑定函数,没有括号。不能出现onclick="onClick()"、onrowclick="onRowClick()"等。

通过datagrid的API使用理解,其他组件的API使用也就一目了然了。
可以说,jQuery MiniUI在使用上是极其简单、规范的,而功能是极其强大、丰富的。

Archiver|普加软件

GMT+8, 2024-11-25 18:11 , Processed in 1.040100 second(s), 9 queries .

Powered by Discuz! X2

© 2001-2011 Comsenz Inc.

回顶部