新媒体网页设计与制作DreamweaverCS6基础、案例、技巧实用教程第12章课件

1、第12章 创建移动设备网页及应用程序本章学习要点： 1认识jQuery Mobile 2创建移动设备页面 3创建页面组件 4打包移动应用程序第12章 创建移动设备网页及应用程序本章学习要点： 随着移动互联网的迅速发展，智能手机和平板电脑等移动设备的应用日益普及，网页设计和网站开发正在向移动端迁移。jQuery Mobile是一套移动应用界面开发框架，它通过网页形式来呈现类似于移动应用的用户界面，旨在创建使智能手机、平板电脑和台式机设备都能访问的响应式移动网站和应用程序。第12章 创建移动设备网页及应用程序 随着移动互联网的迅速发展，智能手机和平板电脑12.1认识jQuery 和jQuery M

2、obile 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（与框架配套的CSS样

5、式文件）12.1.3下载jQuery Mobile 想在浏览器中正常运行一个jQuery Mob 登录jQuery Mobile官方网站（/），单击主页导航条中的“Download”链接或主页右侧的“Download jQuery Mobile”下的链接按钮都可进入文件下载页面，如图所示。12.1.3下载jQuery Mobile 登录jQuery Mobile官方网站（ht2通过URL链接文件 除上述下载方式外，还可以通过URL从jQuery CDN下载插件文件。CDN，即Content Delivery Network，用于快速下载跨Internet常用的文件。在【代码】视图的“”标签中添

6、加如下代码，同样可以执行jQuery Mobile移动应用页面。12.1.3下载jQuery Mobile2通过URL链接文件12.1.3下载jQuery Mobi12.1.3下载jQuery Mobilelink rel=stylesheet href=h12.2 使用jQuery Mobile创建移动设备网页 Dreamweaver 与jQuery Mobile 相集成，可以帮助用户快速设计适合大部分移动设备的网页程序，同时也可以使网页自身适应各类尺寸的设备。下面将介绍在Dreamweaver中使用jQuery Mobile 起始页创建应用程序和使用HTML5创建Web 页面的方法。12.

7、2 使用jQuery Mobile创建移动设备网页 jQuery Mobile 起始页包含HTML 、CSS 、JavaScript和图像文件，可以帮助用户开始设计应用程序。默认情况下，Dreamweaver使用jQuery Mobile CDN。 安装Dreamweaver时，会将jQuery Mobile文件的副本复制到用户计算机中。选择jQuery Mobil（本地）起始页时所打开的HTML页会链接到本地CSS、JavaScript 和图像文件。12.2.1 使用jQuery Mobile起始页创建 jQuery Mobile 起始页包含H12.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”，并设置其name

13、属性为“viewport” 。12.3.2 页面控制 一般情况下，移动设备的浏览器显示页面的宽度 一个jQuery Mobile文档可以包含多页面结构，即在一个文档中可以包含多个标签属性data-role为page的容器，从而形成多容器页面结构。每个容器拥有唯一的ID值，且各自独立。当页面加载时，这些容器同时被加载，并通过锚记链接的形式访问容器，即“#”号加容器ID值的方式设置链接。当用户单击该链接时，jQuery Mobile将在页面文档中寻找对应ID的容器，并以动画效果切换至该容器，实现容器间内容的访问。12.3.3 插入多容器页面 一个jQuery Mobile文档可以包含多页 通过jQ

14、uery Mobile起始页创建的网页文档即是一个多容器页面，页面效果如图所示。12.3.3 插入多容器页面 通过jQuery Mobile起始页创建的网 在多页面切换过程中，可以使用jQuery Mobile框架内置的多种基于CSS的页面转场效果进行页面的切换，默认情况下，jQuery Mobile应用的是从右到左划入的转场效果。通过在链接中添加“data-transition”属性可以自定义页面的转场特效。12.3.4 设置页面转场 在多页面切换过程中，可以使用jQuery Mdata-transition属性参数及说明12.3.4 设置页面转场data-transition属性参数及说明

