<div data-role="page"> <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a> <h1>欢迎访问我的主页</h1> <a href="#" data-role="button" data-icon="search">搜索</a> </div> </div>
[单个按钮居右]（默认居左）
如果只加一个按钮，不管是加在h1的前面还是后面都会默认放在左侧，如果想放在右侧，需在按钮上添加
如下属性
[注意]：页眉只可以包含一到俩个按钮，页脚无限制
【页脚】
页脚和页眉不同，他省去了一些内联样式 且不会居中
如果需要居中，则可以在footer上添加
class="ui-btn" (并且只能在footer上添加)
当然也可以选择水平或垂直的组合方式
<div data-role="footer" > <div data-role="controlgroup" data-type="horizontal"> <a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> <a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> <a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> </div> </div>
【页眉和页脚的定位】
[inline] 默认
页眉页脚与页面内容平行 即内容多高 页眉和页脚随内容的高度增加
data-position="inline"
[fixed]
根据滚动条的位置 分别显示 或 隐藏页眉或页脚
data-position="fixed"
[fullscreen]
需要同时定义俩个属性 会同时显示隐藏 页眉或页脚
data-position="fixed" data-fullscreen="true"
七、导航栏的使用
【导航栏】
使用 navbar 定义导航栏
data-role="navbar"
注意：navbar下面的a标签 可以免去
data-role="button" 自动会添加类似属性
<div data-role="header"> <h1>标题 可不要</h1> <div data-role="navbar"> <ul> <li><a href="#a">首页</a></li> <li><a href="#a">导航</a></li> <li><a href="#a">搜索</a></li> </ul> </div> </div>
【选中按钮】
在不点击的情况下 激活选中
点击后激活选中（这个预先放入按钮 属性中 点击时会被激活）
class="ui-state-persist"
[注意]：
导航按钮可以放在 footer content header中
需要使用的时候：
必须按照
div:data-role="footer">div:data-role="navbar">ul>li>a 的层级来展示
八、可折叠的使用
【单个可折叠】
data-role="collapsible"
格式：
<div data-role="collapsible"> <h1>标题</h1> <p>内容</p> </div>
折叠默认是关闭的，需要默认打开 可添加属性
data-collapsed="false"
【嵌套的可折叠】
此格式 可以去掉内容 保留标题，制作无限极菜单
<div data-role="collapsible"> <h1>点击我 - 我可以折叠！</h1> <p>我是被展开的内容。</p> <div data-role="collapsible"> <h1>点击我 - 我是嵌套的可折叠块！</h1> <p>我是嵌套的可折叠块中被展开的内容。</p> </div> </div>
【集合可折叠】
父：data-role="collapsible-set"
子：data-role="collapsible"
<div data-role="collapsible-set"> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> <div data-role="collapsible"> <h3>点击我 - 我可以折叠！</h3> <p>我是可折叠的内容。</p> </div> </div>
【去掉标题圆角】
data-inset="false"
【小化按钮】
data-mini="true"
【改变图标】
data-expanded-icon
九、网格布局
【四种网格布局】