尾部工具栏(页脚) data-role=footer

尾部工具栏,又翻译成尾部栏、页脚栏。在每个移动页,它通常是的最后一个元素。与头部栏相比,在内容和功能上的标题更自由,但通常包含文本和按钮的组合。

页脚栏结构

页脚栏与页眉栏有相同的基本结构,属性值不同之外。默认的样式主题 data-theme="a"。

页面页脚栏选项和与页眉栏,在配置方面是非常相似。主要的区别是,页脚的设计是结构化程度较低,有更多的灵活性。所以Jquery Mobile不会自动给尾部栏生成按钮。由于页脚与页眉相比,不具有相同的规定的标记和标题,我们推荐使用布局网格或写自定义的方式来实现你想要的设计。

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

添加按钮

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

默认情况下,工具栏内的导航和其他部件,是没有 padding 的。如果要给工具栏增加 padding,请增加一个 ui-bar 的class.

<div data-role="footer" class="ui-bar">
	<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>

注意:ui-bar类的工具条,没有被应用到头部栏或者尾部栏(即添加了data-role="header"属性或者data-role="footer"属性的工具栏)时,会在“page"页面内是全屏宽度,并且再附加的空白(padding),这样会导致它撑破父容器。所以把 ui-bar 工具条的内容,放置在一个容器元素内,并且此元素能适用附加的 padding 部分。

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

<div data-role="footer" class="ui-bar"> 
<div data-role="controlgroup" data-type="horizontal"> 
	<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>
</div>

添加表单元素

表单元素和其他内容也可以被添加到工具栏。这是一个选择菜单里的一个页脚栏的一个例子。我们建议使用小型的形式元素在工具栏添加 data-mini="true" 属性。

 
<div data-role="footer" class="ui-bar">
	<label for="select-choice-1">Shipping:</label>
	<select name="select-choice-1" id="select-choice-1" data-theme="a" data-mini="true">
	<option value="standard">Standard: 7 day</option>
	<option value="rush">Rush: 3 days</option>
	<option value="express">Express: next day</option>
	<option value="overnight">Overnight</option>
	</select>
</div>

固定持久的尾部栏

有的的情况下,您可能希望页脚是在全局导航元素,它出现的固定,不滚动出视图。它使一个固定的工具栏,希望页面转场时尾部栏也固定并显示。这可以通过使用包含在jQuery移动持续页脚功能实现。

给尾部栏添加 data-id 属性,并且在所有关联的页面的尾部栏设定同样的 data-id 的值,就可以使尾部栏在页面转场时也固定并显示。

例如,给当前页面和目标页面的尾部栏添加 data-id="myfooter" 属性,Jquery Mobile会在页面转场动画的时候保持尾部栏固定。

请注意:这个效果只有在头部栏和尾部栏设定为固定的定位模式 data-position="fixed" 时在才有用,这样他们在页面转场时才不被隐藏。