15、12.3.4 设1新建jQuery Mobile起始页。选择【文件】/【新建】命令，在【新建文档】对话框中选择【示例中的页】，【示例文件夹】选择【Mobile起始页】，在【示例页】中选择【jQuery Mobile（本地）】，单击【创建】按钮。12.3.5 课堂案例制作简单多容器页面1新建jQuery Mobile起始页。选择【文件】/【新2保存文档。单击【文件】/【保存】命令，将文件另存为“index.html”，并保存在站点根文件夹下，在弹出的【复制相关文件】对话框中，单击【复制】按钮，把相关的框架文件复制到本地站点。12.3.5 课堂案例制作简单多容器页面2保存文档。单击【文件】/【保存

16、】命令，将文件另存为“in3设置页面控制。单击文档工具栏上的【拆分】按钮，进入拆分界面，在左侧的代码窗口中找到“”标签，并在“”标签中添加“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值分别为“p6设置后退按钮。为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=返回”属性，为页面增加一个名为“返回”的后退按钮，如图所示。12.3.5 课堂案例制作简单多

18、容器页面6设置后退按钮。为id值为“doc”和“video”的pa7设置容器内容及超级链接。（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设计页面转场。选中“page”容器中“文字材料”文本，在代码窗口为链接添加“d

20、ata-transition=slideup”属性，代码如下所示：文字材料使用同样的方法设置其它链接文本。12.3.5 课堂案例制作简单多容器页面8设计页面转场。选中“page”容器中“文字材料”文本，在 对话框是交互设计中的基本构成组件，在jQuery Mobile中，通过给指定页面的链接增加“data-rel”属性，并设置该属性值为“dialog”，当单击该链接时，打开的页面即以对话框的形式显示。 应用了对话框属性的新页面会以圆角方式显示，页面周围增加边缘及深色的背景，使得对话框浮在页面之上。12.4 创建对话框 对话框是交互设计中的基本构成组件，在jQue 选择 【插入】 / 【jQue

21、ry Mobile】 / 【页面】 命令, 新建一个 jQuery Mobile 页面, 在设计 窗口选中页面文本 “内容”, 将其替换成 “打开对话框”, 选中文本 “打开对话框”, 在属性 检查器中设置 【链接】 属性为 “book. html”。 12.4.1 新建对话框 选择 【插入】 / 【jQuery Mobi单击文档工具栏的 【拆分】 按钮, 在 【代码】 窗口为页面链接 标签添加属性 data-rel 为 “dialog”, 代码如下。 打开对话框 12.4.1 新建对话框单击文档工具栏的 【拆分】 按钮, 在 【代码】 窗口为页面1打开“index.html”文档，进入代码窗

22、口，在id为“doc”容器中“教材建设”文本的超级链接中添加“data-rel”属性，并设置值为“dialog”。代码如下：教材建设12.4.2 课堂案例插入对话框1打开“index.html”文档，进入代码窗口，在id为2新建HTML5文档。选择【文件】/【新建】命令，在【新建文档】对话框中选择【空白页】，【页面类型】选择【HTML】，【文档类型】选择【HTML5】，单击【确定】按钮。12.4.2 课堂案例插入对话框2新建HTML5文档。选择【文件】/【新建】命令，在【新建3保存文档。单击【文件】/【保存】命令，将文件另存为“book.html”，并保存在站点根文件夹下。4插入页面。选择【插

23、入】/【jQuery Mobile】/【页面】命令，在文档中插入一个id值为“dialog”的页面。12.4.2 课堂案例插入对话框3保存文档。单击【文件】/【保存】命令，将文件另存为“bo5设置页面文本。定义标题文本为“教材建设”，脚注为“商学院媒体与信息系”，输入内容信息并设置为列表，如图所示。12.4.2 课堂案例插入对话框5设置页面文本。定义标题文本为“教材建设”，脚注为“商学院6设置主题样式。单击文档工具栏的【代码】按钮，为header、content和footer容器添加“data-theme”属性，并设定主题样式分别为“b”、“d”和“b”，效果如图所示。12.4.2 课堂案例插

