第10讲 jQuery Mobile(布局和表单)

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,HTML5移动Web开发,第,*,页,HTML5移动Web开发,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,广州大学华软软件学院,第,10,讲,jQuery Mobile,（布局和表单）,请到,240FTP ./HTML5,移动,Web,开发,下载,第,10,讲文件夹,主要内容,复习列表举例,listview,折叠块功能,网格布局,form,表单,习题与作业,复习与举例,上一讲中：,jQuery Mobile,列表视图,jQuery Mobile,中的列表视图是标准的,HTML,列表：有序列表,(),和无序列表,(),。,如需创建列表，请向,或,元素添加,data-role=listview,。,如需使这些项目可点击，请在每个列表项（,）中规定链接。,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,）用于把项目组织和组合为分类,/,节。,如需规定列表分隔符，请向,元素添加,data-role=list-divider,属性：,例,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 会自动为第二个链接添加蓝色箭头图标的样式，链接中的文本（如有）将在用户划过该图标时显示。,例,10_2.html,可折叠的内容块,可折叠（,Collapsibles,）允许您隐藏或显示内容,-,对于存储部分信息很有用。,如需创建可折叠的内容块，请向某个容器分配,data-role=collapsible,属性。在容器（,div,）中，添加一个标题元素（,h1-h6,），其后是您需要扩展的任意,HTML,标记：,实例,点击我,-,我可以折叠！,我是可折叠的内容。,例,10_3.html,可折叠功能和列表的结合使用,主要内容,复习列表举例,listview,折叠块功能,网格布局,form,表单,习题与作业,3,、,jQuery Mobile,布局网格,jQuery Mobile,提供了一套基于,CSS,的列布局方案。,不过，一般不推荐在移动设备上使用列布局，这是由于移动设备的屏幕宽度所限。,但是有时您需要定位更小的元素，比如按钮或导航栏，就像在表格中那样并排。这时，列布局就恰如其分。,网格中的列是等宽的（总宽是,100%,），无边框、背景、外边距或内边距。,可使用的布局网格有四种：,网格类,列,列宽度,对应,ui-grid-a,2,50%/50%,ui-block-a|b,ui-grid-b,3,33%/33%/33%,ui-block-a|b|c,ui-grid-c,4,25%/25%/25%/25%,ui-block-a|b|c|d,ui-grid-d,5,20%/20%/20%/20%/20%,ui-block-a|b|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 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,中，您可以使用以下表单控件：,文本框,搜索框,单选框,复选框,选择菜单,滑动条,翻转切换开关,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,和表单控件的样式。当页面宽度大于,480px,时，它会自动将,label,与表单控件放置于同一行。当小于,480px,时，,label,会被放置于表单元素之上。,提示：如需避免,jQuery Mobile,自动为可点击元素设置样式，请使用,data-role=none,属性。,例,10_6.html,4.3,浮动选择菜单 例,10_7.html,下课了,