最近一直在研究jQuery Mobile框架，這是jQuery的官方移動(dòng)版UI框架，專門用來(lái)開(kāi)發(fā)手機(jī)與平板電腦方面的應(yīng)用。結(jié)果越來(lái)越覺(jué)得它和我的QUI框架的開(kāi)發(fā)思路非常相似，很多地方都有異曲同工之妙。jQuery Mobile框架倡導(dǎo)wire less ,do more，QUI框架中我花了很多心思讓開(kāi)發(fā)更加便捷，發(fā)現(xiàn)和jQuery Mobile框架用的手段非常相似，看來(lái)真的是英雄所見(jiàn)略同呢。
下面我來(lái)舉幾個(gè)例子：
1、默認(rèn)對(duì)傳統(tǒng)標(biāo)簽進(jìn)行增強(qiáng)式渲染，實(shí)現(xiàn)組件的美化目的
在jQuery Mobile中，頁(yè)面初始化時(shí)引擎會(huì)自動(dòng)將傳統(tǒng)標(biāo)簽渲染成適合觸摸的外觀。例如按鈕標(biāo)簽：
<input type="button" value="Button" />
渲染后的效果如下：
文本框標(biāo)簽：
<input type="text" name="name" id="name" value="" />
渲染后的效果如下：
在QUI中，頁(yè)面初始化時(shí)引擎會(huì)自動(dòng)將傳統(tǒng)標(biāo)簽渲染具有美化的外觀樣式，效果如下：
如果不想讓引擎渲染傳統(tǒng)標(biāo)簽，在jQuery Mobile中，為標(biāo)簽添加data-role="none"；在QUI中，為標(biāo)簽添加keepDefaultStyle="true"
2、對(duì)其他html標(biāo)簽添加特殊標(biāo)記來(lái)創(chuàng)建擴(kuò)展的組件
在jQuery Mobile中，為標(biāo)簽添加data-role=xxx，這樣在頁(yè)面初始化時(shí)會(huì)將這些標(biāo)簽渲染成相應(yīng)的組件。例如為鏈接添加data-role="button"，如下：
<a href="index.html" data-role="button">Link button</a>
則會(huì)渲染為一個(gè)按鈕：
為div添加data-role="header"，如下：
<div data-role="header">
<h1>Page Title</h1>
</div>
則會(huì)渲染為一個(gè)標(biāo)題欄：
在QUI中，為標(biāo)簽添加class=xxx來(lái)實(shí)現(xiàn)擴(kuò)展組件的渲染。例如為div添加class="selectTree"，如下：
<div class="selectTree" url="xxx"></div>
其中，url用于返回JSON數(shù)據(jù)，這樣就創(chuàng)建了一個(gè)屬性下拉框：
為input標(biāo)簽添加class="keypad"，如下：
<input class="keypad" type="text"/>
這樣就創(chuàng)建了一個(gè)數(shù)字選擇器：
3、為標(biāo)簽添加自定義屬性來(lái)擴(kuò)展組件功能
jQuery Mobile和QUI框架都可以為標(biāo)簽添加自定義的屬性。例如在jQuery Mobile中，為input標(biāo)簽添加placeholder屬性實(shí)現(xiàn)水印：
<input type="text" name="username" id="username" value="" placeholder="Username"/>
效果如下：
為a標(biāo)簽添加data-inline="true"實(shí)現(xiàn)按鈕尺寸自定義文字，添加data-mini="true"讓按鈕的樣式為小型按鈕：
<a href="index.html" data-role="button" data-inline="true" data-mini="true">Cancel</a>
效果如下：
在QUI框架中，為input標(biāo)簽添加watermark屬性來(lái)實(shí)現(xiàn)水印：
<input type="text" watermark="輸入字母或數(shù)字"/>
效果如下：
為select標(biāo)簽添加colNum="3"可實(shí)現(xiàn)將選項(xiàng)分為3列顯示，效果如下：
4、擁有圖標(biāo)庫(kù)，可以與其他組件結(jié)合使用
在jQuery Mobile中，通過(guò)設(shè)置data-icon可以為很多組件添加圖標(biāo)，例如為按鈕添加圖標(biāo)：
<a href="index.html" data-role="button" data-icon="delete" data-inline="true">Cancel</a>
效果如下：
在QUI中，也同樣擁有圖標(biāo)庫(kù)，可以為很多組件添加圖標(biāo)。例如為按鈕添加圖標(biāo)代碼：
<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、組件支持動(dòng)態(tài)創(chuàng)建
jQuery Mobile和QUI中的組件除了可以使用標(biāo)簽創(chuàng)建外，還支持動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)的方式創(chuàng)建組件。
jQuery Mobile中動(dòng)態(tài)創(chuàng)建組件的方式如下：
動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)，并添加到頁(yè)面中，最后調(diào)用create方法進(jìn)行渲染。
代碼形式如下：
$( 組件dom標(biāo)簽 ).appendTo( ".ui-page" ).trigger( "create" );
QUI中動(dòng)態(tài)創(chuàng)建組件的方式如下：
動(dòng)態(tài)創(chuàng)建dom節(jié)點(diǎn)，并添加到頁(yè)面中，最后調(diào)用render方法進(jìn)行渲染。
代碼形式如下：
$( 組件dom標(biāo)簽 ).appendTo( "body" ).render();
6、組件支持動(dòng)態(tài)修改
jQuery Mobile和QUI中的組件要?jiǎng)討B(tài)修改時(shí)，通過(guò)動(dòng)態(tài)調(diào)整組件的屬性，然后調(diào)用刷新方法進(jìn)行刷新。例如
jQuery Mobile中動(dòng)態(tài)選中多選按鈕代碼如下：
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
