移动Web开发之jQueryMobile.ppt

目目录录jQueryMobile简介实例10-1：搭建jQueryMobile开发环境综合实例：网上订餐系统实例10-2：搭建测试环境实例10-3：动态滑动条实例10-4：使用选择菜单1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介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交互。1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介jQuery为使用者提供了健全的文档说明，各种应用也讲解得十分详细。jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。jQuery库位于一个JavaScript文件中，其中包含了所有的jQuery函数。可以通过下面的标记将jQuery添加到网页中：1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介jQuery库包含以下特性：HTML元素选取HTML元素操作CSS操作HTML事件函数JavaScript特效和动画HTMLDOM遍历和修改AJAXUtilities1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介使用jQuery的基础语法如下：$(selector).action()美元符号$定义jQuery；选择符(selector)“查询”和“查找”HTML元素；action()执行对元素的操作。$(this).hide()/隐藏当前元素$(p).hide()/隐藏所有段落$(.test).hide()/隐藏所有class=test的所有元素$(#test).hide()/隐藏所有id=test的元素1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介jQueryMobile是jQuery在手机上和平板设备上的版本，随着智能手机系统的普及，现在主流移动平台上的浏览器功能已经赶上了桌面浏览器，因此jQuery团队引入了jQueryMobile（简称为JQM）。JQM的使命是向所有主流移动浏览器提供一种统一体验，使整个Internet上的内容更加丰富。与jQuery一样，JQM是一个在Internet上直接托管、免费可用的开源代码基础。jQueryMobile是一个为触控优化的框架，用于创建移动Web应用程序；jQuery适用于所有流行的智能手机和平板电脑；jQueryMobile构建于jQuery库之上，如果通晓jQuery会更易学习；它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介jQueryMobile将“writeless,domore”这一理念提升到了新的层次：它自动为网页设计交互的易用外观，并在所有移动设计上保持一致。开发者不需要为每种移动设备或OS编写一个应用程序，例如：Android和Blackberry用Java编写，iOS用ObjectiveC编写，WindowsPhone用C#和.net编写。jQueryMobile只用HTML、CSS和JavaScript，这些技术是所有移动Web浏览器的标准。1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介常用以下两种方式获取jQueryMobile：从CDN引用jQueryMobile（推荐）；从jQ下载jQueryMobile库。获取和使用方法将在实例10-1中进行讲解。为了更好地在PC端浏览jQueryMobile页面在移动终端的执行效果，可以下载Opera公司的移动模拟器OperaMobileEmulator进行演示。具体使用方法在实例10-2中进行讲解。与jQuery核心库一样，您的开发计算机上不需要安装任何东西；只需将各种*.js和*.css文件直接包含到您的Web页面中即可。这样，JQM的功能就好像被放到了您的指尖，供大家随时使用。1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介在网页制作领域中，jQueryMobile的基本特点如下：JQM框架简单易用，主要使用标记实现页面开发，无需或仅需很少JavaScript。尽管jQueryMobile利用最新的HTML5、CSS3和JavaScript，但并非所有移动设备都提供这样的支持。jQueryMobile的哲学是同时支持高端和低端设备，比如那些没有JavaScript支持的设备，尽量提供最好的体验。jQueryMobile在设计时考虑了访问能力，它拥有AccessibleRichInternetApplications（WAI-ARIA）支持，以帮助使用辅助技术的残障人士访问Web页面。1 1 1 1J JQ QU UE ER RY Y MMO OB BI IL LE E简简介介jQueryMobile框架的整体大小比较小，JavaScript库12KB，CSS6KB，还包括一些图标。在JQM框架中提供了一个主题系统，允许我们提供自己的应用程序样式。2 2 2 2实实例例10-110-1搭搭建建J JQ QU UE ER RY Y MMO OB BI IL LE E开开发发环环境境要想正常运行一个jQueryMobile移动应用页面，需要先获取与jQueryMobile相关的插件文件。前面我们已经知道具体的获取方法有两种：下载相关插件文件和使用URL方式加载相应文件。要想正确运行jQueryMobile移动应用页面，需要至少包含如下所示的两个文件：jQuery.Mobile-x.x.x.min.js：jQueryMobile框架插件，x.x.x表示版本号。jQuery.Mobile-x.x.x.min.css：与jQueryMobile框架相配套的CSS样式文件。2 2 2 2实实例例10-110-1搭搭建建J JQ QU UE ER RY Y MMO OB BI IL LE E开开发发环环境境下载jQuery.Mobile插件的基本流程如下：（1）登录jQueryMobile官方网站（http:/），如下图所示。jQueryMobile的官方网站界面2 2 2 2实实例例10-110-1搭搭建建J JQ QU UE ER RY Y MMO OB BI IL LE E开开发发环环境境（2）单击导航条中的“download”按钮进入文件下载页面，如下图所示。文件下载页面2 2 2 2实实例例10-110-1搭搭建建J JQ QU UE ER RY Y MMO OB BI IL LE E开开发发环环境境（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile-x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。解压后的效果2 2 2 2实实例例10-110-1搭搭建建J JQ QU UE ER RY Y MMO OB BI IL LE E开开发发环环境境除了可以在官方下载页下载对应的jQueryMobile文件外，还可以使用URL方式从jQueryCDN下载插件文件。CDN的全称是ContentDeliveryNetwork，即内容分发网络。用于快速下载跨Internet常用的文件，只要在页面的元素中加入下列代码，同样可以执行jQueryMobile移动应用页面。加入的代码如下所示：通过jQueryCDN服务器请求的方式进行加载，在执行页面时必须时时保证网络的畅通，否则不能实现jQueryMobile移动页面的效果。3 3 3 3实实例例10-210-2搭搭建建测测试试环环境境jQueryMobile的开发过程是网页开发的过程，和传统网页开发相比，唯一的差别是这些网页需要在移动设备中运行。在开发过程应用中，搭建jQueryMobile测试环境的基本流程如下所示。（1）登录Opera官方网站，如右图所示。Opera官方网站3 3 3 3（2）下载OperaMobileEmulator，下载完成后会获得一个可运行文件，笔者获得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。获得的可运行文件（3）双击上述可运行文件进行安装，安装成功后双击“OperaMobileEmulator”图标运行，初始运行界面如下图所示，此处选择语言“简体中文”。选择语言实实例例10-210-2搭搭建建测测试试环环境境3 3 3 3（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如下图所示。设置界面实实例例10-210-2搭搭建建测测试试环环境境3 3 3 3（5）单击“启动”按钮后，成功运行测试工具OperaMobileEmulator，如右图所示。OperaMobileEmulator运行效果实实例例10-210-2搭搭建建测测试试环环境境4 4 4 4实实例例10-310-3动动态态滑滑动动条条在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).);4 4 4 4实实例例10-310-3动动态态滑滑动动条条下面通过一个实例来学习在jQueryMobile页面中实现动态滑动条的方法。实例文件10-3.html的具体实现代码如下：Forms4 4 4 4实实例例10-310-3动动态态滑滑动动条条实现滑动条创建滑动条1创建滑动条2引用方法:设置亮度100%禁用亮度4 4 4 4实实例例10-310-3动动态态滑滑动动条条亮度可用$(#create-s1).bind(click,function()$(Brightness1:).insertAfter(#create-s1);$(#brightness1).slider().textinput(););$(#create-s2).bind(click,function()$(Brightness2:).insertAfter(#create-s2);$(#brightness2).slider(theme:d,trackTheme:a,disabled:false,create:function(event)console.log(Creatingslidercontrol.);).textinput(););$(#auto).bind(click,function()$(#brightness1).val(10).slider(refresh););4 4 4 4实实例例10-310-3动动态态滑滑动动条条$(#disable).bind(click,function()$(#brightness1).slider(disable););$(#enable).bind(click,function()$(#brightness1).slider(enable););4 4 4 4实实例例10-310-3动动态态滑滑动动条条执行后的初始效果如下左图所示，触摸按下某个创建滑动条按钮后会执行相应的操作。例如触摸按下“创建滑动条1”按钮后会创建一个如下右图所示的滑动条，单击“引用方法”下的三个按钮，会对滑动条执行相应操作。初始效果创建了一个滑动条5 5 5 5实实例例10-410-4使使用用选选择择菜菜单单在无需添加额外标记的情况下，jQueryMobile框架就能够自动增强所有本地的选择元素。这种转变会使用jQueryMobile风格的按钮来取代原始的选择，而且前者包含一个右对齐的下拉箭头图标。在默认情况下，轻敲该选择按钮，会为移动设备启动本地选择选择器。作为一种替换方法，可以配置jQueryMobile使其显示自定义的选择菜单。下面我们通过一个演示实例来学习在jQueryMobile页面中使用选择菜单的方法。菜单由按钮和菜单两部分组成，当用户单击按钮选择其中一项后，菜单自动关闭，被单击按钮的值将自动更新为菜单中用户所选的值。将菜单的类型设置为自定义，只需在元素中，将data-native-menu属性值设为false即可。JQueryMobile中可以通过增加multiple属性，并将该属性值设置为true即可将菜单设置为多项选择。5 5 5 5实实例例10-410-4使使用用选选择择菜菜单单实例文件10-4.html的具体实现代码如下：NewDocument5 5 5 5实实例例10-410-4使使用用选选择择菜菜单单使用选择菜单年份20152016月份5 5 5 5实实例例10-410-4使使用用选选择择菜菜单单1234567891011125 5 5 5实实例例10-410-4使使用用选选择择菜菜单单执行后的初始效果如下左图所示，触摸按下“年份”后面的按钮后会弹出一个如下右图所示的菜单框，当用户单击按钮选择其中一项后，菜单自动关闭，被单击按钮的值将自动更新为菜单中用户所选的值。初始效果选择年份5 5 5 5实实例例10-410-4使使用用选选择择菜菜单单触摸按下“月份”后面的按钮后会弹出一个如下左图所示的菜单框，在用户选择了多个选项后，多选按钮会对已选中的选项显示计数泡或进行标记，最终效果如下右图所示。选择月份最终结果 6 6 6 6综综合合实实例例网网上上订订餐餐系系统统 下面通过一个实例介绍使用jQueryMobile制作网上订餐系统的方法。其制作流程是：需求分析界面设计页面实现设置样式。本例具体操作可参考书中步骤。网上订餐系统执行效果