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

  近来移动应用开发迅速受到很多公司的关注,他们寻求为现存的产品和应用程序添加移动展现或者“触点”。即便不是所有,大部分移动应用开发框架也都会适应某种现存的“桌面”开发平台。基于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最后做出结论:

随着时间的推移,我们期望它能够整合到像PhoneGap之类的框架中,并且可能会整合到像Appcelerator的Titanium等开发环境中。

  你认为基于Web的移动应用程序有前途吗? 这只是框架和开发是否简单的问题,还是移动应用程序非常特殊(因为用户会使用自己的客户端,并期望获得最好的用户体验和安全性)以致于基于Web的应用程序只会成为新平台上的边缘程序。

  查看英文原文:Using JQuery Mobile and JSON to Create Mobile Applications

时间: 2024-10-31 03:34:46

使用jQuery Mobile和JSON创建移动应用程序的相关文章

分析jQuery Mobile中实现多语言的支持以及优缺点

随着移动技术的普及,基于 jQuery 并且针对移动平台的 JavaScript 框架 jQuery Mobile 应运而生.jQuery Mobile 不仅承袭了 jQuery 的诸多优点,更为移动平台定制了许多皮肤和开发部件,大大减轻了开发人员的工作量.随着 HTML5 技术的日渐完善,加上 JavaScript 技术本身具有的跨平台特性,jQuery Mobile 或者类似的框架必然拥有更加广泛的市场,这从 Adobe 放弃移动 Flash 和 Microsoft 边缘化 SilverLi

经典收藏 50个jQuery Mobile开发技巧集萃

1.Backbone移动实例 这是在Safari中运行的一款Backbone移动应用程序.想开始体验移动开发,一个好的出发点就是关注这个应用程序的构建方式.先不妨在你的浏览器中查看该应用程序. 相关链接:http://bennolan.com/2010/11/24/backbone-jquery-demo.html 2.使用媒体查询来锁定设备 你可能会问如何使用CSS来锁定设备(根据屏幕尺寸).比如说,你想要为iPad设计两列布局.为智能手机设计单列布局.要做到这一点,最佳办法就是使用媒体查询.

18 个 jQuery Mobile 开发贴士和教程

jQuery Mobile 是 jQuery 在手机上和平板设备上的版本.jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架.支持全球主流的移动平台. Hardboiled CSS3 Media Queries 在 jQuery Mobile 中使用 Google Analytics 通过 Ajax 和 PHP 提交 jQuery Mobile表单 使用 jQuery Mobile 创建一个 WordPress 的移动版本 使

jQuery Mobile页面返回不需要重新get_jquery

jQuery Mobile 是用于创建移动 Web 应用的前端开发框架. jQuery Mobile 可以应用于智能手机与平板电脑. jQuery Mobile 使用 HTML5 & CSS3 最小的脚本来布局网页. 最近公司的web app项目,使得我有幸一直接触和学习jQuery Mobile.这确实是一个很不错的移动开发库,有助于擅长web开发的工程师,快速入门并构建自己的移动应用.但是在前两天,我碰到了一个问题,使我查了很多资料都没有找到很好的解决方案,最终只能逼着我读jQuery Mo

《jQuery Mobile入门经典》—— 2.1 使用HTML创建内容

2.1 使用HTML创建内容 jQuery Mobile入门经典HTML是Web的基本构件.它是支撑整个网站的框架结构,也是让您随意扩展网站的基础.HTML自诞生以来已经取得长足的进步,并将继续演进和发展. 2.1.1 HTML的作用 在层叠样式表单(CSS)引入之前,HTML标记处理所有东西.图像.文本.布局以及滚动的文本,几乎所有东西都由HTML标记来表示.您可能还记得在浏览器中查看源代码时,看到许多用于布局用途的   字符实体. 随着开发者热切期望探索新的领域并推动语言的发展,事情不断变得

jquery mobile中怎么将input和button放在同一行

问题描述 jquery mobile中怎么将input和button放在同一行 jquery mobile中怎么将input和button放在同一行 解决方案 <div class="ui-grid-a"> <div class="ui-block-a"> <input name="telcx" id="telcx" type="tel" value=""

jQuery Mobile教程:表单selectmenu插件

文章简介:本文我们来深度认识一下jQuery Mobile的selectmenu插件. 本文我们来深度认识一下jQuery Mobile的selectmenu插件 主要让大家熟悉一下动态创建selectmenu.禁用selectmenu以及启用selectmenu 1.动态创建input 示例: //动态创建 $("#dynamic_selectmenu").bind('click',function(){ //一次哦 if($("#your_choice_new"

jQuery Mobile教程:表单的checkboxradio插件

文章简介:本文我们来深度认识一下jQuery Mobile的checkboxradio插件. 本文我们来深度认识一下jQuery Mobile的checkboxradio插件 表单中的radio与checkbox都依赖它进行初始化增强以及一些事件的绑定(disable.enable.checked.unchecked)等 1.disable(禁用) 示例: //禁用 $("#disable_checkbox").bind('click',function(){ $("#maj

jQuery Mobile教程:表单textinput插件

文章简介:本文我们来深度认识一下jQuery Mobile的textinput插件. 本文我们来深度认识一下jQuery Mobile的textinput插件 主要让大家熟悉一下动态创建input.禁用input以及启用input 1.动态创建input 示例: //动态创建 $("#dynamic_input").bind('click',function(){ //一次哦 if($("#dynamic_input_new").length < 1){ va