用JQM创建企业移动web应用

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

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

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

如果你曾经使用过JQuery,那么使用JQM会很简单。JQM基于JQuery核心库构建,在使用方法和语法结构上最大程度的保持了一致性。使用JQM开发应用程序跟我们以前使用JQueryDojo等类库的思路一样,由于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=\'#\'" //code.jquery.com/jquery-1.5.2.min.js"></script>

<script src=\'#\'" //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、引入jscss包,你也可以把这些包下载到本地,直接部署到应用中,这对于需要发布的企业应用是不错的选择。

 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />

<script src=\'#\'" //code.jquery.com/jquery-1.5.2.min.js"></script>

<script src=\'#\'" //code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>

</script>

2data-rolehtml5的属性,JQMdata-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=\'#\'" //code.jquery.com/jquery-1.5.2.min.js"></script>

<script src=\'#\'" //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>

图示:

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

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

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

 

你可能感兴趣的:(职场,企业应用,JQM,移动互联网,休闲)