jQueryMobile(布局和表单)课件

1、HTML5移动移动Web开发开发第第10讲讲 jQuery Mobile（布局和表单）（布局和表单）请到请到 240FTP ./ HTML5移动移动Web开发开发下载下载第第10讲文件夹讲文件夹jQueryMobile(布局和表单布局和表单)HTML5移动移动Web开发开发第第2页页主要内容主要内容复习列表举例复习列表举例 listview折叠块功能折叠块功能网格布局网格布局form表单表单习题与作业习题与作业HTML5移动移动Web开发开发第第3页页复习与举例复习与举例 上一讲中：上一讲中：jQuery Mobile 列表视图列表视图 jQuery Mobile 中的列表视图是标准的中的列表

2、视图是标准的 HTML 列表：列表：有序列表有序列表 () 和无序列表和无序列表 ()。 如需创建列表，请向如需创建列表，请向 或或 元素添加元素添加 data-role=listview。 如需使这些项目可点击，请在每个列表项（如需使这些项目可点击，请在每个列表项（）中）中规定链接。规定链接。HTML5移动移动Web开发开发第第4页页Data 属性值描述data-autodividerstrue | false规定是否自动分隔列表项。data-count-themeletter (a-z)规定计数泡沫的主题颜色。默认是 c。data-divider-themeletter (a-z)规定列表

3、分隔符的主题颜色。默认是 b。data-filtertrue | false规定是否在列表中添加搜索框。data-filter-placeholdersometext规定搜索框中的文本。默认是 Filter items.。data-filter-themeletter (a-z)规定搜索过滤程序的主题颜色。默认是 c。data-iconIcons Reference规定列表的图标。data-insettrue | false规定是否为列表添加圆角和外边距样式。data-split-iconIcons Reference规定划分按钮的图标。默认是 arrow-r。data-split-theme

4、letter (a-z)规定划分按钮的主题颜色。默认是 b。data-themeletter (a-z)规定列表的主题颜色。HTML5移动移动Web开发开发第第5页页data-insettrue | false规定是否为列表添加圆角和外边距样式。例 10_1.htmlHTML5移动移动Web开发开发第第6页页提示：默认地，列表中的列表项会自动转换为按钮（无提示：默认地，列表中的列表项会自动转换为按钮（无需需 data-role=button）。）。HTML5移动移动Web开发开发第第7页页列表分隔符列表分隔符 列表分隔符（列表分隔符（List Dividers）用于把项目组织和组合）用于把项目

5、组织和组合为分类为分类/节。节。 如需规定列表分隔符，请向如需规定列表分隔符，请向 元素添加元素添加 data-role=list-divider 属性：属性： 例例 10_1.htmlHTML5移动移动Web开发开发第第8页页例例 10_1.htmlHTML5移动移动Web开发开发第第9页页HTML5移动移动Web开发开发第第10页页只读列表只读列表 例例 10_1.htmlHTML5移动移动Web开发开发第第11页页列表视图列表视图jQuery Mobile 列表缩略图列表缩略图对于大于对于大于 16x16px 的图像，请在链接中添加的图像，请在链接中添加 元素。元素。jQuery Mob

6、ile 将自动把图像调整至将自动把图像调整至 80 x80px：jQuery Mobile 列表图标列表图标如需向您的列表添加如需向您的列表添加 16x16px 的图标，请向的图标，请向 元素添加元素添加 class=ui-li-icon 属性：属性：拆分按钮拆分按钮HTML5移动移动Web开发开发第第12页页例例10_2.htmlHTML5移动移动Web开发开发第第13页页例例10_2.htmlHTML5移动移动Web开发开发第第14页页HTML5移动移动Web开发开发第第15页页列表视图列表视图 3、如需创建带有垂直分隔栏的拆分列表，请在、如需创建带有垂直分隔栏的拆分列表，请在 元素内放置

7、两个链接。元素内放置两个链接。jQuery Mobile 会自动为第二个链接添加蓝色箭会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。划过该图标时显示。HTML5移动移动Web开发开发第第16页页例例10_2.htmlHTML5移动移动Web开发开发第第17页页HTML5移动移动Web开发开发第第18页页可折叠的内容块可折叠的内容块 可折叠（可折叠（Collapsibles）允许您隐藏或显示内容）允许您隐藏或显示内容 - 对于对于存储部分信息很有用。存储部分信息很有用。 如需创建可折叠的内容块，请向某个容器分配如

8、需创建可折叠的内容块，请向某个容器分配 data-role=collapsible 属性。在容器（属性。在容器（div）中，添加一个）中，添加一个标题元素（标题元素（h1-h6），其后是您需要扩展的任意），其后是您需要扩展的任意 HTML 标记：标记： 实例实例 点击我点击我 - 我可以折叠！我可以折叠！ 我是可折叠的内容。我是可折叠的内容。HTML5移动移动Web开发开发第第19页页例例10_3.html 可折叠功能和列表的结合使用可折叠功能和列表的结合使用HTML5移动移动Web开发开发第第20页页HTML5移动移动Web开发开发第第21页页HTML5移动移动Web开发开发第第22页页主要