24、入对话框6设置主题样式。单击文档工具栏的【代码】按钮，为heade jQuery Mobile 提供了一套标准的工具栏组件, 移动应用只需对标签添加相应的属性值就 可以直接使用。 通常情况下, 工具栏元素都放置在页眉 (标题) 和页脚 (脚注) 中, 以实现 “已访问” 的导航。12.5 创建工具栏 jQuery Mobile 提供了一套标准的 jQuery Mobile提供了一套标准的工具栏组件，移动应用只需对标签添加相应的属性值就可以直接使用。通常情况下，工具栏元素都放置在页眉（标题）和页脚（脚注）中，以实现“已访问”的导航。12.5.1 定义标题栏 jQuery Mobile提供了一套标

25、准的1定义标题栏 标题栏位于页面顶部，即页眉的位置，通常包含页面标题或一到两个按钮（通常是首页、选项或搜索按钮）。标题文字以“”标题方式显示，默认的主题样式为a(黑色)。12.5.1 定义标题栏1定义标题栏12.5.1 定义标题栏 在标准的标题栏中，标题文字两侧各有一个可放置按钮的位置，由于标题栏空间的限制，工具栏中的按钮均是内联按钮，按钮的宽度只允许放置icon图标和文字。在jQuery Mobile中，为按钮添加图标可以通过添加data-icon属性实现，jQuery Mobile自带图标集合中的图标名称及图标样式说明如表12-2所示。12.5.1 定义标题栏 在标准的标题栏中，标题文字两

26、侧各有一个可放置按例如，为页面添加“上一页”和“下一页”按钮，以实现页面间的切换，代码如下所示：上一页文字材料下一页页面效果如图所示。12.5.1 定义标题栏例如，为页面添加“上一页”和“下一页”按钮，以实现页面间的切12.5.2 定义脚注栏 与页眉相比，页脚更具伸缩性，它们更实用且变化较多，能够满足用户定义多个按钮的需求。脚注栏除了使用的data-role（footer）的属性与标题栏(header)不同外，基本的结构与标题栏都是相同的。但是，与页眉的样式不同，页脚会减去一些内边距和空白，并且按钮不会居中。如果要修正该问题，需要在页脚添加一个名为 ui-btn的类。12.5.2 定义脚注栏

27、与页眉相比，页脚更具例如，为上图所示的页面添加多个功能按钮，代码如下： 添加项目 删除项目 上移项目 下移项目12.5.2 定义脚注栏例如，为上图所示的页面添加多个功能按钮，代码如下：12.5.页面效果如图所示。12.5.2 定义脚注栏页面效果如图所示。12.5.2 定义脚注栏12.5.3 定位页眉和页脚放置页眉和页脚的方式有三种： Inline ： 默认。页眉和页脚与页面内容位于行内。 Fixed ： 页面和页脚固定在页面的顶部和底部。如果页面滚动条可用，则敲击屏幕将隐藏或显示页眉或页脚，效果会根据用户在页面上的位置而变化。 Fullscreen ：与 fixed类似，页面和页脚固定在页面的

28、顶部和底部。但是当工具栏滚出屏幕之外时，不会自动重新显示，除非点击屏幕。在这种模式下工具栏会遮住页面内容，工具栏显示为半透明状态。12.5.3 定位页眉和页脚放置页眉和页脚的方式有三种： 在jQuery Mobile中，通过为页眉和页脚添加data-position属性来实现定位。例如，将页眉和页脚的data-position属性值设置为“fixed”，代码如下： 标题 内容 脚注 12.5.3 定位页眉和页脚 在jQuery Mobile中，通过为页眉和 jQuery Mobile导航栏是由一组水平排列的链接组成，通常包含在头部或尾部内，每行最多能够放置5个按钮，超过5个按钮时，导航栏自动表

