巧用jQuery建设跨平台应用

不少脚本程序员都使用jQuery发送ajax请求,其内置的回呼函数能够轻松跨浏览器处理返回数据。鲜为人知的是,结合jQuery UI和jQuery Mobile,jQuery框架集是建设跨平台应用的独门利器。

jQuery本身就支持不少实用的跨平台函数,以HTML元素选择为例,$('div > span')就可以选择所有父亲为div的span元素。无论浏览器是否支持CSS3,此语句都能成功执行。担心浏览器js引擎的for..in语句运行 差异么?我们可以使用$.each()安全地循环处理字典和阵列中的值。要是喜欢使用class操纵元素样式,addClass和removeClass 都是经典函数。

jQuery UI更是前端开发的高级工具,它提供了几个模块化插件,帮助我们实现一些通用的小脚本。UI 1.9在十月发布后,引入了Tooltip插件,一句$(document).tooltip()就能将所有的原生气泡提示(title气泡)替换成统一 样式,方便开发者统一应用界面。UI Datepicker不用介绍,它是最热门的自定义格式日期选择器,其界面也有多种设定,省时省力,极光账本的记账日期选择器就是Datepicker的 中文化版本。十分常用的插件还有UI Dialog,它替代了原生的alert(), confirm()等函数,还能生成半透明蒙板,将用户注意力引向对话框。UI对平板的支持十分到位,UI Button, UI Tabs等插件的按钮尺寸都非常适合手指操作。极光账本所有的按钮元素和文本输入框都应用了UI Button样式,标题是UI Header样式,看起来十分大方、美观。玩过UI官网上的ThemeRoller么?您也可以将其部署在您的应用上,您的用户就能个性化自已的页面主题 啦。

jQuery家族的最新成员Mobile不像是javascript框架,更像一个移动应用框架。我们只需按照Mobile的HTML5语法编写网 页,Mobile就能帮您生成移动网页甚至原生的安卓、苹果等平台应用。其实现方式就是在元素中加入特有的data-role属性,Mobile在加载后 就会自动将元素修饰成适合移动设备的样式。所有页面链接都被Mobile接管,自动调用$.ajax异步载入,成功后再调用fadeIn和fadeOut 切换页面。由此实现类似于原生应用的换页体验。受益于网页应用的跨平台特性,编写的jQuery Mobile应用能运行在所有设备上,无需重复开发。极光账本有全套现成的记账api,掌上账本只需调用api就能实现所有功能,免除了后台开发。 Mobile自带的Popup插件和安卓原生的Toast类似,所以极光大量应用了Popup显示提示信息。

jQuery发展迅猛,在2013年第一季推出的Core 2.0版将不再支持IE8及以下版本。随着移动浏览器的更新,跨平台网页应用的兴起指日可待。

你可能感兴趣的:(jquery,html5)