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 网上订餐系统执行效果