您的位置：首页 > 职场人生

用JQM创建企业移动web应用 推荐

2011-04-24 23:16 309 查看
传统基于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[/b]
[/b]
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>
图示：[/b]




这个例子中，我只介绍了两个控件的使用，其它的控件使用方法都一样，如果你想看到更多效果，可以参考JQM的demo：http://jquerymobile.com/demos/1.0a4.1/。对于数据验证，你可以像以前一样用js校验数据，也可以利用JQM自带的验证进行，跟以前没什么区别。
从上面的两个例子中可以看出，这跟开发传统的web应用并无什么区别，这不仅降低了学习曲线，也提高了开发的效率。希望看了这篇文章好，能为你的技术选型有所帮助。
技术成就梦想，技术改变生活，不是吗？移动互联网和类JQM应用的出现，再一次改变了我们。

附件：http://down.51cto.com/data/2357995
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  职场 休闲 企业应用 移动互联网 JQM
相关文章推荐
新的分享
章节导航