移动Web开发之jQuery-Mobile(课堂)课件.ppt

1、.1jQuery Mobile简介实例10-1：搭建jQuery Mobile开发环境综合实例：网上订餐系统实例10-2：搭建测试环境实例10-3：动态滑动条实例10-4：使用选择菜单.210.1.1 什么是什么是jQueryjQuery不但兼容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交互。.3jQuery为使用者提供了健全的文档说明，各种应用也讲

2、解得十分详细。jQuery为开发人员提供了许多成熟的插件，通过这些插件可以设计出动感的页面。jQuery能够使用户的HTML页面保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。.4.5.610.1.2 jQuery Mobile基础基础jQuery Mobile是一个为触控优化的框架，用于创建移动Web应用程序；jQuery适用于所有流行的智能手机和平板电脑；jQuery Mobile构建于jQuery库之上，如果通晓jQuery会更易学习；它使用HTML5、CSS3、JavaScript和AJAX通过尽可能少的代码来完成对页面的布局。.7

3、.8从CDN引用jQuery Mobile（推荐）；从jQ下载jQuery Mobile库。.9（1）简明）简明（2）持续增强和优雅降级）持续增强和优雅降级（3）Accessibility.10（4）小规模）小规模（5）主题设置）主题设置.11jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。.12（1）登录jQuery Mobile官方网站（http:/），如下图所示。jQuery Mobile的官方网站界面.13（2）

4、单击导航条中的“download”按钮进入文件下载页面，如下图所示。文件下载页面.14（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile-x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。解压后的效果.15.16（1）登录Opera官方网站，如右图所示。Opera官方网站.17（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。获得的可运行文件（3）双击上述可运行文件进行安装，安装成功后双击“

5、Opera Mobile Emulator”图标运行，初始运行界面如下图所示，此处选择语言“简体中文”。选择语言.18（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如下图所示。设置界面.19（5）单击“启动”按钮后，成功运行测试工具Opera Mobile Emulator，如右图所示。Opera Mobile Emulator运行效果.20（1）create：当slider被创建时触发，例如：（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如：（3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：.21.22.23.24.25.26 初始效果 创建了一个滑动条.27 .28 .29 .30 .31 初始效果 选择年份.32 选择月份 最终结果 .33 网上订餐系统执行效果