精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
---|---|
作者 | 正文 |
发表时间:2012-12-18
最后修改:2012-12-19
最近一直在研究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框架,大家可以看我之前发的资讯帖子来了解: 声明:ITeye文章版权属于作者,受法律保护。没有作者书面许可不得转载。
推荐链接
|
|
返回顶楼 | |
发表时间:2012-12-19
最后修改:2012-12-19
在jQuery Mobile还没出生的时候,dojo就这样啦……(此处省略一万字)
|
|
返回顶楼 | |
发表时间:2012-12-19
hellostory 写道 在jQuery Mobile还没出生的时候,dojo就这样啦……(此处省略一万字)
是的,DOJO也是这样,使用data-dojo-type来标识组件,data-dojo-props来添加自定义属性。不过除此之外再没什么共同之处了,不像jQuery Mobile这样和我的思路如此接近。 |
|
返回顶楼 | |
发表时间:2012-12-20
jqueryUI和easyUI不都已经是这样的了吗……标签化的前台框架才是主流,维护和扩展都很方便,即使不懂JS的美工也能进行开发
说到这里我又忍不住想吐槽EXT了… |
|
返回顶楼 | |
浏览 8127 次