第10讲jQueryMobile〔布局和表单〕.pptVIP

4、jQuery Mobile 表单 jQuery Mobile 会自动为 HTML 表单添加优异的便于触控的外观。 4、jQuery Mobile 表单结构 jQuery Mobile 使用 CSS 来设置 HTML 表单元素的样式，以使其更有吸引力更易用。 在 jQuery Mobile 中，您可以使用以下表单控件： 文本框 搜索框 单选框 复选框 选择菜单 滑动条 翻转切换开关 HTML5移动Web开发 第*页 HTML5移动Web开发 广州大学华软软件学院 第10讲 jQuery Mobile（布局和表单） 请到 240FTP ../ HTML5移动Web开发 下载第10讲文件夹 主要内容 复习列表举例 listview 折叠块功能 网格布局 form表单 习题与作业 复习与举例 上一讲中：jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表：有序列表 (ol) 和无序列表 (ul)。 如需创建列表，请向 ol 或 ul 元素添加 data-role=listview。 如需使这些项目可点击，请在每个列表项（li）中规定链接。 Data 属性 值 描述 data-autodividers true | false 规定是否自动分隔列表项。 data-count-theme letter (a-z) 规定计数泡沫的主题颜色。默认是 c。 data-divider-theme letter (a-z) 规定列表分隔符的主题颜色。默认是 b。 data-filter true | false 规定是否在列表中添加搜索框。 data-filter-placeholder sometext 规定搜索框中的文本。默认是 Filter items...。 data-filter-theme letter (a-z) 规定搜索过滤程序的主题颜色。默认是 c。 data-icon Icons Reference 规定列表的图标。 data-inset true | false 规定是否为列表添加圆角和外边距样式。 data-split-icon Icons Reference 规定划分按钮的图标。默认是 arrow-r。 data-split-theme letter (a-z) 规定划分按钮的主题颜色。默认是 b。 data-theme letter (a-z) 规定列表的主题颜色。 data-inset true | false 规定是否为列表添加圆角和外边距样式。 例 10_1.html 提示：默认地，列表中的列表项会自动转换为按钮（无需 data-role=button）。 列表分隔符 列表分隔符（List Dividers）用于把项目组织和组合为分类/节。 如需规定列表分隔符，请向 li 元素添加 data-role=list-divider 属性： 例 10_1.html 例 10_1.html 只读列表 例 10_1.html 列表视图 jQuery Mobile 列表缩略图 对于大于 16x16px 的图像，请在链接中添加 img 元素。 jQuery Mobile 将自动把图像调整至 80x80px： jQuery Mobile 列表图标 如需向您的列表添加 16x16px 的图标，请向 img 元素添加 class=ui-li-icon 属性： 拆分按钮 例10_2.html 例10_2.html 列表视图 3、如需创建带有垂直分隔栏的拆分列表，请在 li 元素内放置两个链接。 jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。 例10_2.html 可折叠的内容块 可折叠（Collapsibles）允许您隐藏或显示内容 - 对于存储部分信息很有用。 如需创建可折叠的内容块，请向某个容器分配 data-role=collapsible 属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意 HTML 标记： 实例 div data-role=collapsible h1点击我 - 我可以折叠！/h1 p我是可折叠的内容。/p /div 例10_3.html 可折叠功能和列表的结合使用 主要内容 复习列表举例 listview 折叠块功能 网格布局 form表单 习题与作业 3、jQuery Mobile 布局网格 jQuery Mobile 提供了一套基于 CSS 的列布局方案。 不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。 但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。