《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第13章》由会员分享，可在线阅读，更多相关《jQuery程序设计基础教程 工业和信息化普通高等教育十二五 规划教材 教学课件 ppt 作者 姚敦红 杨凌 张志美 李晓黎 等编著 第13章（106页珍藏版）》请在金锄头文库上搜索。
1、,jQuery程序设计基础教程,授课教师： 职务：,第13章 jQuery Mobile,课程描述 jQuery Mobile是基于jQuery的针对触屏智能手机与平板电脑Web开发框架，是兼容所有主流移动设备平台的、支持HTML5的用户界面设计系统。jQuery Mobile并不是jQuery的一部分，为了扩展读者的知识面，本章介绍使用jQuery Mobile开发移动Web应用程序的基本方法。,本章知识点,13.1 jQuery Mobile概述 13.2 jQuery Mobile组件,13.1 jQuery Mobile概述,13.1.1 初识jQuery Mobile 13.1.2
2、引用jQuery Mobile开发包,13.1.1 初识jQuery Mobile,1页面和对话框 2Ajax导航和转换 3内容和控件 4按钮 5列表（Listview） 6表单元素 7自适应设计 8主题,1页面和对话框,2Ajax导航和转换,jQuery Mobile包含一个Ajax导航系统，支持大量的动画页面集合。可以自动拦截标准链接和表单的提交操作，并将其转换为Ajax请求。只要单击链接或提交表单，Ajax导航系统就会检测到该事件，然后提出一个基于链接或表单动作的Ajax请求，这样就不用刷新页面了。当框架等待Ajax响应时，会显示一个加载页面。,3内容和控件,jQuery Mobile可
3、以在页面中添加任何标准HTML元素，例如标题、列表、段落等。样也可以在jQuery Mobile的样式表后面添加自定义样式表。 jQuery Mobile还包含大量很好用的触屏UI控件，包括按钮、表单元素、折叠控件、弹出控件、对话框、表格等。可以使用jQuery Mobile Download Builder来选择需要的组件。,4按钮,在jQuery Mobile中，有几种方法定义按钮。这里介绍其中的一种方法，让读者体会一下jQuery Mobile的便捷。只需要在链接中添加data-role=“button“属性，就可以将链接转换为按钮，从而使其更易于点击。也可以使用data-icon属性为
4、按钮定义一个图标。 例如，下面的代码可以定义一个如图13-2所示的按钮。 Star button,5列表（Listview）, Acura Audi BMW Cadillac Ferrari ,6表单元素,7自适应设计,下面的网页就是自适应网页设计的一个示例。 http:/ data-theme=“b“ data-theme=“c“ data-theme=“d“ data-theme=“e“,13.1.2 引用jQuery Mobile开发包,.要开发jQuery Mobile应用程序，就需要在程序中引用jQuery Mobile开发包。jQuery Mobile开发包包括js文件和CSS文件
5、。与jQuery一样，可以使用下面两种方法引用jQuery Mobile脚本（和CSS文件）。,1引用jQuery Mobile官网的在线脚本,引用官网jQuery在线CSS文件的方法,2引用本地的jQuery Mobile脚本,要引用本地jQuery Mobile脚本，首先就要访问下面的网址下载jQuery Mobile开发包： http:/ 建议下载稳定版jQuery Mobile开发包。在编写本书时稳定版是1.0。单击“jquery.mobile-1.0.zip ”超链接开始下载。jquery.mobile-1.0.zip中包含js文件、CSS文件和一些图片文件。 http:/ Mobi
6、le脚本之前还需要引用jQuery脚本,下面是完整的引用jQuery Mobile脚本和CSS文件的代码,【例13-1】, jQuery例子 ,接上, Hello world I am jQuery. 页脚信息. ,data-role属性的可能取值,浏览【例13-1】的结果,浏览jQuery Mobile网页,可以直接在PC机中使用浏览器浏览jQuery Mobile网页，效果与使用手机浏览差不多。如果希望查看在手机中显示的效果，则需要搭建手机网站，然后将jQuery Mobile网页上传至网站，然后通过手机访问。为方便学习，建议直接在PC机中使用浏览器浏览jQuery Mobile网页，如果
7、担心与手机查看的效果不一样，也可以安装和使用使用Opera Mobile模拟器查看jQuery Mobile网页。,13.2 jQuery Mobile组件,jQuery Mobile提供一组用于设计移动终端用户界面的组件，包括 页面 对话框 工具栏 按钮 列表等。,13.2.1 页面设计,1多页 2页面的标题 3页面加载组件,1多页,【例13-1】是一个定义单页的实例，也可以同时定义多个页面。在页面中使用超链接跳转到其他页面。例如，单击下面的超链接可以跳转到id等于two的页面。 跳转到页面2,【例13-2】, 多页的例子 页面1,接上, 页面1的内容. 跳转到页面2 页面1的页脚信息. 页
8、面2 ,接上, 页面2的内容. 返回页面1 页面2的页脚信息. ,浏览【例13-2】,页面1,页面2,2页面的标题,在使用div标签定义jQuery Mobile页面时，可以使用data-title属性指定页面的标题。例如： ,3页面加载组件,使用$.mobile.loading()方法显示或隐藏页面加载组件，语法如下： $.mobile.loading( 动作, text: 显示的文本, textVisible: 是否显示文本, theme: 主题, html: HTML格式 );,参数说明如下, 动作：指定如何操作页面加载组件的字符串。使用show表示显示提示加载网页的对话框，使用hide
9、表示隐藏提示加载网页的对话框。 text：指定在提示加载网页的对话框中显示的字符串。 textVisible：如果为true，则在提示加载网页的对话框中的螺旋动画下面显示说明文字。 theme：指定提示加载网页的对话框的主题。主题在jquery.mobile-xxx.css中定义，可以使用一个字母字符串表示，例如“a“。 html：指定提示加载网页的对话框的内部HTML格式。例如，html:“is loading for you .“。通常使用它来设计自定义的提示加载网页的对话框。,【例13-3】, 页面加载组件的例子 $(document).on(“click“, “.show-page-l
10、oading-msg“, function() ,接上,$.mobile.loading( show, text: 正在加载页面, textVisible: true, theme: “a“, textonly: false, html: “ ); ); $(document).on(“click“, “.hide-page-loading-msg“, function() $.mobile.loading( hide); ); 显示加载网页的对话框 隐藏加载网页的对话框 ,接上, 美女 小花 ,显示加载网页的对话框,13.2.2 对话框设计,任何jQuery Mobile页面都可以很方便地以
11、模式对话框（指用户在应用程序的对话框中，想要对对话框以外的应用程序进行操作时，必须首先对该对话框进行响应）的形式显示，只要在打开该页面的超链接中使用data-rel=“dialog“属性即可。例如： 打开对话框 data-transition属性用于指定打开对话框的转换方式。可以选择使用下面3种方式。 pop：弹出对话框； slidedown：以淡入（即从隐藏逐渐到可见）滑动方式显示对话框； flip：以快速翻转方式显示对话框。,【例13-4】,首先定义一个jQuery Mobile页面dialog.html，代码如下： jQuery Mobile Framework - Dialog Exa
12、mple Dialog ,接上, Close Dialog? This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel=“dialog“ attribute. Close ,打开对话框的页面为例13-4.html，代码如下, jQuery Mobile对话框 ,接上, 演示打开对话框 打开对话框 ,浏览例13-4.html的界面,13.2.3 弹出框,弹出框（Popup）是jQuery Mobil
13、e的新组件，可以用于实现一个弹出的提示框、菜单、表单、对话框、图片、甚至可以是视频或地图。 可以在div元素中使用data-role=“popup“属性定义弹出框，例如： This is a completely basic popup, no options set. ,【例13-5】, jQuery Mobile对话框 演示打开弹出框 这是一个简单的弹出框，用于显示提示信息。 单击打开弹出框 ,浏览【例13-5】,【例13-6】, 这是一个简单的弹出框，用于显示提示信息。 ,【例13-6】定义的jQuery Mobile弹出框,1使用jQuery Mobile弹出框定义菜单,在弹出框里可以
14、使用ul元素定义菜单，其中的li元素为菜单项。,【例13-7】, Popup API Options Methods Events ,定义按钮的代码,Menu,【例13-7】定义的jQuery Mobile弹出菜单,【例13-8】, Farm animals Chicken Cow Duck Sheep ,接上, Pets Cat Dog Iguana Mouse Ocean Creatures Fish Octopus,接上,Shark Starfish Wild Animals Lion Monkey Tiger Zebra ,定义按钮的代码,Nested menu,【例13-8】定义的j
15、Query Mobile弹出框,2使用jQuery Mobile弹出框定义对话框,可以在div元素中定义文本提示按钮，将弹出框定义为对话框。,【例13-9】, 删除? 是否确认删除? 此操作将无法恢复。 取消 删除 ,定义按钮的代码,对话框,【例13-9】定义的jQuery Mobile弹出框,3使用jQuery Mobile弹出框定义表单,可以在div元素中定义表单，将弹出框表现为表单。,【例13-10】, 请登入 用户名: 密码: 登 录 ,定义按钮的代码,表单,定义的jQuery Mobile弹出框,13.2.4 工具栏设计,jQuery Mobile的页头和页脚都是一种简单的工具栏，前面已经介绍了页头（Header）和页脚（Footer）定义方法和样式。可以使用默认样式的工具栏，也可用自定义工具栏的外观和样式。jQuery Mobile还提供一种导航条组件（Navbar），可以实现更复杂的工具栏。,1页头工具栏, Page Title ,【例13-11】, 在页头工具栏中定义按钮 ,接上, 取消 编辑联系人 保存 ,在页头工具栏中定义按钮,2页脚工具栏,页脚是页面底端的工具栏，
