jQuery Mobile与QUI框架的异曲同工之处

  最近一直在研究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属性实现水印：

<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属性来实现水印：

<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']").prop("checked",true).checkboxradio("refresh");

 

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.iteye.com/news/26579-ui-web-qui-jquery