移动Web开发之jQuery Mobile.ppt

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