jQuery MiniUI開發系列之：建立組件對象

標籤：c   style   class   java   a   http   

原文：http://miniui.com/bbs/forum.php?mod=viewthread&tid=20&extra=page%3D1

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標籤化配置方式，來產生介面。
也是所有樣本中預設的書寫方式，大家可以很好的學習使用特點。