jQuery MiniUI开发系列之：使用API文档

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"、。

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在使用上是极其简单、规范的，而功能是极其强大、丰富的。

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

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