移动Web开发之jQuery Mobile

1、jquery mobile简介 实例10-1：搭建jquery mobile开发环境 综合实例：网上订餐系统 实例10-2：搭建测试环境 实例10-3：动态滑动条 实例10-4：使用选择菜单 jquery是一款优秀的javascript框架，是一个轻量级的js库，核心理念是“write less,do more”（写得更少，做得更多）。它是一个兼容多浏览器的javascript库，2006年1月由美国 人john resig在纽约的barcamp发布，吸引了来自世界各地的众多javascript高手加入，由 dave methvin率领团队进行开发。如今，jquery已经成为最流行的javas

2、cript库，在世界前 10000个访问最多的网站中，有超过55%在使用jquery。 在网页制作领域中，jquery的主要功能和优势如下： jquery不但兼容css 3，而且还兼容各种浏览器（ie 6.0，ff 1.5，safari 2.0， opera 9.0），jquery 2.0及后续版本将不再支持ie 6/7/8浏览器。 jquery使用户能够更加方便地处理htmldocuments、events、实现动画效果，并且方便地 为网站提供ajax交互。 jquery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。 jquery为开发人员提供了许多成熟的插件，通过这些插件可以设计

3、出动感的页面。 jquery能够使用户的html页面保持代码和html内容分离，也就是说，不用再在html里面 插入一堆js来调用命令了，只需定义id即可。 jquery库位于一个javascript文件中，其中包含了所有的jquery函数。可以通过下面的 标记将jquery添加到网页中： jquery库包含以下特性： html元素选取 html元素操作 css操作 html事件函数 javascript特效和动画 html dom遍历和修改 ajax utilities 使用jquery的基础语法如下： $(selector).action() 美元符号$定义jquery； 选择符(sele

4、ctor)“查询”和“查找”html元素； action()执行对元素的操作。 $(this).hide() /隐藏当前元素 $(p).hide() /隐藏所有段落 $(.test).hide()/隐藏所有class=test的所有元素 $(#test).hide()/隐藏所有id=test的元素 jquery mobile是jquery在手机上和平板设备上的版本，随着智能手机系统的普及，现在主 流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jquery团队引入了jquery mobile（简 称为jqm）。jqm的使命是向所有主流移动浏览器提供一种统一体验，使整个internet上的内

5、容更加丰富。与jquery一样，jqm是一个在internet上直接托管、免费可用的开源代码基础。 jquery mobile是一个为触控优化的框架，用于创建移动web应用程序； jquery适用于所有流行的智能手机和平板电脑； jquery mobile构建于jquery库之上，如果通晓jquery会更易学习； 它使用html5、css3、javascript和ajax通过尽可能少的代码来完成对页面的布局。 jquery mobile将“write less,do more”这一理念提升到了新的层次：它自动为网页设 计交互的易用外观，并在所有移动设计上保持一致。 开发者不需要为每种移动设备或

6、os编写一个应用程序，例如：android和blackberry 用java编写，ios用objective c编写，windows phone用c#和.net编写。jquery mobile只用 html、css和javascript，这些技术是所有移动web浏览器的标准。 常用以下两种方式获取jquery mobile： 从cdn引用jquery mobile（推荐）； 从jq下载jquery mobile库。 获取和使用方法将在实例10-1中进行讲解。为了更好地在pc端浏览jquery mobile页 面在移动终端的执行效果，可以下载opera公司的移动模拟器opera mobile e

7、mulator进行 演示。具体使用方法在实例10-2中进行讲解。 与jquery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和 *.css文件直接包含到您的web页面中即可。这样，jqm的功能就好像被放到了您的指尖， 供大家随时使用。 在网页制作领域中，jquery mobile的基本特点如下： jqm框架简单易用，主要使用标记实现页面开发，无需或仅需很少javascript。 尽管jquery mobile利用最新的html5、css3和javascript，但并非所有移动设备都提供这 样的支持。jquery mobile的哲学是同时支持高端和低端设备，比如那些没有ja

8、vascript支持的 设备，尽量提供最好的体验。 jquery mobile在设计时考虑了访问能力，它拥有accessible rich internet applications （wai-aria）支持，以帮助使用辅助技术的残障人士访问web页面。 jquery mobile框架的整体大小比较小，javascript库12kb，css 6kb，还包括一些图标。 在jqm框架中提供了一个主题系统，允许我们提供自己的应用程序样式。 要想正常运行一个jquery mobile移动应用页面，需要先获取与jquery mobile相关的插件文件。 前面我们已经知道具体的获取方法有两种：下载相关插件

9、文件和使用url方式加载相应文件。 要想正确运行jquery mobile移动应用页面，需要至少包含如下所示的两个文件： jquery.mobile-x.x.x.min.js：jquery mobile框架插件，x.x.x表示版本号。 jquery.mobile-x.x.x.min.css：与jquery mobile框架相配套的css样式文件。 下载jquery.mobile插件的基本流程如下： （1）登录jquery mobile官方网站（http:/），如下图所示。 jquery mobile的官方网站界面 （2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。 文件

10、下载页面 （3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile- x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。 解压后的效果 除了可以在官方下载页下载对应的jquery mobile文件外，还可以使用url方式从jquery cdn下载插件文件。cdn的全称是content delivery network，即内容分发网络。用于快速下 载跨internet常用的文件，只要在页面的元素中加入下列代码，同样可以执行jquery mobile移动应用页面。加入的代码如下所示： 通过jquery cdn服务器请求的方式进行加载，在执

11、行页面时必须时时保证网络的畅通， 否则不能实现jquery mobile移动页面的效果。 jquery mobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这 些网页需要在移动设备中运行。在开发过程应用中，搭建jquery mobile测试环境的基本流 程如下所示。 （1）登录opera官方 网站，如右图所示。 opera官方网站 （2）下载opera mobile emulator，下载完成后会获得一个可运行文件，笔者获得的是： opera_mobile_emulator_12.1_windows.exe。如下图所示。 获得的可运行文件 （3）双击上述可运行文件进行安装，

12、安装成功后双击“opera mobile emulator”图标运 行，初始运行界面如下图所示，此处选择语言“简体中文”。 选择语言 （4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置 即可，如下图所示。 设置界面 （5）单击“启动”按钮后，成功 运行测试工具opera mobile emulator，如右图所示。 opera mobile emulator运行效果 在jquery mobile应用中，可以给input元素直接绑定事件，可以使用jquery mobile的虚拟 事件，或者绑定javascript的标准事件，例如change、focus、blur等。具体

13、说明如下所示。 （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 ) . ); 下面通过一个实例来学习在jqu

