技术开发 频道

基于JQuery Mobile的Web App实践

三、JQuery Mobile使用实例

  上面简单介绍了JQuery Mobile的基本用法,下面将以具体例子实现一个简单Web App。示例是以调用restAPI的方式获取Web端数据的一个云计算portal简单Web App。

  1、创建一个html网页instance.html,导入jquery和jquery.mobile.依赖。并创建主页面index和详情页面Detai基本结构。

基于JQuery Mobile的Web App实践

  2、为主页面index添加主题选择、按关键字查询的搜索框、导航栏以及ajax加载数据后显示的列表。

基于JQuery Mobile的Web App实践

  3、detail页面添加对虚机的详情描述信息以及开关机等按钮。

基于JQuery Mobile的Web App实践

  4、绑定主题选择事件

基于JQuery Mobile的Web App实践

  5、在页面创建时加载数据

基于JQuery Mobile的Web App实践

  6、绑定搜索,详情按钮、开关机按钮事件

基于JQuery Mobile的Web App实践

  7、编写ajax获取个人实例数据

基于JQuery Mobile的Web App实践

  8、获取detail信息

基于JQuery Mobile的Web App实践

  9、开机

基于JQuery Mobile的Web App实践

  10、关机

基于JQuery Mobile的Web App实践

  四.总结

  随着移动设备的普及,移动端设备越来越高端,移动端的浏览器也越来越接近甚至超越PC端浏览器的性能,Web App也随着兴起,相较于原生App来说Web App使用W3C标准的HTML语言开发,能够轻松的实现跨平台,移动应用开发者不再需要考虑复杂的底层适配和跨平台开发语言的问题,原生App能实现的一些特殊功能如:本地数据存储、音频播放、调用照相机等现在Web App也同样可以实现。在开发时间方面Web App的迭代周期要远远短于原生App,并且用户不需要频繁的重新下载或升级。从用户体验方面来说Web App既有Web的特性同时又有原生App的特性,Web App与传统互联网是互联的,从一个Web App可以直接跳转到另一个Web App。

  JQuery Mobile便是为主流的移动平台提供的一个JQuery核心类库,同JQuery一样,JQuery Mobile是一个免费开源的项目,受到越来越多的开发人员的关注,它有着丰富的界面样式、强大的自适应能力、各种移动设备上可触发的事件,并且JQuery Mobile同时可支持高端和低端设备。

  本文通过对JQuery Mobile的各个知识点的具体使用分析并且提供了一个完整的案例。相信对于即将使用JQuery Mobile开发Web App的开发人员有一定的帮助。


1
相关文章