在jquery mobile（以下简称jm）的页眉页脚中可以定义一些按钮，作为导航和工具。

页眉中，规定可以定义两个按钮，使按钮分布在标题的左右两侧，

<div data-role="header">
  <a href="#" data-role="button">首页</a>
  <h1>欢迎来到我的主页</h1>
  <a href="#" data-role="button">搜索</a>
</div>

效果：

如果插入的按钮超过两个，则会出现：

其内置的样式不支持超过两个按钮的页眉的样式的美观，

如果在标题后面只插入一个按钮，（标题前面插入一个会自动靠左），则不会自动靠右，需在按钮上面加上类名"ui-btn-right"，而且标题的文本一定要放在<h>标题元素内，才能使jm中的页眉样式正确应用

页脚中的按钮个数没有限制，看需求和页面美观自行规定按钮个数

<div data-role="footer" class="ui-btn">   注释：页脚与页眉的样式不同（它会减去一些内边距和空白，并且按钮不会居中）。如果要修正该问题，请在页脚设置类名 "ui-btn"：                        
  <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 - 与 fixed 类似;页面和页脚会留在页面顶部和底部，but also over the page content. It is also slightly see-through data-fullscreen="true" 滚动滚动条时页眉和页脚固定，内容全屏显示，页眉和页脚底下也会有内容
 

导航栏由一组水平排列的链接构成，通常位于页眉或页脚内部，内容中也可以放导航栏。默认地，导航栏中的链接会自动转换为按钮（无需 data-role="button"）。使用 data-role="navbar" 属性来定义导航栏：

<div data-role="header">
  <div data-role="navbar">
    <ul>
      <li><a href="#anylink">首页</a></li>
      <li><a href="#anylink">页面二</a></li>
      <li><a href="#anylink">搜索</a></li>
    </ul>
  </div>
</div>

按钮的宽度默认与内容一致（没有用ul li包围），用无序列表均等划分按钮宽度，1个100%，2个各50%。。。，导航栏内的按钮在小于等于5的时候，排列在一行，大于5的时候会以每行两个的分布折行显示。导航栏的内容占据一行，不于其他内容分布在同一行，max-width: 100%;

 导航栏内的链接有默认的点击效果，如果想要在不敲击链接时实现此外观，请使用 class="ui-btn-active"，对于多个页面，您也许需要为每个按钮设置“被选”外观，以表示用户正在浏览该页面。如果要这么做，请向链接添加 "ui-state-persist" 类，以及 "ui-btn-active" 类