用JQM创建企业移动web应用

传统基于WAP的应用，由于缺乏良好的交互性，使需要大量的数据交互和良好用户体验的企业应用望而却步。随着移动互联网及智能终端的发展，特别是基于iOS、Android的web浏览器支持html5及javascript，使得企业应用支持移动web成为可能。

JQM(JQuery Mobile)致力于提供跨平台和跨移动设备的统一的用户体验，只需用标准的语言编写运用，就能通过web浏览器在多个平台上运行，不在需要为特定移动平台定制程序了。JQM为触屏设备定制，是开发触屏应用的最优选择。JQM目前的版本是alpha4.1,支持的移动平台包括：

本文是JQM介绍文章，旨在说明JQM是什么怎么用。

如果你曾经使用过JQuery，那么使用JQM会很简单。JQM基于JQuery核心库构建，在使用方法和语法结构上最大程度的保持了一致性。使用JQM开发应用程序跟我们以前使用JQuery，Dojo等类库的思路一样，由于JQM只涉及显示层，后台业务逻辑及数据持久化跟普通web应用完全一样，所以这并不是本文的重点。

准备工作：

1、          准备可以编辑文本的任何工具，这个大家都懂。

2、          下载JQM类库，http://jquerymobile.com/download/

 

Let’s go

1,第一个JQM页面

 

代码：

jQuery 入门                                                     Hello world!                                           Demo Application

代码解释：

1、引入js和css包，你也可以把这些包下载到本地，直接部署到应用中，这对于需要发布的企业应用是不错的选择。

2、data-role是html5的属性，JQM用data-role来把其核心的功能连贯起来。图示：

 

 

注：截图用的是Chrome，当然你可以放到Tomcat或者任何一个应用服务器，通过IPad/IPhone或者Android系统的移动设备访问，效果是一样的。

 

第二个JQM页面

 

一个完整的企业应用离不开数据的提交，即离不开表单，下面这个例子，我们来看看，JQM的表单实现效果：

代码：

jQuery 表单应用                                                                                                                    Text Input:                                   />                                                                                                               Input slider:                              />                                                                                                                                       Demo Application

图示：

这个例子中，我只介绍了两个控件的使用，其它的控件使用方法都一样，如果你想看到更多效果，可以参考JQM的demo：http://jquerymobile.com/demos/1.0a4.1/。对于数据验证，你可以像以前一样用js校验数据，也可以利用JQM自带的验证进行，跟以前没什么区别。

从上面的两个例子中可以看出，这跟开发传统的web应用并无什么区别，这不仅降低了学习曲线，也提高了开发的效率。希望看了这篇文章好，能为你的技术选型有所帮助。

技术成就梦想，技术改变生活，不是吗？移动互联网和类JQM应用的出现，再一次改变了我们。

 

转载于:https://blog.51cto.com/growup/552668