1、目录,jQuery Mobile简介,实例10-1：搭建jQuery Mobile开发环境,综合实例：网上订餐系统,实例10-2：搭建测试环境,实例10-3：动态滑动条,实例10-4：使用选择菜单,1,J Qu e r y Mo b I l e简介,10.1.1 什么是jQuery,jQuery是一款优秀的JavaScript框架，是一个轻量级的js库，核心理念是“write less,do more”（写得更少，做得更多）。它是一个兼容多浏览器的JavaScript库，2006年1月由美国人John Resig在纽约的Barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，
2、由Dave Methvin率领团队进行开发。如今，jQuery已经成为最流行的JavaScript库，在世界前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交互。,1,J Qu e r y Mo b I l e简介,
3、jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。,jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。,jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。,1jQuery库,jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：,1,J Qu e r y Mo b I l e简介,jQuery库包含以下特性：,HTML元素选取 HTML元素操作 CSS操作 HTML事件函数 JavaSc
4、ript特效和动画 HTML DOM遍历和修改 AJAX Utilities,1,J Qu e r y Mo b I l e简介,2jQuery基础语法,使用jQuery的基础语法如下：,$(selector).action(),美元符号$定义jQuery； 选择符(selector)“查询”和“查找”HTML元素； action()执行对元素的操作。,例如：,$(this).hide() /隐藏当前元素 $(“p“).hide() /隐藏所有段落 $(“.test“).hide() /隐藏所有class=“test“的所有元素 $(“#test“).hide() /隐藏所有id=“test“
5、的元素,1,J Qu e r y Mo b I l e简介,10.1.2 jQuery Mobile基础,1什么是jQuery Mobile？,jQuery Mobile是jQuery在手机上和平板设备上的版本，随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jQuery团队引入了jQuery Mobile（简称为JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基础。,jQuery Mobile是一个为触控优化的框架，用于创建移动
6、Web应用程序；,jQuery适用于所有流行的智能手机和平板电脑；,jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习；,它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。,1,J Qu e r y Mo b I l e简介,2为什么使用jQuery Mobile？,jQuery Mobile将“write less,do more”这一理念提升到了新的层次：它自动为网页设计交互的易用外观，并在所有移动设计上保持一致。开发者不需要为每种移动设备或OS编写一个应用程序，例如：Android和Blackberry用Jav
7、a编写，iOS用Objective C编写，Windows Phone用C#和.net编写。jQuery Mobile只用HTML、CSS和JavaScript，这些技术是所有移动Web浏览器的标准。,1,J Qu e r y Mo b I l e简介,3如何获取jQuery Mobile？,常用以下两种方式获取jQuery Mobile：,从CDN引用jQuery Mobile（推荐）；,从jQ下载jQuery Mobile库。,获取和使用方法将在实例10-1中进行讲解。为了更好地在PC端浏览jQuery Mobile页面在移动终端的执行效果，可以下载Opera公司的移动模拟器Opera M
8、obile Emulator进行演示。具体使用方法在实例10-2中进行讲解。 与jQuery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和*.css文件直接包含到您的Web页面中即可。这样，JQM的功能就好像被放到了您的指尖，供大家随时使用。,1,J Qu e r y Mo b I l e简介,4jQuery Mobile的基本特点,在网页制作领域中，jQuery Mobile的基本特点如下：,（1）简明,JQM框架简单易用，主要使用标记实现页面开发，无需或仅需很少JavaScript。,（2）持续增强和优雅降级,尽管jQuery Mobile利用最新的HTML5、CSS
9、3和JavaScript，但并非所有移动设备都提供这样的支持。jQuery Mobile的哲学是同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。,（3）Accessibility,jQuery Mobile在设计时考虑了访问能力，它拥有Accessible Rich Internet Applications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。,1,J Qu e r y Mo b I l e简介,（4）小规模,jQuery Mobile框架的整体大小比较小，JavaScript库12KB，CSS 6KB，还包括一些图标。
10、,（5）主题设置,在JQM框架中提供了一个主题系统，允许我们提供自己的应用程序样式。,2,实 例10-1 搭 建 j Q u e r y M o b I l e 开 发 环 境,要想正常运行一个jQuery Mobile移动应用页面，需要先获取与jQuery Mobile相关的插件文件。前面我们已经知道具体的获取方法有两种：下载相关插件文件和使用URL方式加载相应文件。,1下载插件,要想正确运行jQuery Mobile移动应用页面，需要至少包含如下所示的两个文件：,jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。,jQuery.
11、Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。,2,实 例10-1 搭 建 j Q u e r y M o b I l e 开 发 环 境,下载jQuery.Mobile插件的基本流程如下：,（1）登录jQuery Mobile官方网站（http:/），如下图所示。,jQuery Mobile的官方网站界面,2,实 例10-1 搭 建 j Q u e r y M o b I l e 开 发 环 境,（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。,文件下载页面,2,实 例10-1 搭 建 j Q u e r y M
12、o b I l e 开 发 环 境,（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile-x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。,解压后的效果,2,实 例10-1 搭 建 j Q u e r y M o b I l e 开 发 环 境,2使用URL方式加载插件文件,除了可以在官方下载页下载对应的jQuery Mobile文件外，还可以使用URL方式从jQuery CDN下载插件文件。CDN的全称是Content Delivery Network，即内容分发网络。用于快速下载跨Internet常用的文件，只要在页面的元素
13、中加入下列代码，同样可以执行jQuery Mobile移动应用页面。加入的代码如下所示：,通过jQuery CDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQuery Mobile移动页面的效果。,3,实 例10-2 搭 建 测 试 环 境,jQuery Mobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。在开发过程应用中，搭建jQuery Mobile测试环境的基本流程如下所示。,（1）登录Opera官方网站，如右图所示。,Opera官方网站,3,（2）下载Opera Mobile Emulator，下载完成
14、后会获得一个可运行文件，笔者获得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。,获得的可运行文件,（3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运行，初始运行界面如下图所示，此处选择语言“简体中文”。,选择语言,实 例10-2 搭 建 测 试 环 境,3,（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如下图所示。,设置界面,实 例10-2 搭 建 测 试 环 境,3,（5）单击“启动”按钮后，成功运行测试工具Opera Mobile Emulator，如右图
15、所示。,Opera Mobile Emulator运行效果,实 例10-2 搭 建 测 试 环 境,4,实 例10-3 动 态 滑 动 条,在jQuery Mobile应用中，可以给input元素直接绑定事件，可以使用jQuery Mobile的虚拟事件，或者绑定JavaScript的标准事件，例如change、focus、blur等。具体说明如下所示。,（1）create：当slider被创建时触发，例如：,$( “.selector“ ).textinput(create: function(event, ui) . );,（2）slidestart：当slider的交互开始时触发，包括点
16、击和拖动。例如：,$( “.selector“ ).on( slidestart, function( event ) . );,（3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：,$( “.selector“ ).on( slidestop, function( event ) . );,4,实 例10-3 动 态 滑 动 条,下面通过一个实例来学习在jQuery Mobile页面中实现动态滑动条的方法。 实例文件10-3.html的具体实现代码如下：, Forms ,4,实 例10-3 动 态 滑 动 条,实现滑动条创建滑动条1创建滑动条2引用方法:设置亮度
17、100%禁用亮度,4,实 例10-3 动 态 滑 动 条,亮度可用$( “#create-s1“ ).bind( “click“, function() $( Brightness1: ).insertAfter( “#create-s1“ );$( “#brightness1“ ).slider().textinput(););$( “#create-s2“ ).bind( “click“, function() $( Brightness2:input type=“range“,4,实 例10-3 动 态 滑 动 条,name=“brightness2“ id=“brightness2“
18、min=“0“ max=“10“ / ) .insertAfter( “#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“ ););,4,实 例1
19、0-3 动 态 滑 动 条,$( “#disable“ ).bind( “click“, function() $( “#brightness1“ ).slider( “disable“ ););$( “#enable“ ).bind( “click“, function() $( “#brightness1“ ).slider( “enable“ );); ,4,实 例10-3 动 态 滑 动 条,执行后的初始效果如下左图所示，触摸按下某个创建滑动条按钮后会执行相应的操作。例如触摸按下“创建滑动条1”按钮后会创建一个如下右图所示的滑动条，单击“引用方法”下的三个按钮，会对滑动条执行相应操作。
20、,初始效果 创建了一个滑动条,5,实 例10-4 使 用 选 择 菜 单,在无需添加额外标记的情况下，jQuery Mobile框架就能够自动增强所有本地的选择元素。这种转变会使用jQuery Mobile风格的按钮来取代原始的选择，而且前者包含一个右对齐的下拉箭头图标。在默认情况下，轻敲该选择按钮，会为移动设备启动本地选择选择器。作为一种替换方法，可以配置jQuery Mobile使其显示自定义的选择菜单。 下面我们通过一个演示实例来学习在jQuery Mobile页面中使用选择菜单的方法。,菜单由按钮和菜单两部分组成，当用户单击按钮选择其中一项后，菜单自动关闭，被单击按钮的值将自动更新为菜
21、单中用户所选的值。将菜单的类型设置为自定义，只需在元素中，将data-native-menu属性值设为false即可。 JQuery Mobile中可以通过增加multiple属性，并将该属性值设置为true即可将菜单设置为多项选择。,5,实 例10-4 使 用 选 择 菜 单,实例文件10-4.html的具体实现代码如下：,New Document ,5,实 例10-4 使 用 选 择 菜 单,使用选择菜单年份 2015 2016月份,5,实 例10-4 使 用 选 择 菜 单,123456789101112,5,实 例10-4 使 用 选 择 菜 单,执行后的初始效果如下左图所示，触摸按下“年份”后面的 按钮后会弹出一个如下右图所示的菜单框，当用户单击按钮选择其中一项后，菜单自动关闭，被单击按钮的值将自动更新为菜单中用户所选的值。,初始效果 选择年份,5,实 例10-4 使 用 选 择 菜 单,触摸按下“月份”后面的 按钮后会弹出一个如下左图所示的菜单框，在用户选择了多个选项后，多选按钮会对已选中的选项显示计数泡或进行标记，最终效果如下右图所示。,选择月份 最终结果,6,综合实例 网上订餐系统,下面通过一个实例介绍使用jQuery Mobile制作网上订餐系统的方法。其制作流程是：需求分析 界面设计 页面实现 设置样式。本例具体操作可参考书中步骤。,网上订餐系统执行效果,
