传统基于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页面
代码：
<head> <title>Hello JQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>jQuery 入门</h1> </div> <div data-role="content"> Hello world! </div> <div data-role="footer"> Demo Application </div> </div> </body>
|
代码解释：
1、引入js和css包，你也可以把这些包下载到本地，直接部署到应用中，这对于需要发布的企业应用是不错的选择。
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </script> |
2、data-role是html5的属性，JQM用data-role来把其核心的功能连贯起来。图示：
注：截图用的是Chrome，当然你可以放到Tomcat或者任何一个应用服务器，通过IPad/IPhone或者Android系统的移动设备访问，效果是一样的。
第二个JQM页面
一个完整的企业应用离不开数据的提交，即离不开表单，下面这个例子，我们来看看，JQM的表单实现效果：
代码：
<head> <title>Form of JQuery Mobile</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" /> <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script> </script> <body> <div data-role="page"> <div data-role="header"> <h1>jQuery 表单应用</h1> </div> <div data-role="content"> <form action="" method="post"> <div data-role="fieldcontain"> <label for="name">Text Input:</label> <input type="text" name="name" id="name" value="" /> </div>
<div data-role="fieldcontain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div>
</form>
</div> <div data-role="footer"> Demo Application </div> </div> </body> |
图示：
这个例子中，我只介绍了两个控件的使用，其它的控件使用方法都一样，如果你想看到更多效果，可以参考JQM的demo：http://jquerymobile.com/demos/1.0a4.1/。对于数据验证，你可以像以前一样用js校验数据，也可以利用JQM自带的验证进行，跟以前没什么区别。
从上面的两个例子中可以看出，这跟开发传统的web应用并无什么区别，这不仅降低了学习曲线，也提高了开发的效率。希望看了这篇文章好，能为你的技术选型有所帮助。
技术成就梦想，技术改变生活，不是吗？移动互联网和类JQM应用的出现，再一次改变了我们。
随时随地看视频
