移动Web开发之jQuery Mobile

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

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

3、y Mobile（推荐）；从jQ下载jQuery Mobile库。.（1）简明）简明（2）持续增强和优雅降级）持续增强和优雅降级（3）Accessibility.（4）小规模）小规模（5）主题设置）主题设置.jQuery.Mobile-x.x.x.min.js：jQuery Mobile框架插件，x.x.x表示版本号。jQuery.Mobile-x.x.x.min.css：与jQuery Mobile框架相配套的CSS样式文件。.（1）登录jQuery Mobile官方网站（），如下图所示。 jQuery Mobile的官方网站界面.（2）单击导航条中的“download”按钮进入文件下载页面

4、，如下图所示。文件下载页面.（3）单击文件链接即可下载，下载后成功后会获得一个名为“jquery.mobile-x.x.x.zip”的压缩包，解压后会获得css、js和图片格式的文件，如下图所示。解压后的效果.（1）登录Opera官方网站，如右图所示。Opera官方网站.（2）下载Opera Mobile Emulator，下载完成后会获得一个可运行文件，笔者获得的是：Opera_Mobile_Emulator_12.1_Windows.exe。如下图所示。获得的可运行文件（3）双击上述可运行文件进行安装，安装成功后双击“Opera Mobile Emulator”图标运行，初始运行界面如下图所示，此处选择语言“简体中文”。选择语言.（4）单击“确定”按钮，在新界面中可以进行相关设置，在此我们只需使用默认设置即可，如下图所示。设置界面.（5）单击“启动”按钮后，成功运行测试工具Opera Mobile Emulator，如右图所示。Opera Mobile Emulator运行效果.（1）create：当slider被创建时触发，例如：（2）slidestart：当slider的交互开始时触发，包括点击和拖动。例如：（3）slidestop：当slider的交互结束时触发，包括点击和拖动。例如：. 初始效果 创建了一个滑动条