14、ery mobile页面中实现动态滑动条的方法。 实例文件10-3.html的具体实现代码如下： forms 实现滑动条 创建滑动条1 创建滑动条2 引用方法: 设置亮度 100% 禁用亮度 亮度可用 $( #create-s1 ).bind( click, function() $( brightness1: ).insertafter( #create-s1 ); $( #brightness1 ).slider().textinput(); ); $( #create-s2 ).bind( click, function() $( brightness2: ) .insertafter(

15、 #create-s2 ); $( #brightness2 ).slider( theme: d, tracktheme: a, disabled: false, create: function(event) console.log( creating slider control. ); ).textinput(); ); $( #auto ).bind( click, function() $( #brightness1 ).val( 10 ).slider( refresh ); ); $( #disable ).bind( click, function() $( #brightn

16、ess1 ).slider( disable ); ); $( #enable ).bind( click, function() $( #brightness1 ).slider( enable ); ); 执行后的初始效果如下左图所示，触摸按下某个创建滑动条按钮后会执行相应的操作。 例如触摸按下“创建滑动条1”按钮后会创建一个如下右图所示的滑动条，单击“引用方法” 下的三个按钮，会对滑动条执行相应操作。 初始效果 创建了一个滑动条 在无需添加额外标记的情况下，jquery mobile框架就能够自动增强所有本地的选择元 素。这种转变会使用jquery mobile风格的按钮来取代原始的选择

17、，而且前者包含一个右对 齐的下拉箭头图标。在默认情况下，轻敲该选择按钮，会为移动设备启动本地选择选择器。 作为一种替换方法，可以配置jquery mobile使其显示自定义的选择菜单。 下面我们通过一个演示实例来学习在jquery mobile页面中使用选择菜单的方法。 菜单由按钮和菜单两部分组成，当用户单击按钮选择其中一项后，菜单自动关闭，被 单击按钮的值将自动更新为菜单中用户所选的值。将菜单的类型设置为自定义，只需在 元素中，将data-native-menu属性值设为false即可。 jquery mobile中可以通过增加multiple属性，并将该属性值设置为true即可将菜单设置 为多项选择。 实例文件10-4.html的具体实现代码如下： new document 使用选择菜单 年份 2015 2016 月份 1 2 3 4 5 6 7 8 9 10 11 12 执行后的初始效果如下左图所