JQuery Mobile 基础

浏览数：34 / 时间：2015年06月09日

1、页面

jQuery Mobile应用了HTML5标准的特性，在结构化的页面中完整的页面结构分为header、 content、footer这三个主要区域。
在body中插入内容块：

<div data-role="page">

 <div data-role="header">...</div>

 <div data-role="content">...</div>

 <div data-role="footer">...</div>

 </div>

data-role="page”代表这个div是一个Page，在一个屏幕中只会显示一个page；
header是标题，content是内容块，footer是页脚
data-role参数表：
参数
说明
page
页面容器，其内部的mobile元素将会继承这个容器上所设置的属性
header
页面标题容器，这个容器内部可以包含文字、返回按钮、功能按钮等元素
footer
页面页脚容器，这个容器内部也可以包含文字、返回按钮、功能按钮等元素
content
页面内容容器，这是一个很宽容的容器，内部可以包含标准的html元素和jQueryMobile元素
controlgroup
将几个元素设置成一组，一般是几个相同的元素类型
fieldcontain
区域包裹容器，用增加边距和分割线的方式将容器内的元素和容器外的元素明显分隔
navbar
功能导航容器，通俗的讲就是工具条
listview
列表展示容器，类似手机中联系人列表的展示方式
list-divider
列表展示容器的表头，用来展示一组列表的标题，内部不可包含链接
button
按钮，将链接和普通按钮的样式设置成为jQueryMobile的风格
none
阻止框架对元素进行渲染，使元素以html原生的状态显示，主要用于form元素。