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

fcrong

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