《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第12章课件.ppt》由会员分享，可在线阅读，更多相关《新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第12章课件.ppt（111页珍藏版）》请在三一办公上搜索。
1、第12章 创建移动设备网页及应用程序,本章学习要点： 1认识jQuery Mobile 2创建移动设备页面 3创建页面组件 4打包移动应用程序,第12章 创建移动设备网页及应用程序本章学习要点：,随着移动互联网的迅速发展，智能手机和平板电脑等移动设备的应用日益普及，网页设计和网站开发正在向移动端迁移。jQuery Mobile是一套移动应用界面开发框架，它通过网页形式来呈现类似于移动应用的用户界面，旨在创建使智能手机、平板电脑和台式机设备都能访问的响应式移动网站和应用程序。,第12章 创建移动设备网页及应用程序,随着移动互联网的迅速发展，智能手机和平板电脑,12.1认识jQuery 和jQue
2、ry Mobile,12.1.1 认识jQuery jQuery是继prototype（JS对象）之后又一个优秀的JavaScrip框架，是一个兼容多浏览器（IER6.0+、safari2.0+、ff1.5+及Opera9.0+）的JavaScrip库，同时也兼容CSS3。jQuery可以让用户更方便地处理HTML文档、事件和实现动画效果，并为网站提供Ajax交互和许多成熟可用的插件。它能够使用户的HTML页面保持代码和内容相分离，用户无需在HTML中插入众多js来调用命令，只需定义id即可。,12.1认识jQuery 和jQuery Mobile,12.1.1 认识jQuery,jQuery
3、是免费、开源的，其语法设计可以使开发更加便捷，如操作文档对象、选择DOM元素、制作动画效果、使用Ajax及其他功能等。另外，jQuery还提供API供用户编写插件，模块化的使用方式使用户可以方便快捷地开发出功能强大的静态或动态网页。,12.1.1 认识jQuery jQuery是免,12.1.2 认识jQuery Mobile,jQuery Mobile基于打造一个顶级的JavaScript库，在不同的智能手机和平板电脑的Web浏览器上形成统一的用户UI。它兼容所有主流的移动平台，如iOS、Android、Windows Mobile、BlackBerry、Palm WebOS、Symbian
4、等，以及所有支持HTML的移动平台。 与jQuery核心库一样，用户的开发计算机上无需安装任何东西，只需将各种“*.js”和“*.css”文件直接包含到web页面中即可。,12.1.2 认识jQuery Mobile,想在浏览器中正常运行一个jQuery Mobile移动应用页面，需要下载与jQuery Mobile相关的插件文件。1下载插件文件 若想搭建移动应用页面需要包含3个框架文件:jQuery-3.1.1.min.js（jQuery主框架插件）、jQuery Mobile-1.4.5.min.js(jQuery Mobile框架插件) Mobile-1.4.5.min.css（与框架配
5、套的CSS样式文件）,12.1.3下载jQuery Mobile,想在浏览器中正常运行一个jQuery Mob,登录jQuery Mobile官方网站（http:/ jQuery Mobile”下的链接按钮都可进入文件下载页面，如图所示。,12.1.3下载jQuery Mobile,登录jQuery Mobile官方网站（ht,2通过URL链接文件 除上述下载方式外，还可以通过URL从jQuery CDN下载插件文件。CDN，即Content Delivery Network，用于快速下载跨Internet常用的文件。在【代码】视图的“”标签中添加如下代码，同样可以执行jQuery Mobil
6、e移动应用页面。,12.1.3下载jQuery Mobile,2通过URL链接文件12.1.3下载jQuery Mobi,12.1.3下载jQuery Mobile,link rel=stylesheet href=h,12.2 使用jQuery Mobile创建移动设备网页,Dreamweaver 与jQuery Mobile 相集成，可以帮助用户快速设计适合大部分移动设备的网页程序，同时也可以使网页自身适应各类尺寸的设备。下面将介绍在Dreamweaver中使用jQuery Mobile 起始页创建应用程序和使用HTML5创建Web 页面的方法。,12.2 使用jQuery Mobile创
7、建移动设备网页,jQuery Mobile 起始页包含HTML 、CSS 、JavaScript和图像文件，可以帮助用户开始设计应用程序。默认情况下，Dreamweaver使用jQuery Mobile CDN。 安装Dreamweaver时，会将jQuery Mobile文件的副本复制到用户计算机中。选择jQuery Mobil（本地）起始页时所打开的HTML页会链接到本地CSS、JavaScript 和图像文件。,12.2.1 使用jQuery Mobile起始页创建,jQuery Mobile 起始页包含H,12.2.1 使用jQuery Mobile起始页创建,选择【文件】/【新建】命
8、令，在【新建文档】对话框中选择【示例中的页】，在右侧的【示例文件夹】列表中选择【Mobile起始页】，【示例页】选择“jQuery Mobile（本地）”，如图所示 。,12.2.1 使用jQuery Mobile起始页创建,单击【创建】按钮，完成文档的创建，jQuery Mobile的网页结构如图所示。,12.2.1 使用jQuery Mobile起始页创建,单击【创建】按钮，完成文档的创建，jQuery Mobile,单击【文件】/【保存】命令，弹出【复制相关文件】对话框，如图所示，单击【复制】按钮，完成文件的保存。,12.2.1 使用jQuery Mobile起始页创建,单击【文件】/【
9、保存】命令，弹出【复制相关文件】对话框，如,12.2.2 通过空白文档创建,（1）新建HTML5文档 在Dreamweaver CS6中，用户也可以通过创建HTML5空白文档，然后在页面中添加jQuery Mobile组件来创建移动页面。,12.2.2 通过空白文档创建（1）新建HTML5文档,选择【文件】/【新建】命令，在弹出的【新建文档】对话框中选择【空白页】选项，在【页面类型】中选择【HTML】，设置右下角【文档类型】为“HTML5”，单击【确定】按钮。,12.2.2 通过空白文档创建,选择【文件】/【新建】命令，在弹出的【新建文档】,新建HTML5空白文档,12.2.2 通过空白文档创
10、建,新建HTML5空白文档 12.2.2 通过空白文档创建,HTML5页面,12.2.2 通过空白文档创建,HTML5页面 12.2.2 通过空白文档创建,（2）插入jQuery Mobile页面 选择【插入】/【jQuery Mobile】/【页面】命令，弹出【jQuery Mobile文件】对话框，如图所示。选择适当的类型后单击【确定】按钮。,12.2.2 通过空白文档创建,（2）插入jQuery Mobile页面12.2.2 通过空,在弹出的【jQuery Mobile页面】对话框中输入ID名称，设置是否需要标题和脚注，单击【确定】按钮完成页面的创建，如图所示。,12.2.2 通过空白文
11、档创建,在弹出的【jQuery Mobile页面】对,在开发移动页面之前，首先要了解jQuery Mobile应用程序的基本页面结构，即视图，进而掌握移动应用的基本框架和多页面视图结构及常用元素的使用。,12.3 移动页面基础,在开发移动页面之前，首先要了解jQuery,12.3.1 页面结构,jQuery Mobile提供一个标准的框架模型，即在页面中通过将一个标签的data-role属性设置为page，即可设计一个视图。 视图一般包含3个基本结构，分别是data-role属性为header、content和footer的3个子容器，用于定义“标题”、“内容”和“脚注”3个页面组成部分，用于
12、容纳不同的页面内容 。,12.3.1 页面结构 jQuery Mobi,代码如下： 标题 内容 脚注 ,12.3.1 页面结构,代码如下：12.3.1 页面结构,在IE中的浏览效果如图所示。,12.3.1 页面结构,在IE中的浏览效果如图所示。12.3.1 页面结构,一般情况下，移动设备的浏览器显示页面的宽度默认为900px，这种宽度会导致屏幕缩小，页面放大，不适合页面浏览。为了更好地支持HTML5的新增加功能和属性，使页面的宽度与移动设备的屏幕宽度相适应，用户可以在页面的和中添加标签，设置content属性值为“width=device-width,initial-scale=1”，并设置其
13、name属性为“viewport” 。,12.3.2 页面控制,一般情况下，移动设备的浏览器显示页面的宽度,一个jQuery Mobile文档可以包含多页面结构，即在一个文档中可以包含多个标签属性data-role为page的容器，从而形成多容器页面结构。每个容器拥有唯一的ID值，且各自独立。当页面加载时，这些容器同时被加载，并通过锚记链接的形式访问容器，即“#”号加容器ID值的方式设置链接。当用户单击该链接时，jQuery Mobile将在页面文档中寻找对应ID的容器，并以动画效果切换至该容器，实现容器间内容的访问。,12.3.3 插入多容器页面,一个jQuery Mobile文档可以包含多
14、页,通过jQuery Mobile起始页创建的网页文档即是一个多容器页面，页面效果如图所示。,12.3.3 插入多容器页面,通过jQuery Mobile起始页创建的网,在多页面切换过程中，可以使用jQuery Mobile框架内置的多种基于CSS的页面转场效果进行页面的切换，默认情况下，jQuery Mobile应用的是从右到左划入的转场效果。通过在链接中添加“data-transition”属性可以自定义页面的转场特效。,12.3.4 设置页面转场,在多页面切换过程中，可以使用jQuery M,data-transition属性参数及说明,12.3.4 设置页面转场,data-transi
15、tion属性参数及说明12.3.4 设,1新建jQuery Mobile起始页。选择【文件】/【新建】命令，在【新建文档】对话框中选择【示例中的页】，【示例文件夹】选择【Mobile起始页】，在【示例页】中选择【jQuery Mobile（本地）】，单击【创建】按钮。,12.3.5 课堂案例制作简单多容器页面,1新建jQuery Mobile起始页。选择【文件】/【新,2保存文档。单击【文件】/【保存】命令，将文件另存为“index.html”，并保存在站点根文件夹下，在弹出的【复制相关文件】对话框中，单击【复制】按钮，把相关的框架文件复制到本地站点。,12.3.5 课堂案例制作简单多容器页面
16、,2保存文档。单击【文件】/【保存】命令，将文件另存为“in,3设置页面控制。单击文档工具栏上的【拆分】按钮，进入拆分界面，在左侧的代码窗口中找到“”标签，并在“”标签中添加“name=viewport content=width=device-width,initial-scale=1”属性，使页面的宽度与移动设备的屏幕宽度相适应。,12.3.5 课堂案例制作简单多容器页面,3设置页面控制。单击文档工具栏上的【拆分】按钮，进入拆分界,4命名page容器。设置4个page容器的id值分别为“page”、“doc”、“video”和“troom”。5设置标题和脚注。在设计界面设置4个page容器
17、标题分别“媒体资料室”、“文字材料”、“影像资料”和“教研室建设”，脚注均为“商学字媒体与信息系”。,12.3.5 课堂案例制作简单多容器页面,4命名page容器。设置4个page容器的id值分别为“p,6设置后退按钮。为id值为“doc”和“video”的page容器添加“data-add-back-btn=true data-back-btn-text=首页”属性，即可在页面头部栏的左侧增加一个名为“首页”的后退按钮；为id 值为“troom”的page容器添加“data-add-back-btn=true data-back-btn-text=返回”属性，为页面增加一个名为“返回”的后退
18、按钮，如图所示。,12.3.5 课堂案例制作简单多容器页面,6设置后退按钮。为id值为“doc”和“video”的pa,7设置容器内容及超级链接。（1）删除id值为“page”容器中的列表，并输入文本“文字材料|影像资料”，选中“文字材料”文本，在【属性】检查器的【链接】下拉列表框中输入“#doc”；选中“影像资料”文本，在【属性】检查器的【链接】下拉列表框中输入“#video”，效果如图所示。,12.3.5 课堂案例制作简单多容器页面,7设置容器内容及超级链接。12.3.5 课堂案例制作简单,（3）在id值为“video”容器中，输入两个段落文本，分别为“教学竞赛”和“教研室活动”。选中两个
19、段落文本，单击【属性】检查器的 按钮，将文本设置为项目列表。选中“教学竞赛”文本，在【属性】检查器的【链接】下拉列表框中输入“#comp”；选中“教研室活动”文本，在【属性】检查器的【链接】下拉列表框中输入“#acti”，效果如图所示。,12.3.5 课堂案例制作简单多容器页面,（3）在id值为“video”容器中，输入两个段落文本，分别,（4）在id值为“troom”容器中，输入相应文本，选中“返回上一页”文本，并在代码窗口为链接添加“data-rel=back”属性，如图所示。,12.3.5 课堂案例制作简单多容器页面,（4）在id值为“troom”容器中，输入相应文本，选中“返,8设计页
20、面转场。选中“page”容器中“文字材料”文本，在代码窗口为链接添加“data-transition=slideup”属性，代码如下所示：文字材料使用同样的方法设置其它链接文本。,12.3.5 课堂案例制作简单多容器页面,8设计页面转场。选中“page”容器中“文字材料”文本，在,对话框是交互设计中的基本构成组件，在jQuery Mobile中，通过给指定页面的链接增加“data-rel”属性，并设置该属性值为“dialog”，当单击该链接时，打开的页面即以对话框的形式显示。 应用了对话框属性的新页面会以圆角方式显示，页面周围增加边缘及深色的背景，使得对话框浮在页面之上。,12.4 创建对话框
21、,对话框是交互设计中的基本构成组件，在jQue,选择 【插入】 / 【jQuery Mobile】 / 【页面】 命令, 新建一个 jQuery Mobile 页面, 在设计 窗口选中页面文本 “内容”, 将其替换成 “打开对话框”, 选中文本 “打开对话框”, 在属性 检查器中设置 【链接】 属性为 “book. html”。,12.4.1 新建对话框,选择 【插入】 / 【jQuery Mobi,单击文档工具栏的 【拆分】 按钮, 在 【代码】 窗口为页面链接 标签添加属性 data-rel 为 “dialog”, 代码如下。 打开对话框 ,12.4.1 新建对话框,单击文档工具栏的 【拆
22、分】 按钮, 在 【代码】 窗口为页面,1打开“index.html”文档，进入代码窗口，在id为“doc”容器中“教材建设”文本的超级链接中添加“data-rel”属性，并设置值为“dialog”。代码如下：教材建设,12.4.2 课堂案例插入对话框,1打开“index.html”文档，进入代码窗口，在id为,2新建HTML5文档。选择【文件】/【新建】命令，在【新建文档】对话框中选择【空白页】，【页面类型】选择【HTML】，【文档类型】选择【HTML5】，单击【确定】按钮。,12.4.2 课堂案例插入对话框,2新建HTML5文档。选择【文件】/【新建】命令，在【新建,3保存文档。单击【文件
23、】/【保存】命令，将文件另存为“book.html”，并保存在站点根文件夹下。4插入页面。选择【插入】/【jQuery Mobile】/【页面】命令，在文档中插入一个id值为“dialog”的页面。,12.4.2 课堂案例插入对话框,3保存文档。单击【文件】/【保存】命令，将文件另存为“bo,5设置页面文本。定义标题文本为“教材建设”，脚注为“商学院媒体与信息系”，输入内容信息并设置为列表，如图所示。,12.4.2 课堂案例插入对话框,5设置页面文本。定义标题文本为“教材建设”，脚注为“商学院,6设置主题样式。单击文档工具栏的【代码】按钮，为header、content和footer容器添加“
24、data-theme”属性，并设定主题样式分别为“b”、“d”和“b”，效果如图所示。,12.4.2 课堂案例插入对话框,6设置主题样式。单击文档工具栏的【代码】按钮，为heade,jQuery Mobile 提供了一套标准的工具栏组件, 移动应用只需对标签添加相应的属性值就 可以直接使用。 通常情况下, 工具栏元素都放置在页眉 (标题) 和页脚 (脚注) 中, 以实现 “已访问” 的导航。,12.5 创建工具栏,jQuery Mobile 提供了一套标准的,jQuery Mobile提供了一套标准的工具栏组件，移动应用只需对标签添加相应的属性值就可以直接使用。通常情况下，工具栏元素都放置在页
25、眉（标题）和页脚（脚注）中，以实现“已访问”的导航。,12.5.1 定义标题栏,jQuery Mobile提供了一套标准的,1定义标题栏 标题栏位于页面顶部，即页眉的位置，通常包含页面标题或一到两个按钮（通常是首页、选项或搜索按钮）。标题文字以“”标题方式显示，默认的主题样式为a(黑色)。,12.5.1 定义标题栏,1定义标题栏12.5.1 定义标题栏,在标准的标题栏中，标题文字两侧各有一个可放置按钮的位置，由于标题栏空间的限制，工具栏中的按钮均是内联按钮，按钮的宽度只允许放置icon图标和文字。在jQuery Mobile中，为按钮添加图标可以通过添加data-icon属性实现，jQuery
26、 Mobile自带图标集合中的图标名称及图标样式说明如表12-2所示。,12.5.1 定义标题栏,在标准的标题栏中，标题文字两侧各有一个可放置按,例如，为页面添加“上一页”和“下一页”按钮，以实现页面间的切换，代码如下所示：上一页文字材料下一页页面效果如图所示。,12.5.1 定义标题栏,例如，为页面添加“上一页”和“下一页”按钮，以实现页面间的切,12.5.2 定义脚注栏,与页眉相比，页脚更具伸缩性，它们更实用且变化较多，能够满足用户定义多个按钮的需求。脚注栏除了使用的data-role（footer）的属性与标题栏(header)不同外，基本的结构与标题栏都是相同的。但是，与页眉的样式不同
27、，页脚会减去一些内边距和空白，并且按钮不会居中。如果要修正该问题，需要在页脚添加一个名为 ui-btn的类。,12.5.2 定义脚注栏 与页眉相比，页脚更具,例如，为上图所示的页面添加多个功能按钮，代码如下： 添加项目 删除项目 上移项目 下移项目,12.5.2 定义脚注栏,例如，为上图所示的页面添加多个功能按钮，代码如下：12.5.,页面效果如图所示。,12.5.2 定义脚注栏,页面效果如图所示。12.5.2 定义脚注栏,12.5.3 定位页眉和页脚,放置页眉和页脚的方式有三种： Inline ： 默认。页眉和页脚与页面内容位于行内。 Fixed ： 页面和页脚固定在页面的顶部和底部。如果页
28、面滚动条可用，则敲击屏幕将隐藏或显示页眉或页脚，效果会根据用户在页面上的位置而变化。 Fullscreen ：与 fixed类似，页面和页脚固定在页面的顶部和底部。但是当工具栏滚出屏幕之外时，不会自动重新显示，除非点击屏幕。在这种模式下工具栏会遮住页面内容，工具栏显示为半透明状态。,12.5.3 定位页眉和页脚放置页眉和页脚的方式有三种：,在jQuery Mobile中，通过为页眉和页脚添加data-position属性来实现定位。例如，将页眉和页脚的data-position属性值设置为“fixed”，代码如下： 标题 内容 脚注 ,12.5.3 定位页眉和页脚,在jQuery Mobile
29、中，通过为页眉和,jQuery Mobile导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内，每行最多能够放置5个按钮，超过5个按钮时，导航栏自动表现为多行。,12.5.4 设计导航栏,jQuery Mobile导航栏是由一组水平,导航栏是由添加了“data-role=navbar”属性的容器中的无序列表组成的，通过无序列表来平均地划分按钮的宽度，1个按钮占整个窗口宽度，2个按钮则各占 1/2的宽度，3个按钮则每个占 1/3的宽度，依此类推。如果想设置某个按钮为活动链接，则可以通过给链接添加“class=ui-btn-active”属性来实现。,12.5.4 设计导航栏,导航栏是由添加
30、了“data-role=na,例如，为头部添加导航栏，并设置第一个链接为活动链接，代码如下： 标题 链接一 链接二 ,12.5.4 设计导航栏,例如，为头部添加导航栏，并设置第一个链接为活动链接，代码如下,网页效果如图所示。,12.5.4 设计导航栏,网页效果如图所示。12.5.4 设计导航栏,在导航栏中，每个导航按钮都是通过“”标签定义的，如果希望给导航栏中的导航按钮添加图标，可以通过在链接标签中添加“data-icon”属性来实现，其属性值为jQuery Mobile自带图标集合中的图标名称。图标名称及图标样式说明如表12-2所示。,12.5.4 设计导航栏,在导航栏中，每个导航按钮都是通
31、过“”,表12-2 jQuery Mobile自带图标集,12.5.4 设计导航栏,表12-2 jQuery Mobile自带图标集12.5.4,在导航栏中，默认情况下，图标放置在按钮文字上面，如果需要调整图标的位置，需要在导航栏容器中添加“data-iconpos”属性，可以设置其值为“top”、“right”、“bottom”和“left”，分别表示图标在导航按钮的上面、右侧、底部和左侧，默认值为“top”。,12.5.5 设置导航按钮位置,在导航栏中，默认情况下，图标放置在按钮文字上面,具体操作步骤： 打开“index.html”文档，进入代码窗口，执行以下步骤：1添加头部导航（1）设置
32、导航文本。将鼠标光标置于id为“page”的容器中，为其头部设置导航栏文本 。代码如下：,12.5.6 课堂案例定义导航栏,具体操作步骤：12.5.6 课堂案例定义导航栏, 媒体资料室 首页 系部新闻 专业介绍 课程设置 ,12.5.6 课堂案例定义导航栏,12.5.6,（2）添加活动链接。返回设计窗口，选中“首页”链接文本，在【属性】检查器中设置【类】为“class=ui-btn-active”，激活第一个导航按钮，如图所示。,12.5.6 课堂案例定义导航栏,（2）添加活动链接。返回设计窗口，选中“首页”链接文本，在【,12.5.6 课堂案例定义导航栏,2添加底部导航 将鼠标光标置于为id
33、为“page”的容器中，为底部导航栏添加导航图标及文本，并设置图标位置，代码如下：,12.5.6 课堂案例定义导航栏2添加底部导航, 返回 前进 刷新 搜索 设置 ,12.5.6 课堂案例定义导航栏,12.5.6,网页效果如图所示。,12.5.6 课堂案例定义导航栏,网页效果如图所示。12.5.6 课堂案例定义导航栏,jQuery Mobile提供多种组件，如列表、布局、表单等，用于为移动页面添加不同的页面元素，通过Dreamweaver CS6插入菜单或插入面板组均可以插入这些组件。,12.6 使用组件,jQuery Mobile提供多种组件，如列,12.6.1插入列表视图,“”或“”标签中
34、添加“data-role=listview”属性，并为每个项目()添加超级链接实现。 将鼠标光标定位到jQuery Mobile页面的目标位置，选择【插入】/【jQuery Mobile】/【列表视图】命令，弹出【列表视图】对话框，设置属性如图所示。,12.6.1插入列表视图 “”或“,单击【确定】按钮，完成列表的创建，如图所示,12.6.1插入列表视图,单击【确定】按钮，完成列表的创建，如图所示12.6.1插入列,jQuery Mobile为视图页面提供了强大的版式支持，通过使用布局表格使页面的格式化变得简单。jQuery Mobile框架提供了一种简单的方法构建基于CSS的分栏布局，叫做u
35、i-grid。 jQuery Mobile提供了两种预设的配置布局：两列布局（class含有ui-grid-a）三列布局（class含有ui-grid-b）。 网格宽度为100%，不可见（没有背景或边框），也没有padding和margin，因此它们不会影响内容元素的样式。,12.6.2 插入布局网格,jQuery Mobile为视图页面提供了强,12.6.2 插入布局网格,将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【布局网格】命令，弹出【jQuery Mobile布局网格】对话框，如图所示。,12.6.2 插入布局网格 将鼠标光标置于目标,分别设置行和列的值，单击
36、【确定】按钮，布局网格如图所示。,12.6.2 插入布局网格,分别设置行和列的值，单击【确定】按钮，布局网格如图所示。12,在页面中插入可折叠区块后，通过单击标题能够展开或收缩其下面的内容，以节省屏幕空间。要创建一个可折叠的区块，首先创建一个容器，并为容器添加“data-role=collapsible”属性。 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【可折叠区块】命令，在页面中插入一个可折叠区块，如图所示。在页面中通过编辑标题和内容完成可折叠区块的设置。,12.6.3 插入可折叠区块,在页面中插入可折叠区块后，通过单击标题能够展,12.6.3 插入可折叠区块,1
37、2.6.3 插入可折叠区块,同普通网页中的表单一样，移动网页也可以添加文本、密码和文本区域。文本输入框和文本输入域使用标准的标签实现，jQuery Mobile会让它们在移动设备中变得更加容易于触摸使用。,12.6.4 插入文本元素,同普通网页中的表单一样，移动网页也可以添加文,文本输入框是在标签中添加“type=text”属性，密码输入框是在标签中添加“type=password”属性，文本区域即多行文本域，通过使用标签实现。用户要把标签的for属性设为的id值，使它们能够在语义上相关联，并且放置到Div容器中，再设定“data-role=fieldcontain”。,12.6.4 插入文本
38、元素,文本输入框是在标签中添加“typ,将鼠标光标置3于目标位置，选择【插入】/【jQuery Mobile】，在展开的菜单中选择【文本输入】、【密码输入】或【文本区域】）命令，即可在页面插入一个文本输入框、密码输入框或文本区域。,12.6.4 插入文本元素,将鼠标光标置3于目标位置，选择【插入】/【j,网页如图所示。,12.6.4 插入文本元素,网页如图所示。12.6.4 插入文本元素,jQuery Mobile重新定制了标签样式，以适应移动设备的浏览显示需求。整个菜单由按钮和菜单两部分组成，当用户单击按钮时，手机自带的菜单选择器将被打开，选择某个菜单项后，菜单自动关闭，菜单按钮的值将自动更
39、新为菜单中用户所选择的值。选择菜单组件使用标准的标签和位于其内部的一组标签实现。,12.6.5 插入选择菜单,jQuery Mobile重新定制了sel,将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【选择菜单】命令，即可在页面插入一个选择菜单，选中该菜单，在【属性】检查器中单击按钮，在打开的【列表值】对话框中设置【项目标签】和【值】，如图所示。,12.6.5 插入选择菜单,将鼠标光标置于目标位置，选择【插入】/【jQ,网页效果如图所示。,12.6.5 插入选择菜单,网页效果如图所示。12.6.5 插入选择菜单,复选框和单选按钮用来实现页面中选项的选择操作。复选框可以进
40、行多项选择，而单选按钮只能选择一项。 复选框由添加了“type=checkbox”属性的标签和相应的标签实现的。因为复选框按钮使用标签标识显示文本内容，因此，复选按钮组的标题可以通过添加一对标签来标识。 单选按钮则由添加了“type=radio”属性的标签和相应的标签实现。,12.6.6 插入复选框和单选按钮,复选框和单选按钮用来实现页面中选项的选择操作,复选框和单选按钮的创建方法基本相同。将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】，在弹出的菜单中选择【复选框】或【单选按钮】命令，弹出【jQuery Mobile复选框】或【jQuery Mobile单选按钮】对话框，
41、在该对话框中分别设置名称、数量及布局方式，单击【确定】按钮。【jQuery Mobile复选框】对话框如图所示,12.6.6 插入复选框和单选按钮,复选框和单选按钮的创建方法基本相同。将鼠标光,12.6.6 插入复选框和单选按钮,插入复选框及单选按钮网页效果如图所示。,12.6.6 插入复选框和单选按钮插入复选框及单选按钮网页效,12.6.7 插入滑块,滑块由添加了“type=range”属性的标签实现。在jQuery Mobile中，滑块组件由两部分组成，一部分是可以调整大小的数字输入框，另一部分是可拖动修改输入框数字的滑动条。滑块元素可以通过min和max属性来设置滑动条的取值范围，也可以
42、指定滑动条的value值。,12.6.7 插入滑块 滑块由添加了“type,将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【滑块】命令，即在网页中插入滑块组件，如图所示。,12.6.7 插入滑块,将鼠标光标置于目标位置，选择【插入】/【jQ,12.6.8 插入翻转切换开关,翻转切换开关是移动设备中常见界面元素，提供系统配置中默认值的设置。用户可以通过滑动或单击开关进行操作。 翻转切换开关由添加了“data-role=slider”属性的标签和相应的标签、标签实现。创建一个只有两个选项的选择菜单，第一个选项为“开”状态，返回值为true或1等；第二个选择为“关”状态，返回
43、值为false或0等。,12.6.8 插入翻转切换开关 翻转切换开关,12.6.8 插入翻转切换开关,将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【翻转切换开关】命令，即在网页中插入翻转切换开关组件，如图所示。,12.6.8 插入翻转切换开关 将鼠标光标置于目标位置，,12.6.9 插入日期拾取器,日期拾取器插件需要用户手动包含到当前文件，因为它没有包含在jQuery Mobile默认库中。日期拾取器由添加了“type=date”属性的标签实现，如图所示。,12.6.9 插入日期拾取器 日期拾取器插件需要用,12.6.10 课堂案例创建用户注册页面,具体操作步骤：1选
44、择【文件】/【新建】命令，新建一个空白HTML文档，将文档另存为“index.html”。2插入表单。选择【插入】/【表单】/【表单】命令，在页面中插入一个表单。,12.6.10 课堂案例创建用户注册页面具体操作步骤：,12.6.10 课堂案例创建用户注册页面,3插入jQuery Mobile页面。将鼠标光标置于表单内，选择【插入】/【jQuery Mobile】/【页面】命令，弹出【jQuery Mobile文件】对话框，选择默认设置，单击【确定】按钮，即在表单中插入jQuery Mobile页面，修改页面标题为“新用户注册”并删除脚注，如图所示。,12.6.10 课堂案例创建用户注册页面3
45、插入jQuer,12.6.10 课堂案例创建用户注册页面,4插入文本输入。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【文本输入】命令，在页面中插入一个文本输入框。修改“文本输入”文本为“昵称：”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“nc”，【类型】为“单行”，如图所示。,12.6.10 课堂案例创建用户注册页面4插入文本输入。,12.6.10 课堂案例创建用户注册页面,5插入密码输入域。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【密码输入】命令，在页面中插入一个密码输入文本框。修改“密码输入”文本为“密码：
46、”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“pwd”，【类型】为“密码”，如图所示。,12.6.10 课堂案例创建用户注册页面5插入密码输入域,12.6.10 课堂案例创建用户注册页面,6插入时间拾取器。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【文本输入】命令，在页面中插入一个文本输入框。修改“文本输入”文本为“出生时间：”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“date”，【类型】为“单行”。切换到代码窗口，修改该“”标签属性“type=date”，如图所示。,12.6.10 课堂案例创建用户注册页面6插入时间拾取器,12
47、.6.10 课堂案例创建用户注册页面,7 插入单选按钮。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【单选按钮】命令，弹出【jQuery Mobile对话框】，设置属性如图所示，单击【确定】按钮。,12.6.10 课堂案例创建用户注册页面7 插入单选按钮,12.6.10 课堂案例创建用户注册页面,在设计窗口中，修改单选按钮组的标题文本“选项”为“性别：”，选中第一个单选按钮，在【属性】检查器中设置【选定值】为“男”，修改该按钮对应的标签文本“选项”为“男”；再选中第二个单选按钮，在【属性】检查器中设置【选定值】为“女”，修改该按钮对应的标签文本“选项”为“女”，
48、如图所示。,12.6.10 课堂案例创建用户注册页面 在设,12.6.10 课堂案例创建用户注册页面,8插入复选框。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【复选框】命令，弹出【jQuery Mobile对话框】，设置属性如图所示，单击【确定】按钮。,12.6.10 课堂案例创建用户注册页面8插入复选框。将,12.6.10 课堂案例创建用户注册页面,在设计窗口中，修改复选按钮组的标题文本“选项”为“爱好：”，分别选中3个复选按钮，在【属性】检查器中设置【选定值】分别为“游泳”、“音乐”和“美术”，并修改对应的标签文本同复选按钮值，如图所示。,12.6.10
49、课堂案例创建用户注册页面在设计窗口中，修改,12.7 使用PhoneGap Build打包移动应用,PhoneGap Build是一个远程编译PhoneGap的web服务器，由于PhoneGap Build所有版本均不再支持Dreamweaver与用于打包移动应用程序的PhoneGap Build直接集成，用户可以通过使用云中的Adobe PhoneGap Build服务打包移动应用程序生成应用，PhoneGap Build服务将在几分钟内编译并打包内容，而且用户会收到适用于所有移动平台的下载链接，包括苹果的App Store、Android Marker、WebOS、Symbian等。,12
50、.7 使用PhoneGap Build打包移动应用,12.7.1 注册PhoneGap Build,在使用PhoneGap服务前需要先注册PhoneGap Build服务帐户，否则无法使用PhoneGap Build和Dreamweaver。 用户可以登录https:/,12.7.1 注册PhoneGap Build 在,12.7.1 注册PhoneGap Build,单击【free】按钮，进入登录界面，如图12-47所示。如果是未注册用户，可以点击【Get an Adobe ID】，进入注册界面，如图所示。,12.7.1 注册PhoneGap Build 单击【f,12.7.1 注册Phon
