首页 > 代码库 > jQuery Mobile与QUI框架的异曲同工之处
jQuery Mobile与QUI框架的异曲同工之处
最近一直在研究jQuery Mobile框架，这是jQuery的官方移动版UI框架，专门用来开发手机与平板电脑方面的应用。结果越来越觉得它和我的QUI框架的开发思路非常相似，很多地方都有异曲同工之妙。jQuery Mobile框架倡导wire less ,do more，QUI框架中我花了很多心思让开发更加便捷，发现和jQuery Mobile框架用的手段非常相似，看来真的是英雄所见略同呢。
下面我来举几个例子：
1、默认对传统标签进行增强式渲染，实现组件的美化目的
在jQuery Mobile中，页面初始化时引擎会自动将传统标签渲染成适合触摸的外观。例如按钮标签：
<input type="button" value=http://www.mamicode.com/"Button" />
渲染后的效果如下：
文本框标签：
<input type="text" name="name" id="name" value=http://www.mamicode.com/"" />
渲染后的效果如下：
在QUI中，页面初始化时引擎会自动将传统标签渲染具有美化的外观样式，效果如下：
如果不想让引擎渲染传统标签，在jQuery Mobile中，为标签添加data-role="none"；在QUI中，为标签添加keepDefaultStyle="true"
2、对其他html标签添加特殊标记来创建扩展的组件。精心开发5年的UI前端框架！
在jQuery Mobile中，为标签添加data-role=xxx，这样在页面初始化时会将这些标签渲染成相应的组件。例如为链接添加data-role="button"，如下：
<a href=http://www.mamicode.com/"index.html" data-role="button">Link button
则会渲染为一个按钮：
为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、为标签添加自定义属性来扩展组件功能。精心开发5年的UI前端框架！
jQuery Mobile和QUI框架都可以为标签添加自定义的属性。例如在jQuery Mobile中，为input标签添加placeholder属性实现水印：
<input type="text" name="username" id="username" value=http://www.mamicode.com/"" placeholder="Username"/>
效果如下：
为a标签添加data-inline="true"实现按钮尺寸自定义文字，添加data-mini="true"让按钮的样式为小型按钮：
<a href=http://www.mamicode.com/"index.html" data-role="button" data-inline="true" data-mini="true">Cancel
效果如下：
在QUI框架中，为input标签添加watermark属性来实现水印：
<input type="text" watermark="输入字母或数字"/>
效果如下：
为select标签添加colNum="3"可实现将选项分为3列显示，效果如下：
4、拥有图标库，可以与其他组件结合使用。精心开发5年的UI前端框架！
在jQuery Mobile中，通过设置data-icon可以为很多组件添加图标，例如为按钮添加图标：
<a href=http://www.mamicode.com/"index.html" data-role="button" data-icon="delete" data-inline="true">Cancel
效果如下：
在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框架，大家可以点击这里来了解：精心开发5年的UI前端框架！
jQuery Mobile与QUI框架的异曲同工之处