29、现为多行。12.5.4 设计导航栏 jQuery Mobile导航栏是由一组水平 导航栏是由添加了“data-role=navbar”属性的容器中的无序列表组成的，通过无序列表来平均地划分按钮的宽度，1个按钮占整个窗口宽度，2个按钮则各占 1/2的宽度，3个按钮则每个占 1/3的宽度，依此类推。如果想设置某个按钮为活动链接，则可以通过给链接添加“class=ui-btn-active”属性来实现。12.5.4 设计导航栏 导航栏是由添加了“data-role=na例如，为头部添加导航栏，并设置第一个链接为活动链接，代码如下： 标题 链接一 链接二 12.5.4 设计导航栏例如，为头部添加导航栏

30、，并设置第一个链接为活动链接，代码如下网页效果如图所示。12.5.4 设计导航栏网页效果如图所示。12.5.4 设计导航栏 在导航栏中，每个导航按钮都是通过“”标签定义的，如果希望给导航栏中的导航按钮添加图标，可以通过在链接标签中添加“data-icon”属性来实现，其属性值为jQuery Mobile自带图标集合中的图标名称。图标名称及图标样式说明如表12-2所示。12.5.4 设计导航栏 在导航栏中，每个导航按钮都是通过“”表12-2 jQuery Mobile自带图标集12.5.4 设计导航栏表12-2 jQuery Mobile自带图标集12.5.4 在导航栏中，默认情况下，图标放置在

31、按钮文字上面，如果需要调整图标的位置，需要在导航栏容器中添加“data-iconpos”属性，可以设置其值为“top”、“right”、“bottom”和“left”，分别表示图标在导航按钮的上面、右侧、底部和左侧，默认值为“top”。12.5.5 设置导航按钮位置 在导航栏中，默认情况下，图标放置在按钮文字上面具体操作步骤： 打开“index.html”文档，进入代码窗口，执行以下步骤：1添加头部导航（1）设置导航文本。将鼠标光标置于id为“page”的容器中，为其头部设置导航栏文本 。代码如下：12.5.6 课堂案例定义导航栏具体操作步骤：12.5.6 课堂案例定义导航栏 媒体资料室 首页

32、 系部新闻 专业介绍 课程设置 12.5.6 课堂案例定义导航栏12.5.6（2）添加活动链接。返回设计窗口，选中“首页”链接文本，在【属性】检查器中设置【类】为“class=ui-btn-active”，激活第一个导航按钮，如图所示。12.5.6 课堂案例定义导航栏（2）添加活动链接。返回设计窗口，选中“首页”链接文本，在【12.5.6 课堂案例定义导航栏2添加底部导航 将鼠标光标置于为id为“page”的容器中，为底部导航栏添加导航图标及文本，并设置图标位置，代码如下：12.5.6 课堂案例定义导航栏2添加底部导航 返回 前进 刷新 搜索 设置 12.5.6 课堂案例定义导航栏12.5.6

33、网页效果如图所示。12.5.6 课堂案例定义导航栏网页效果如图所示。12.5.6 课堂案例定义导航栏 jQuery Mobile提供多种组件，如列表、布局、表单等，用于为移动页面添加不同的页面元素，通过Dreamweaver CS6插入菜单或插入面板组均可以插入这些组件。12.6 使用组件 jQuery Mobile提供多种组件，如列12.6.1插入列表视图 “”或“”标签中添加“data-role=listview”属性，并为每个项目()添加超级链接实现。 将鼠标光标定位到jQuery Mobile页面的目标位置，选择【插入】/【jQuery Mobile】/【列表视图】命令，弹出【列表视图

34、】对话框，设置属性如图所示。12.6.1插入列表视图 “”或“单击【确定】按钮，完成列表的创建，如图所示12.6.1插入列表视图单击【确定】按钮，完成列表的创建，如图所示12.6.1插入列 jQuery Mobile为视图页面提供了强大的版式支持，通过使用布局表格使页面的格式化变得简单。jQuery Mobile框架提供了一种简单的方法构建基于CSS的分栏布局，叫做ui-grid。 jQuery Mobile提供了两种预设的配置布局：两列布局（class含有ui-grid-a）三列布局（class含有ui-grid-b）。 网格宽度为100%，不可见（没有背景或边框），也没有padding和m

