尾部栏

尾部栏除了使用的data-role的属性与头部栏不同之外，基本的结构与头部栏是相同的

<div data-role="footer"> 
　 <h4>Footer content</h4> 
</div>

尾部工具栏默认下应用的主题样式为"a"(黑色)，但是你可以很轻松的设置主题样式

默认的尾部栏

尾部栏的设置与头部栏基本相同。最大的不同是，尾部栏被设定为结构尽量简单，所以Jquery Mobile不会自动给尾部栏生成按钮

添加按钮 Adding buttons

给尾部栏添加任何有效的按钮标记的元素都都会生成按钮。为了节省空间，工具栏里的按钮都是内联按钮，所以按钮的宽度只容纳icon和里面的文字

默认情况下，工具栏内部容纳组件与导航时是不留padding的。如果要给工具栏增加padding,请增加一个ui-bar的class.

<div data-role="footer" class="ui-bar">
　 <a href="index.html" data-role="button" data-icon="delete">Remove</a>
　 <a href="index.html" data-role="button" data-icon="plus">Add</a>
　 <a href="index.html" data-role="button" data-icon="arrow-u">Up</a>
　 <a href="index.html" data-role="button" data-icon="arrow-d">Down</a>
</div>

要想把几个按钮打包成一个按钮组，则需要把这些按钮用一个容器包裹，并给该容器增加data-role="controlgroup"和data-type="horizontal"属性

<div data-role="controlgroup" data-type="horizontal">

尾部的成组按钮

增加表单元素 Adding form elements

表单元素和其他元素也可以添加进工具栏中。这是一个把select添加到尾部栏的实例：

持续的尾部栏 Persistent footers

有些情况下你需要一个尾部栏为全局导航元素，希望页面转场时尾部栏也固定并显示。创造一个持续的尾部栏可以做到这一点

给尾部栏添加data-id属性，并且在所有关联的页面的尾部栏设定同样的data-id的值，就可以使尾部栏在页面转场时也固定并显示， 例如给当前页面和目标页面的尾部栏添加id="myfooter" 属性，Jquery Mobile会在页面转场动画的时候保持尾部栏固定 请注意：这个效果只有在头部栏和尾部栏设定为固定的定位模式（data-position="fixed" ）时在才有用，这样他们在页面转场时才不被隐藏