页眉栏:通常包含标题/Logo,或一到两个按钮
2个按钮时,会自动分列两侧
1个按钮时,会默认位于左侧
会自动居中
可设定按钮位置:class="ui-btn-right"
e.g.
<div data-role="header">
<h1>主页</h1> //自动居中
<a href="#" data-role="button" class="ui-btn-right">搜索</a>
</div>
页脚栏:具伸缩性,能包含所需数量的按钮
居中: class="ui-btn"
可以在页脚中组合按钮:data-role="controlgroup" data-type="horizontal |vertical"
e.g.
<div data-role="footer" class="ui-btn">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" data-role="button" data-icon="plus" >button1</a>
<a href="#" data-role="button" data-icon="minus" >button2</a>
<a href="#" data-role="button">button3</a>
</div>
</div>
定位页眉和页脚:(三种方式)
inline:位于行内(默认) data-position="inline"
fixed:固定置于项部和底部 data-position="fixed" (触摸屏幕可切换页眉页脚的隐藏和显示)
fullscreen:与fixed类似,同时,页眉页脚可呈透明显示 (触摸屏幕可切换页眉页脚的隐藏和显示) -对于照片,图像和视频非常理想
data-position="fixed" data-fullscreen="true"
e.g.
<div data-role="header" data-position="fixed" data-fullscreen="true"></div>
<div data-role="footer" data-position="fixed" data-fullscreen="true"></div>