移动Web开发之jQuery Mobileppt课件

目录 jQueryMobile简介 实例10 1 搭建jQueryMobile开发环境 综合实例 网上订餐系统 实例10 2 搭建测试环境 实例10 3 动态滑动条 实例10 4 使用选择菜单 1 JQueryMobIle简介 10 1 1什么是jQuery jQuery不但兼容CSS3 而且还兼容各种浏览器 IE6 0 FF1 5 Safari2 0 Opera9 0 jQuery2 0及后续版本将不再支持IE6 7 8浏览器 jQuery使用户能够更加方便地处理HTMLdocuments events 实现动画效果 并且方便地为网站提供Ajax交互 1 JQueryMobIle简介 jQuery为使用者提供了健全的文档说明 各种应用也讲解得十分详细 jQuery为开发人员提供了许多成熟的插件 通过这些插件可以设计出动感的页面 jQuery能够使用户的HTML页面保持代码和html内容分离 也就是说 不用再在html里面插入一堆js来调用命令了 只需定义id即可 1 jQuery库 1 JQueryMobIle简介 1 JQueryMobIle简介 2 jQuery基础语法 例如 1 JQueryMobIle简介 10 1 2jQueryMobile基础 1 什么是jQueryMobile jQueryMobile是一个为触控优化的框架 用于创建移动Web应用程序 jQuery适用于所有流行的智能手机和平板电脑 jQueryMobile构建于jQuery库之上 如果通晓jQuery会更易学习 它使用HTML5 CSS3 JavaScript和AJAX通过尽可能少的代码来完成对页面的布局 1 JQueryMobIle简介 2 为什么使用jQueryMobile 1 JQueryMobIle简介 3 如何获取jQueryMobile 从CDN引用jQueryMobile 推荐 从jQ下载jQueryMobile库 1 JQueryMobIle简介 4 jQueryMobile的基本特点 1 简明 2 持续增强和优雅降级 3 Accessibility 1 JQueryMobIle简介 4 小规模 5 主题设置 2 实例10 1搭建jQueryMobIle开发环境 1 下载插件 jQuery Mobile x x x min js jQueryMobile框架插件 x x x表示版本号 jQuery Mobile x x x min css 与jQueryMobile框架相配套的CSS样式文件 2 实例10 1搭建jQueryMobIle开发环境 1 登录jQueryMobile官方网站 如下图所示 jQueryMobile的官方网站界面 2 实例10 1搭建jQueryMobIle开发环境 2 单击导航条中的 download 按钮进入文件下载页面 如下图所示 文件下载页面 2 实例10 1搭建jQueryMobIle开发环境 3 单击文件链接即可下载 下载后成功后会获得一个名为 jquery mobile x x x zip 的压缩包 解压后会获得css js和图片格式的文件 如下图所示 解压后的效果 2 实例10 1搭建jQueryMobIle开发环境 2 使用URL方式加载插件文件 3 实例10 2搭建测试环境 1 登录Opera官方网站 如右图所示 Opera官方网站 3 2 下载OperaMobileEmulator 下载完成后会获得一个可运行文件 笔者获得的是 Opera Mobile Emulator 12 1 Windows exe 如下图所示 获得的可运行文件 3 双击上述可运行文件进行安装 安装成功后双击 OperaMobileEmulator 图标运行 初始运行界面如下图所示 此处选择语言 简体中文 选择语言 实例10 2搭建测试环境 3 4 单击 确定 按钮 在新界面中可以进行相关设置 在此我们只需使用默认设置即可 如下图所示 设置界面 实例10 2搭建测试环境 3 5 单击 启动 按钮后 成功运行测试工具OperaMobileEmulator 如右图所示 OperaMobileEmulator运行效果 实例10 2搭建测试环境 4 实例10 3动态滑动条 1 create 当slider被创建时触发 例如 2 slidestart 当slider的交互开始时触发 包括点击和拖动 例如 3 slidestop 当slider的交互结束时触发 包括点击和拖动 例如 4 实例10 3动态滑动条 4 实例10 3动态滑动条 4 实例10 3动态滑动条 4 实例10 3动态滑动条 4 实例10 3动态滑动条 4 实例10 3动态滑动条 初始效果创建了一个滑动条 5 实例10 4使用选择菜单 5 实例10 4使用选择菜单 5 实例10 4使用选择菜单 5 实例10 4使用选择菜单 5 实例10