35、argin，因此它们不会影响内容元素的样式。12.6.2 插入布局网格 jQuery Mobile为视图页面提供了强12.6.2 插入布局网格 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【布局网格】命令，弹出【jQuery Mobile布局网格】对话框，如图所示。 12.6.2 插入布局网格 将鼠标光标置于目标分别设置行和列的值，单击【确定】按钮，布局网格如图所示。12.6.2 插入布局网格分别设置行和列的值，单击【确定】按钮，布局网格如图所示。12 在页面中插入可折叠区块后，通过单击标题能够展开或收缩其下面的内容，以节省屏幕空间。要创建一个可折叠的区块，首先创建一

36、个容器，并为容器添加“data-role=collapsible”属性。 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【可折叠区块】命令，在页面中插入一个可折叠区块，如图所示。在页面中通过编辑标题和内容完成可折叠区块的设置。12.6.3 插入可折叠区块 在页面中插入可折叠区块后，通过单击标题能够展12.6.3 插入可折叠区块12.6.3 插入可折叠区块 同普通网页中的表单一样，移动网页也可以添加文本、密码和文本区域。文本输入框和文本输入域使用标准的标签实现，jQuery Mobile会让它们在移动设备中变得更加容易于触摸使用。12.6.4 插入文本元素 同普通网页中的

37、表单一样，移动网页也可以添加文 文本输入框是在标签中添加“type=text”属性，密码输入框是在标签中添加“type=password”属性，文本区域即多行文本域，通过使用标签实现。用户要把标签的for属性设为的id值，使它们能够在语义上相关联，并且放置到Div容器中，再设定“data-role=fieldcontain”。12.6.4 插入文本元素 文本输入框是在标签中添加“typ 将鼠标光标置3于目标位置，选择【插入】/【jQuery Mobile】，在展开的菜单中选择【文本输入】、【密码输入】或【文本区域】）命令，即可在页面插入一个文本输入框、密码输入框或文本区域。12.6.4 插入文

38、本元素 将鼠标光标置3于目标位置，选择【插入】/【j网页如图所示。12.6.4 插入文本元素网页如图所示。12.6.4 插入文本元素 jQuery Mobile重新定制了标签样式，以适应移动设备的浏览显示需求。整个菜单由按钮和菜单两部分组成，当用户单击按钮时，手机自带的菜单选择器将被打开，选择某个菜单项后，菜单自动关闭，菜单按钮的值将自动更新为菜单中用户所选择的值。选择菜单组件使用标准的标签和位于其内部的一组标签实现。12.6.5 插入选择菜单 jQuery Mobile重新定制了sel 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【选择菜单】命令，即可在页面插入一个

39、选择菜单，选中该菜单，在【属性】检查器中单击按钮，在打开的【列表值】对话框中设置【项目标签】和【值】，如图所示。12.6.5 插入选择菜单 将鼠标光标置于目标位置，选择【插入】/【jQ网页效果如图所示。12.6.5 插入选择菜单网页效果如图所示。12.6.5 插入选择菜单 复选框和单选按钮用来实现页面中选项的选择操作。复选框可以进行多项选择，而单选按钮只能选择一项。 复选框由添加了“type=checkbox”属性的标签和相应的标签实现的。因为复选框按钮使用标签标识显示文本内容，因此，复选按钮组的标题可以通过添加一对标签来标识。 单选按钮则由添加了“type=radio”属性的标签和相应的标签

40、实现。12.6.6 插入复选框和单选按钮 复选框和单选按钮用来实现页面中选项的选择操作 复选框和单选按钮的创建方法基本相同。将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】，在弹出的菜单中选择【复选框】或【单选按钮】命令，弹出【jQuery Mobile复选框】或【jQuery Mobile单选按钮】对话框，在该对话框中分别设置名称、数量及布局方式，单击【确定】按钮。【jQuery Mobile复选框】对话框如图所示 12.6.6 插入复选框和单选按钮 复选框和单选按钮的创建方法基本相同。将鼠标光12.6.6 插入复选框和单选按钮插入复选框及单选按钮网页效果如图所示。 12

