jquery mobile -role
data-page 页面
data-header 页面的头部
data-content 页面的内容
data-footer 页面的页脚
data-navbar 定义一个导航条，一般位于header中
data-button 渲染为一个可视化的按钮
data-controlgroup 渲染一个组件
data-collapsible-set 一组可折叠的内容面板
data-filedcontain 用于表单-域的容器
data-listview 由多项内容组成的列表
data-dialog 对话页面
slider 用于布尔值的可视化滑块
data-nojs 在兼容jquery mobile的浏览器上会被隐藏的元素
1.jquery mobile的首页不能增加后退按钮，http://stackoverflow.com/questions/13662696/data-add-back-btn-true-doesnt-work
2.跳转页面后js失效可能是没有添加下面的某一项：一：data-rel="external" 二：target="_blank" 三：data-ajax=“fasle”
3.添加logo：在header中，在h1中使用img标签比较好<h1><img src=""/></h1>
4.导航栏(navbar) 导航栏只是一个容器，通常为一个div元素，内容为一个包含各个导航链接的无序列表。导航栏上被选中的元素用ui-btn-active标识（class="ui-btn-active"）。使用固定页脚的导航栏时，要在选中项上加上两个类：class="ui-btn-active ui-state-persist".
5.可折叠内容,：<div data-role="collapsible" data-collapsed="false"><h2></h2><p></p></div>打开折叠块的内容； <div data-role="collapsible" data-collapsed="true">是收缩折叠区的内容。在折叠容器中没有定义hX元素，则内容将处于打开状态且不能收起，如果定义多个hX元素，则第一个会被当做标题，其他的将被渲染为内部的内容。
6.可折叠内容也可嵌套，不过最好不要超过两级的嵌套。
<div data-role="collapsible" data-collapsed="true">
<h2> 一级嵌套</h2>
<div data-role="collapsible">
<h3>二级嵌套 </h3>
<p>hsajdoajdpajfapjspjadfpasjfpasjfjsaiojfsalshalsjlalsjf ajajsf;sjaf ajsfjafls
</p>
</div>
</div>
7.手风琴部件， <div data-role="collapsible-set">放一些可折叠的标题和内容</div> 当打开其中一个折叠项时，其它折叠项将关闭。
8.类ui-grid-a表示两列，ui-grid-b表示三列，ui-grid-c表示四列，ui-grid-d表示五列。用来布局网格，采用平铺排版。
9.按钮，1：使用button元素，2：使用会被渲染为按钮的input元素，包括type="button"，type="submit",type="reset" 以及type="image" ,3:任何带有data-role="button"的a元素。给id=btn的标签添加跳转属性$("#btn").attr('href', 'http://www.baidu.com/');<a href="" id="btn" data-role="button" data-inline="true"> <img src="../img/1.jpg" alt="Alternate Text" /></a>
<a href="http://www.baidu.com/" onclick="location='http://www.google.cn/';alert(location.href);">去百度</a>
<a href="#" onclick="location='http://www.google.com.hk/';alert(location.href);">去谷歌</a>
10.内联按钮，data-inline="true"
11.分组按钮
12.data-role="list-divider" 和 data-role="listview"联合起来一起用是用一行区分不同的列表
