第10讲jQueryMobile(布局和表单)

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

)和无序列表(
)。•如需创建列表，请向
或
元素添加data-role=listview。•如需使这些项目可点击，请在每个列表项（
• ）中规定链接。HTML5移动Web开发第4页Data属性值描述data-autodividerstrue|false规定是否自动分隔列表项。data-count-themeletter(a-z)规定计数泡沫的主题颜色。默认是c。data-divider-themeletter(a-z)规定列表分隔符的主题颜色。默认是b。data-filtertrue|false规定是否在列表中添加搜索框。data-filter-placeholdersometext规定搜索框中的文本。默认是Filteritems...。data-filter-themeletter(a-z)规定搜索过滤程序的主题颜色。默认是c。data-iconIconsReference规定列表的图标。data-insettrue|false规定是否为列表添加圆角和外边距样式。data-split-iconIconsReference规定划分按钮的图标。默认是arrow-r。data-split-themeletter(a-z)规定划分按钮的主题颜色。默认是b。data-themeletter(a-z)规定列表的主题颜色。HTML5移动Web开发第5页data-insettrue|false规定是否为列表添加圆角和外边距样式。例10_1.htmlHTML5移动Web开发第6页提示：默认地，列表中的列表项会自动转换为按钮（无需data-role=button）。HTML5移动Web开发第7页列表分隔符•列表分隔符（ListDividers）用于把项目组织和组合为分类/节。•如需规定列表分隔符，请向
• 元素添加data-role=list-divider属性：•例10_1.htmlHTML5移动Web开发第8页例10_1.htmlHTML5移动Web开发第9页HTML5移动Web开发第10页只读列表例10_1.htmlHTML5移动Web开发第11页列表视图1.jQueryMobile列表缩略图–对于大于16x16px的图像，请在链接中添加元素。–jQueryMobile将自动把图像调整至80x80px：2.jQueryMobile列表图标–如需向您的列表添加16x16px的图标，请向元素添加class=ui-li-icon属性：–拆分按钮HTML5移动Web开发第12页例10_2.htmlHTML5移动Web开发第13页例10_2.htmlHTML5移动Web开发第14页HTML5移动Web开发第15页列表视图•3、如需创建带有垂直分隔栏的拆分列表，请在
• 元素内放置两个链接。–jQueryMobile会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。HTML5移动Web开发第16页例10_2.htmlHTML5移动Web开发第17页HTML5移动Web开发第18页可折叠的内容块•可折叠（Collapsibles）允许您隐藏或显示内容-对于存储部分信息很有用。•如需创建可折叠的内容块，请向某个容器分配data-role=collapsible属性。在容器（div）中，添加一个标题元素（h1-h6），其后是您需要扩展的任意HTML标记：•实例

  点击我-我可以折叠！

  我是可折叠的内容。