第10讲jQueryMobile(布局和表单)ppt课件

1、第10讲 jQuery Mobile规划和表单请到 240FTP ./ HTML5挪动Web开发下载第10讲文件夹.主要内容复习列表举例 listview折叠块功能网格规划form表单习题与作业复习与举例上一讲中：jQuery Mobile 列表视图jQuery Mobile 中的列表视图是规范的 HTML 列表：有序列表 () 和无序列表 ()。如需创建列表，请向 或 元素添加 data-role=listview。如需使这些工程可点击，请在每个列表项中规定链接。Data 属性值描述data-autodividerstrue | false规定是否自动分隔列表项。data-count-the

2、meletter (a-z)规定计数泡沫的主题颜色。默认是 c。data-divider-themeletter (a-z)规定列表分隔符的主题颜色。默认是 b。data-filtertrue | false规定是否在列表中添加搜索框。data-filter-placeholdersometext规定搜索框中的文本。默认是 Filter items.。data-filter-themeletter (a-z)规定搜索过滤程序的主题颜色。默认是 c。data-iconIcons Reference规定列表的图标。data-insettrue | false规定是否为列表添加圆角和外边距样式。da

3、ta-split-iconIcons Reference规定划分按钮的图标。默认是 arrow-r。data-split-themeletter (a-z)规定划分按钮的主题颜色。默认是 b。data-themeletter (a-z)规定列表的主题颜色。data-insettrue | false规定是否为列表添加圆角和外边距样式。例 10_1.html提示：默许地，列表中的列表项会自动转换为按钮无需 data-role=button。列表分隔符列表分隔符List Dividers用于把工程组织和组合为分类/节。如需规定列表分隔符，请向 元素添加 data-role=list-divider

4、 属性：例 10_1.html例 10_1.html只读列表 例 10_1.html列表视图jQuery Mobile 列表缩略图对于大于 16x16px 的图像，请在链接中添加 元素。jQuery Mobile 将自动把图像调整至 80 x80px：jQuery Mobile 列表图标如需向您的列表添加 16x16px 的图标，请向 元素添加 class=ui-li-icon 属性：拆分按钮例10_2.html例10_2.html列表视图3、如需创建带有垂直分隔栏的拆分列表，请在 元素内放置两个链接。jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的款式，链接中的文本如有将在用

5、户划过该图标时显示。例10_2.html可折叠的内容块可折叠Collapsibles允许您隐藏或显示内容 - 对于存储部分信息很有用。如需创建可折叠的内容块，请向某个容器分配 data-role=collapsible 属性。在容器div中，添加一个标题元素h1-h6，其后是您需求扩展的恣意 HTML 标志：实例 点击我 - 我可以折叠！ 我是可折叠的内容。例10_3.html 可折叠功能和列表的结合运用主要内容复习列表举例 listview折叠块功能网格规划form表单习题与作业3、jQuery Mobile 规划网格jQuery Mobile 提供了一套基于 CSS 的列规划方案。不过，普

6、通不引荐在挪动设备上运用列规划，这是由于挪动设备的屏幕宽度所限。但是有时您需求定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列规划就恰如其分。网格中的列是等宽的总宽是 100%，无边框、背景、外边距或内边距。可运用的规划网格有四种：网格类列列宽度对应ui-grid-a250% / 50%ui-block-a|bui-grid-b333% / 33% / 33%ui-block-a|b|cui-grid-c425% / 25% / 25% / 25%ui-block-a|b|c|dui-grid-d520% / 20% / 20% / 20% / 20%ui-block-a|b|

7、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。例10_4.html定制网格-经过运用 CSS 来定制列块 .ui-block-a, .ui-block-b, .ui-block-c background-color: lightgray;border: 1px solid

8、black;height: 100px;font-weight: bold;text-align: center;padding: 30px; 也可以经过运用行内款式来定制块：Text.例10_5.html例10_5.html主要内容复习列表举例 listview折叠块功能网格规划form表单习题与作业4、jQuery Mobile 表单jQuery Mobile 会自动为 HTML 表单添加优良的便于触控的外观。4、jQuery Mobile 表单构造jQuery Mobile 运用 CSS 来设置 HTML 表单元素的款式，以使其更有吸引力更易用。在 jQuery Mobile 中，您可以

9、运用以下表单控件：文本框搜索框单项选择框复选框选择菜单滑动条翻转切换开关jQuery Mobile 表单构造与 jQuery Mobile 表单打交道时，应该了解以下信息： 元素必需设置 method 和 action 属性每个表单元素必需设置独一的 id 属性。该 id 在站点的页面中必需是独一的。这是由于 jQuery Mobile 的单页面导航模型允许许多不同的“页面同时呈现。每个表单元素必需有一个标志label。请设置 label 的 for 属性来匹配元素的 id。4.1 隐藏label如需隐藏 label，请运用类 ui-hidden-accessible。当需求元素的 placeholder 属性充任 label 时，很常用。实例 姓名： 4.2 域容器假设需求 label 和表单元素在宽屏幕上显示正常，请用带有 data-role=fieldcontain 属性的 或 元素来包装 label 或表单元素：实例 First name: Last name: 4.2 域容器假设需求 label 和表单元素在宽屏幕上显示正常，请用带有 data-role=fieldcontain 属性的 或 元素来包装 label 或表单元素：提示：fieldcontain 属性基于页面宽度来设置 label 和表单控件的款式。当页面宽度大