首页 > 代码库 > 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框架的异曲同工之处