第10讲jQueryMobile(布局和表单).ppt
《第10讲jQueryMobile(布局和表单).ppt》由会员分享,可在线阅读,更多相关《第10讲jQueryMobile(布局和表单).ppt(43页珍藏版)》请在三一文库上搜索。
1、第10讲 jQuery Mobile(布局和表单),请到 240FTP / HTML5移动Web开发 下载第10讲文件夹,主要内容,复习列表举例 listview 折叠块功能 网格布局 form表单 习题与作业,复习与举例,上一讲中:jQuery Mobile 列表视图 jQuery Mobile 中的列表视图是标准的 HTML 列表:有序列表 () 和无序列表 ()。 如需创建列表,请向 或 元素添加 data-role=“listview“。 如需使这些项目可点击,请在每个列表项()中规定链接。,提示:默认地,列表中的列表项会自动转换为按钮(无需 data-role=“button“)。,
2、列表分隔符,列表分隔符(List Dividers)用于把项目组织和组合为分类/节。 如需规定列表分隔符,请向 元素添加 data-role=“list-divider“ 属性: 例 10_1.html,例 10_1.html,只读列表 例 10_1.html,列表视图,jQuery Mobile 列表缩略图 对于大于 16x16px 的图像,请在链接中添加 元素。 jQuery Mobile 将自动把图像调整至 80x80px: jQuery Mobile 列表图标 如需向您的列表添加 16x16px 的图标,请向 元素添加 class=“ui-li-icon“ 属性: 拆分按钮,例10_2
3、.html,例10_2.html,列表视图,3、如需创建带有垂直分隔栏的拆分列表,请在 元素内放置两个链接。 jQuery Mobile 会自动为第二个链接添加蓝色箭头图标的样式,链接中的文本(如有)将在用户划过该图标时显示。,例10_2.html,可折叠的内容块,可折叠(Collapsibles)允许您隐藏或显示内容 - 对于存储部分信息很有用。 如需创建可折叠的内容块,请向某个容器分配 data-role=“collapsible“ 属性。在容器(div)中,添加一个标题元素(h1-h6),其后是您需要扩展的任意 HTML 标记: 实例 点击我 - 我可以折叠! 我是可折叠的内容。 ,例1
4、0_3.html 可折叠功能和列表的结合使用,主要内容,复习列表举例 listview 折叠块功能 网格布局 form表单 习题与作业,3、jQuery Mobile 布局网格,jQuery Mobile 提供了一套基于 CSS 的列布局方案。 不过,一般不推荐在移动设备上使用列布局,这是由于移动设备的屏幕宽度所限。 但是有时您需要定位更小的元素,比如按钮或导航栏,就像在表格中那样并排。这时,列布局就恰如其分。 网格中的列是等宽的(总宽是 100%),无边框、背景、外边距或内边距。,可使用的布局网格有四种:,提示:在列容器中,根据不同的列数,子元素可设置类 ui-block-a|b|c|d|e
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 10 jQueryMobile 布局 表单
链接地址:https://www.31doc.com/p-2250750.html