# 尾部栏 ## 尾部栏结构 Footer bar structure 尾部栏除了使用的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" ）时在才有用，这样他们在页面转场时才不被隐藏