移动Web开发之jQueryMobile

jQueryMobile简介实例10-1：搭建jQueryMobile开发环境综合实例：网上订餐系统实例10-2：搭建测试环境实例10-3：动态滑动条实例10-4：使用选择菜单jQuery是一款优秀的JavaScript框架，是一个轻量级的js库，核心理念是“writeless,domore”（写得更少，做得更多）。它是一个兼容多浏览器的JavaScript库，2006年1月由美国人JohnResig在纽约的Barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由DaveMethvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库，在世界前10000个访问最多的网站中，有超过55%在使用jQuery。在网页制作领域中，jQuery的主要功能和优势如下：jQuery不但兼容CSS3，而且还兼容各种浏览器（IE6.0＋，FF1.5＋，Safari2.0＋，Opera9.0＋），jQuery2.0及后续版本将不再支持IE6/7/8浏览器。jQuery使用户能够更加方便地处理HTMLdocuments、events、实现动画效果，并且方便地为网站提供Ajax交互。jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：headscripttype=text/javascriptsrc=jquery.js/script/headjQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilities使用jQuery的基础语法如下：$(selector).action()美元符号$定义jQuery；选择符(selector)“查询”和“查找”HTML元素；action()执行对元素的操作。$(this).hide()//隐藏当前元素$(p).hide()//隐藏所有段落$(.test).hide()//隐藏所有class=test的所有元素$(#test).hide()//隐藏所有id=test的元素jQueryMobile是jQuery在手机上和平板设备上的版本，随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jQuery团队引入了jQueryMobile（简称为JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基础。jQueryMobile是一个为触控优化的框架，用于创建移动Web应用程序；jQuery适用于所有流行的智能手机和平板电脑；jQueryMobile构建于jQuery库之上，如果通晓jQuery会更易学习；它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。jQueryMobile将“writeless,domore”这一理念提升到了新的层次：它自动为网页设计交互的易用外观，并在所有移动设计上保持一致。开发者不需要为每种移动设备或OS编写一个应用程序，例如：Android和Blackberry用Java编写，iOS用ObjectiveC编写，WindowsPhone用C#和.net编写。jQueryMobile只用HTML、CSS和JavaScript，这些技术是所有移动Web浏览器的标准。常用以下两种方式获取jQueryMobile：从CDN引用jQueryMobile（推荐）；从jQuerymobile.com下载jQueryMobile库。获取和使用方法将在实例10-1中进行讲解。为了更好地在PC端浏览jQueryMobile页面在移动终端的执行效果，可以下载Opera公司的移动模拟器OperaMobileEmulator进行演示。具体使用方法在实例10-2中进行讲解。与jQuery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和*.css文件直接包含到您的Web页面中即可。这样，JQM的功能就好像被放到了您的指尖，供大家随时使用。在网页制作领域中，jQueryMobile的基本特点如下：JQM框架简单易用，主要使用标记实现页面开发，无需或仅需很少JavaScript。尽管jQueryMobile利用最新的HTML5、CSS3和JavaScript，但并非所有移动设备都提供这样的支持。jQueryMobile的哲学是同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。jQueryMobile在设计时考虑了访问能力，它拥有AccessibleRichInternetApplications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。jQueryMobile框架的整体大小比较小，JavaScript库12KB，CSS6KB，还包括一些图标。在JQM框架中提供了一个主题系统，允许我们提供自己的应用程序样式。要想正常运行一个jQueryMobile移动应用页面，需要先获取与jQueryMobile相关的插件文件。前面我们已经知道具体的获取方法有两种：下载相关插件文件和使用URL方式加载相应文件。要想正确运行jQueryMobile移动应用页面，需要至少包含如下所示的两个文件：jQuery.Mobile-x.x.x.min.js：jQueryMobile框架插件，x.x.x表示版本号。jQuery.Mobile-x.x.x.min.css：与jQueryMobile框架相配套的CSS样式文件。下载jQuery.Mobile插件的基本流程如下：（1）登录jQueryMobile官方网站（），如下图所示。jQueryMobile的官方网站界面（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。文件下载页面（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile-x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。解压后的效果除了可以在官方下载页下载对应的jQueryMobile文件外，还可以使用URL方式从jQueryCDN下载插件文件。CDN的全称是ContentDeliveryNetwork，即内容分发网络。用于快速下载跨Internet常用的文件，只要在页面的head元素中加入下列代码，同样可以执行jQueryMobile移动应用页面。加入的代码如下所示：linkrel=stylesheethref==通过jQueryCDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQueryMobile移动页面的效果。jQueryMobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。在开发过程应用中，搭建jQueryMobile测试环境的基本流程如下所示。（1）登录Opera官方网站，如右图所示。Opera官方网站（2）下载OperaMobileEmulator，下载完成后会获得一个可运行文件，笔者获得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。获得的可运行文件（3）双击上述可运行文件进行安装，安装成功后双击“OperaMobileEmulator”图标运行，初始运行界面如下图所示，此处选择语言“简体中文”。选择语言（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如下图所示。设置界面（5）单击“启动”按钮后，成功运行测试工具OperaMobileEmulator，如右图所示。OperaMobileEmulator运行效果在jQueryMobile应用中，可以给input元素直接绑定事件，可以使用jQueryMobile的虚拟事件，或者绑定JavaScript的标准事件，例如change、focus、blur等。具体说明如下所示。（1）create：当slider被创建时触发，例如：$(.selector).textinput({create:function(event,ui){...}});（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如：$(.selector).on('slidestart',function(event){...});（3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：$(.selector).on('slidestop',function(event){...});下面通过一个实例来学习在jQueryMobile页面中实现动态滑动条的方法。实例文件10-3.html的具体实现代码如下：!DOCTYPEhtmlhtmlheadmetacharset=utf-8titleForms/titlemetaname=viewportcontent=width=device-width,minimum-scale=1.0,maximum-scale=1.0;linkrel=stylesheethref====pagedata-theme=bdivdata-role=headerh1实现滑动条/h1/divdivdata-role=contentformid=testid=testaction=#method=postahref=#id=create-s1data-role=button创建滑动条1/aahref=#id=create-s2data-role=button创建滑动条2/abrpstyle=text-align:center;strong引用方法:/strong/pahref=#id=autodata-role=buttondata-theme=a设置亮度100%/aahref=#id=disabledata-role=buttondata-theme=a禁用亮度/aahref=#id=enabledata-role=buttondata-theme=a亮度可用/a/form/divscripttype=text/JavaScript$(#create-s1).bind(click,function(){$('labelfor=brightness1Brightness1:/label