第10讲jquerymobile布局和表单.ppt

4 、 jQuery Mobile 表单 ? jQuery Mobile 会自动为 HTML 表单添加优异的便于 触控的外观。 HTML5 移动 Web 开发 第 31 页 4 、 jQuery Mobile 表单结构 ? jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样 式，以使其更有吸引力更易用。 ? 在 jQuery Mobile 中，您可以使用以下表单控件： ? 文本框 ? 搜索框 ? 单选框 ? 复选框 ? 选择菜单 ? 滑动条 ? 翻转切换开关 HTML5 移动 Web 开发 第 32 页 HTML5 移动 Web 开发 第 10 讲 jQuery Mobile （布局和表单） 请到 240FTP ../ HTML5 移动 Web 开发 下载 第 10 讲文件夹 主要内容 1. 复习列表举例 listview 2. 折叠块功能 3. 网格布局 4.form 表单 5. 习题与作业 HTML5 移动 Web 开发 第 2 页 复习与举例 ? 上一讲中： jQuery Mobile 列表视图 ? jQuery Mobile 中的列表视图是标准的 HTML 列表： 有序列表 (ol) 和无序列表 (ul) 。 ? 如需创建列表，请向 ol 或 ul 元素添加 data- role=listview 。 ? 如需使这些项目可点击，请在每个列表项（ li ）中 规定链接。 HTML5 移动 Web 开发 第 3 页 Data 属性 值 描述 data-autodividers true | false 规定是否自动分隔列表项。 data-count-theme data-divider- theme data-filter data-filter- placeholder letter (a-z) 规定计数泡沫的主题颜色。默认是 c 。 letter (a-z) 规定列表分隔符的主题颜色。默认是 b 。 true | false 规定是否在列表中添加搜索框。 sometext 规定搜索框中的文本。默认是 Filter items... 。 data-filter-theme letter (a-z) 规定搜索过滤程序的主题颜色。默认是 c 。 data-icon data-inset Icons Reference 规定列表的图标。 true | false 规定是否为列表添加圆角和外边距样式。 data-split-icon data-split-theme data-theme Icons Reference 规定划分按钮的图标。默认是 arrow-r 。 letter (a-z) 规定划分按钮的主题颜色。默认是 b 。 letter (a-z) 规定列表的主题颜色。 HTML5 移动 Web 开发 第 4 页 data-inset true | 规定是否为列表添加圆角和外边距样式。 false 例 10_1.html HTML5 移动 Web 开发 第 5 页 提示：默认地，列表中的列表项会自动转换为按钮（无 需 data-role=button ）。 HTML5 移动 Web 开发 第 6 页 列表分隔符 ? 列表分隔符（ List Dividers ）用于把项目组织和组合 为分类 / 节。 ? 如需规定列表分隔符，请向 li 元素添加 data- role=list-divider 属性： ? 例 10_1.html HTML5 移动 Web 开发 第 7 页 例 10_1.html HTML5 移动 Web 开发 第 8 页 HTML5 移动 Web 开发 第 9 页 只读列表 例 10_1.html HTML5 移动 Web 开发 第 10 页 列表视图 1. jQuery Mobile 列表缩略图 – 对于大于 16x16px 的图像，请在链接中添加 img 元素。 – jQuery Mobile 将自动把图像调整至 80x80px ： 2. jQuery Mobile 列表图标 – 如需向您的列表添加 16x16px 的图标，请向 img 元