9、内容主要内容复习列表举例复习列表举例 listview折叠块功能折叠块功能网格布局网格布局form表单表单习题与作业习题与作业HTML5移动移动Web开发开发第第23页页3、jQuery Mobile 布局网格布局网格 jQuery Mobile 提供了一套基于提供了一套基于 CSS 的列布局方案。的列布局方案。 不过，一般不推荐在移动设备上使用列布局，这是由不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。于移动设备的屏幕宽度所限。 但是有时您需要定位更小的元素，比如按钮或导航栏，但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其

10、分。就像在表格中那样并排。这时，列布局就恰如其分。 网格中的列是等宽的（总宽是网格中的列是等宽的（总宽是 100%），无边框、背），无边框、背景、外边距或内边距。景、外边距或内边距。HTML5移动移动Web开发开发第第24页页 可使用的布局网格有四种：可使用的布局网格有四种：网格类网格类列列 列宽度列宽度对应对应ui-grid-a250% / 50%ui-block-a|bui-grid-b 333% / 33% / 33%ui-block-a|b|cui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|dui-grid-d 520% / 20% / 20

11、% / 20% / 20%ui-block-a|b|c|d|e 提示：在列容器中，根据不同的列数，子元素可设置类提示：在列容器中，根据不同的列数，子元素可设置类 ui-block-a|b|c|d|e。这些列将依次并排浮动。这些列将依次并排浮动。 实例实例 1: 对于对于 ui-grid-a 类（两列布局），规定两个子元类（两列布局），规定两个子元素素 ui-block-a 和和 ui-block-b。 实例实例 2: 对于对于 ui-grid-b 类（三列布局），请添加三个子类（三列布局），请添加三个子元素元素 ui-block-a、ui-block-b 和和 ui-block-c。HTML5

12、移动移动Web开发开发第第25页页例例10_4.htmlHTML5移动移动Web开发开发第第26页页HTML5移动移动Web开发开发第第27页页定制网格定制网格-通过使用通过使用 CSS 来定制列块来定制列块 .ui-block-a, .ui-block-b, .ui-block-c background-color: lightgray;border: 1px solid black;height: 100px;font-weight: bold;text-align: center;padding: 30px; 也可以通过使用行内样式来定制块：也可以通过使用行内样式来定制块：Text.HT

13、ML5移动移动Web开发开发第第28页页例例10_5.htmlHTML5移动移动Web开发开发第第29页页例例10_5.htmlHTML5移动移动Web开发开发第第30页页主要内容主要内容复习列表举例复习列表举例 listview折叠块功能折叠块功能网格布局网格布局form表单表单习题与作业习题与作业HTML5移动移动Web开发开发第第31页页4、jQuery Mobile 表单表单 jQuery Mobile 会自动为会自动为 HTML 表单添加优异的便于表单添加优异的便于触控的外观。触控的外观。HTML5移动移动Web开发开发第第32页页4、jQuery Mobile 表单结构表单结构 j

14、Query Mobile 使用使用 CSS 来设置来设置 HTML 表单元素的样表单元素的样式，以使其更有吸引力更易用。式，以使其更有吸引力更易用。 在在 jQuery Mobile 中，您可以使用以下表单控件：中，您可以使用以下表单控件：文本框文本框搜索框搜索框单选框单选框复选框复选框选择菜单选择菜单滑动条滑动条翻转切换开关翻转切换开关HTML5移动移动Web开发开发第第33页页jQuery Mobile 表单结构表单结构与与 jQuery Mobile 表单打交道时，应该了解以下信息：表单打交道时，应该了解以下信息： 元素必须设置元素必须设置 method 和和 action 属性属性每个

15、表单元素必须设置唯一的每个表单元素必须设置唯一的 id 属性。该属性。该 id 在站点的在站点的页面中必须是唯一的。这是因为页面中必须是唯一的。这是因为 jQuery Mobile 的单页面的单页面导航模型允许许多不同的导航模型允许许多不同的“页面页面”同时呈现。同时呈现。1.每个表单元素必须有一个标记（每个表单元素必须有一个标记（label）。请设置）。请设置 label 的的 for 属性来匹配元素的属性来匹配元素的 id。HTML5移动移动Web开发开发第第34页页4.1 隐藏隐藏label 如需隐藏如需隐藏 label，请使用类，请使用类 ui-hidden-accessible。 当

16、需要元素的当需要元素的 placeholder 属性充当属性充当 label 时，很常用。时，很常用。 实例实例 姓名：姓名： HTML5移动移动Web开发开发第第35页页4.2 域容器域容器 如果需要如果需要 label 和表单元素在宽屏幕上显示正常，请用和表单元素在宽屏幕上显示正常，请用带有带有 data-role=fieldcontain 属性的属性的 或或 元素来包装元素来包装 label 或表单元素：或表单元素： 实例实例 First name: Last name: HTML5移动移动Web开发开发第第36页页4.2 域容器域容器 如果需要如果需要 label 和表单元素在宽屏幕上显示正常，请用和表单元素在宽屏幕上显示正常，请用带有带有 data-role=fieldcontain 属性的属性的 或或 元素来包装元素来包装 label 或表单元素：或表单元素： 提示：提示：fieldcontain 属性基于页面宽度来设置属性基于页面宽度来设置 label 和和表单控件的样式。当页面宽度大于表单控件的样式。当页面宽度大于 480px 时，它会自时，它会自动将动将 label 与表单控件放置于同一行。当小于与表单控件放置于同一行。当小于 480px 时，时，label 会被放置于表单元素之上。会被放置于表单元素之上。 提示：如需避免提示：