论坛首页 Web前端技术论坛

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

浏览 8126 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2012-12-18   最后修改:2012-12-19

 

    最近一直在研究jQuery Mobile框架,这是jQuery的官方移动版UI框架,专门用来开发手机与平板电脑方面的应用。结果越来越觉得它和我的QUI框架的开发思路非常相似,很多地方都有异曲同工之妙。jQuery Mobile框架倡导wire less ,do moreQUI框架中我花了很多心思让开发更加便捷,发现和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 MobileQUI框架都可以为标签添加自定义的属性。例如在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 MobileQUI中的组件除了可以使用标签创建外,还支持动态创建dom节点的方式创建组件。

 

jQuery Mobile中动态创建组件的方式如下:

动态创建dom节点,并添加到页面中,最后调用create方法进行渲染。

代码形式如下:

$( 组件dom标签 ).appendTo( ".ui-page" ).trigger( "create" );

 

QUI中动态创建组件的方式如下:

动态创建dom节点,并添加到页面中,最后调用render方法进行渲染。

代码形式如下:

$( 组件dom标签 ).appendTo( "body" ).render();

 

 

6、组件支持动态修改

jQuery MobileQUI中的组件要动态修改时,通过动态调整组件的属性,然后调用刷新方法进行刷新。例如

 

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

  • 大小: 2.2 KB
  • 大小: 1003 Bytes
  • 大小: 5.8 KB
  • 大小: 2.5 KB
  • 大小: 2.3 KB
  • 大小: 8.3 KB
  • 大小: 5.4 KB
  • 大小: 1.3 KB
  • 大小: 1.7 KB
  • 大小: 1.2 KB
  • 大小: 26.9 KB
  • 大小: 2.5 KB
  • 大小: 2.5 KB
   发表时间:2012-12-19   最后修改:2012-12-19
在jQuery Mobile还没出生的时候,dojo就这样啦……(此处省略一万字)
0 请登录后投票
   发表时间:2012-12-19  
hellostory 写道
在jQuery Mobile还没出生的时候,dojo就这样啦……(此处省略一万字)

是的,DOJO也是这样,使用data-dojo-type来标识组件,data-dojo-props来添加自定义属性。不过除此之外再没什么共同之处了,不像jQuery Mobile这样和我的思路如此接近。
0 请登录后投票
   发表时间:2012-12-20  
jqueryUI和easyUI不都已经是这样的了吗……标签化的前台框架才是主流,维护和扩展都很方便,即使不懂JS的美工也能进行开发
说到这里我又忍不住想吐槽EXT了…
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics