使用jQuery Mobile和JSON创建移动应用程序

2011-09-02 23:24 狼人:-) 阅读(292) 评论(0) 编辑收藏举报

　　近来移动应用开发迅速受到很多公司的关注，他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有，大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于Web的框架则不同。业界当前采用jQuery来创建移动web应用程序（上个月发布了jQuery Mobile Alpha 3）。

　　在移动领域，除了对设备特定属性的支持之外，最主要的一个问题就是程序的大小，正如Aaron Quint所说：

压缩后的jQuery也大概有40-50K，可能还会稍微多一些，此外，如果你想要jQuery UI和一些动画功能，那么就还需要100K。对于移动设备来说，可能没有那么多空间。

　　JQM Alpha 3现在已经精简到17K，其中还有相关的CSS文件。

　　Enrique Ortiz还发现了JQM的其他优势：

总体上的简单性：你可以主要使用标签驱动的方式开发页面，那样，你只需要使用很少或者不使用JavaScript。

进一步改善和得体的降格： jQuery Mobile哲学是要同时支持高端和性能较差的设备，包括那些不支持JavaScript的设备，并且还要尽可能提供最佳体验。

可访问性： jQuery已经支持可访问的富Internet应用程序（WAI-ARIA），以有助于使用辅助技术让有残疾的访问者也能够访问网页。

小文件

主题

　　安装JQM很简单，只需要添加一个样式表文件和三个JavaScript文件：

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1 /jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"> </script>
<script src="http://jquery.ibm.navitend.com/utils.js"></script>

　　此外，Frank还提到，在移动领域JQM的关键优势就在于，它能够使用AJAX让用户界面更平滑：

JQM把Ajax提升了一个层次，这是通过拦截页面请求，并在大多数情况下把这些请求转化为指定的Ajax调用达到的。最基本的结果是，当用户访问使用JQM构建的web应用程序时，只会修改页面的DOM结构，而不是每次都替换所有页面。

　　这种效果是通过使用HTML5的data-*属性达到的。在HTML5中，任何带有data-前缀的属性本质上都会被验证解析器忽略，而应用程序可以任意地拦截那些属性。JQM依赖于data-role属性把它的核心功能组合成字符串。

当JQM应用程序从一个页面切换到下一个页面时，发生的主要动作就是内容div中的内容会换成新页面的内容。

　　我们可以使用data-rel属性请求窗口如何显示，当它显示出来的时候，data-transition属性会告诉JQM做出相应的转换。我们可以使用data-filter属性来指定data-role列表的行为，而该列表可以基于输入的关键字来过滤列表的值。Frank还说明了如何创建自定义的data-*属性，从而实现应用程序的特殊属性。

　　JQM会在今年上半年发布。Frank最后做出结论：