41、.6.6 插入复选框和单选按钮插入复选框及单选按钮网页效12.6.7 插入滑块 滑块由添加了“type=range”属性的标签实现。在jQuery Mobile中，滑块组件由两部分组成，一部分是可以调整大小的数字输入框，另一部分是可拖动修改输入框数字的滑动条。滑块元素可以通过min和max属性来设置滑动条的取值范围，也可以指定滑动条的value值。12.6.7 插入滑块 滑块由添加了“type 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【滑块】命令，即在网页中插入滑块组件，如图所示。12.6.7 插入滑块 将鼠标光标置于目标位置，选择【插入】/【jQ12.6.8 插

42、入翻转切换开关 翻转切换开关是移动设备中常见界面元素，提供系统配置中默认值的设置。用户可以通过滑动或单击开关进行操作。 翻转切换开关由添加了“data-role=slider”属性的标签和相应的标签、标签实现。创建一个只有两个选项的选择菜单，第一个选项为“开”状态，返回值为true或1等；第二个选择为“关”状态，返回值为false或0等。12.6.8 插入翻转切换开关 翻转切换开关12.6.8 插入翻转切换开关 将鼠标光标置于目标位置，选择【插入】/【jQuery Mobile】/【翻转切换开关】命令，即在网页中插入翻转切换开关组件，如图所示。12.6.8 插入翻转切换开关 将鼠标光标置于目标

43、位置，12.6.9 插入日期拾取器 日期拾取器插件需要用户手动包含到当前文件，因为它没有包含在jQuery Mobile默认库中。日期拾取器由添加了“type=date”属性的标签实现，如图所示。12.6.9 插入日期拾取器 日期拾取器插件需要用12.6.10 课堂案例创建用户注册页面具体操作步骤：1选择【文件】/【新建】命令，新建一个空白HTML文档，将文档另存为“index.html”。2插入表单。选择【插入】/【表单】/【表单】命令，在页面中插入一个表单。12.6.10 课堂案例创建用户注册页面具体操作步骤：12.6.10 课堂案例创建用户注册页面3插入jQuery Mobile页面。将

44、鼠标光标置于表单内，选择【插入】/【jQuery Mobile】/【页面】命令，弹出【jQuery Mobile文件】对话框，选择默认设置，单击【确定】按钮，即在表单中插入jQuery Mobile页面，修改页面标题为“新用户注册”并删除脚注，如图所示。12.6.10 课堂案例创建用户注册页面3插入jQuer12.6.10 课堂案例创建用户注册页面4插入文本输入。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【文本输入】命令，在页面中插入一个文本输入框。修改“文本输入”文本为“昵称：”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“nc”，【类型】为“单

45、行”，如图所示。12.6.10 课堂案例创建用户注册页面4插入文本输入。12.6.10 课堂案例创建用户注册页面5插入密码输入域。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【密码输入】命令，在页面中插入一个密码输入文本框。修改“密码输入”文本为“密码：”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“pwd”，【类型】为“密码”，如图所示。12.6.10 课堂案例创建用户注册页面5插入密码输入域12.6.10 课堂案例创建用户注册页面6插入时间拾取器。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【文本输入】命令，在页面

46、中插入一个文本输入框。修改“文本输入”文本为“出生时间：”，选中单行文本域，在【属性】检查器中设置【文本域】名称为“date”，【类型】为“单行”。切换到代码窗口，修改该“”标签属性“type=date”，如图所示。12.6.10 课堂案例创建用户注册页面6插入时间拾取器12.6.10 课堂案例创建用户注册页面7 插入单选按钮。将鼠标光标置于“内容”文本前，选择【插入】/【jQuery Mobile】/【单选按钮】命令，弹出【jQuery Mobile对话框】，设置属性如图所示，单击【确定】按钮。 12.6.10 课堂案例创建用户注册页面7 插入单选按钮12.6.10 课堂案例创建用户注册页面 在设计窗口中，修改单选按钮组的标题文本“选项”为“性别：”，选中第一个单选按钮，在【属性】检查器中设置【选定值】为“男”，修改该按钮对应的标签文本“选项”为“男”；再选中第二个单选按钮，在【属性】检查器中设置