最近一直在研究jQuery Mobile框架，這是jQuery的官方移動版UI框架，專門用來開發手機與平板電腦方面的應用。結果越來越覺得它和我的QUI框架的開發思路非常相似，很多地方都有異曲同工之妙。jQuery Mobile框架倡導wire less ,do more，QUI框架中我花了很多心思讓開發更加便捷，發現和jQuery Mobile框架用的手段非常相似，看來真的是英雄所見略同呢。

下面我來舉幾個例子：

1、默認對傳統標簽進行增強式渲染，實現組件的美化目的

在jQuery Mobile中，頁面初始化時引擎會自動將傳統標簽渲染成適合觸摸的外觀。例如按鈕標簽：

<input type="button" value="Button" />

渲染后的效果如下：

文本框標簽：

<input type="text" name="name" id="name" value="" />

渲染后的效果如下：

在QUI中，頁面初始化時引擎會自動將傳統標簽渲染具有美化的外觀樣式，效果如下：

如果不想讓引擎渲染傳統標簽，在jQuery Mobile中，為標簽添加data-role="none"；在QUI中，為標簽添加keepDefaultStyle="true"

2、對其他html標簽添加特殊標記來創建擴展的組件

在jQuery Mobile中，為標簽添加data-role=xxx，這樣在頁面初始化時會將這些標簽渲染成相應的組件。例如為鏈接添加data-role="button"，如下：

<a href="index.html" data-role="button">Link button</a>

則會渲染為一個按鈕：

為div添加data-role="header"，如下：

<div data-role="header">

         <h1>Page Title</h1>

</div>

則會渲染為一個標題欄：

在QUI中，為標簽添加class=xxx來實現擴展組件的渲染。例如為div添加class="selectTree"，如下：

<div class="selectTree" url="xxx"></div>

其中，url用于返回JSON數據，這樣就創建了一個屬性下拉框：

為input標簽添加class="keypad"，如下：

<input class="keypad" type="text"/>

這樣就創建了一個數字選擇器：

3、為標簽添加自定義屬性來擴展組件功能

jQuery Mobile和QUI框架都可以為標簽添加自定義的屬性。例如在jQuery Mobile中，為input標簽添加placeholder屬性實現水?。?/p>

<input type="text" name="username" id="username" value="" placeholder="Username"/>

效果如下：

為a標簽添加data-inline="true"實現按鈕尺寸自定義文字，添加data-mini="true"讓按鈕的樣式為小型按鈕：

<a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>

效果如下：

在QUI框架中，為input標簽添加watermark屬性來實現水?。?/p>

<input type="text" watermark="輸入字母或數字"/>

效果如下：

為select標簽添加colNum="3"可實現將選項分為3列顯示，效果如下：

4、擁有圖標庫，可以與其他組件結合使用

在jQuery Mobile中，通過設置data-icon可以為很多組件添加圖標，例如為按鈕添加圖標：

<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>

效果如下：

在QUI中，也同樣擁有圖標庫，可以為很多組件添加圖標。例如為按鈕添加圖標代碼：

<button type="button"><span class="icon_save">保存</span></button>

<button type="button"><span class="icon_delete">刪除</span></button>

<button type="button"><span class="icon_find">查詢</span></button>

效果如下：

5、組件支持動態創建

jQuery Mobile和QUI中的組件除了可以使用標簽創建外，還支持動態創建dom節點的方式創建組件。

jQuery Mobile中動態創建組件的方式如下：

動態創建dom節點，并添加到頁面中，最后調用create方法進行渲染。

代碼形式如下：

$( 組件dom標簽 ).appendTo( ".ui-page" ).trigger( "create" );

QUI中動態創建組件的方式如下：

動態創建dom節點，并添加到頁面中，最后調用render方法進行渲染。

代碼形式如下：

$( 組件dom標簽 ).appendTo( "body" ).render();

6、組件支持動態修改

jQuery Mobile和QUI中的組件要動態修改時，通過動態調整組件的屬性，然后調用刷新方法進行刷新。例如

jQuery Mobile中動態選中多選按鈕代碼如下：

$("input[type='checkbox']").

jQuery Mobile中動態選中下拉框某項的代碼如下：

var myselect = $("#selectfoo");

myselect[0].selectedIndex = 3;

myselect.selectmenu("refresh");

QUI中動態選中下拉框某項的代碼如下：

$("#sel-1")[0].selectedIndex = 1;

$("#sel-1").render();

如果要禁用下拉框，代碼如下：

$("#sel-1").attr("disabled",true);

$("#sel-1").render();

QUI中渲染與刷新是同一個方法render()，會自動判斷進行處理。

關于QUI框架，大家可以看我之前發的資訊帖子來了解：

http://www.49028c.com/news/26579-ui-web-qui-jquery