参考资料:jquery mobile API
1、页眉导航条
<div data-role='header' data-theme="t">
<h1>广电医疗平台</h1>
<div data-role="navbar">
<ul>
<li><a href="#">one</a></li>
<li><a href="#">two</a></li>
<li><a href="#">three</a></li>
</ul>
</div>
</div>
2、页脚导航条
<div data-role="footer" data-position="fixed">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">one</a></li>
<li><a href="#" data-icon="star">two</a></li>
<li><a href="#" data-icon="gear">three</a></li>
</ul>
</div>
</div>
说明:
1、使用data-role="navbar"来定义导航条,默认的,会将链接定义成按钮,无需data-role="button"
2、navbar导航条单行只5个按钮,如果超过5个,会自动分两列换行显示
定位页眉和页脚
放置页眉和页脚的方式有三种:
- Inline - 默认。页眉和页脚与页面内容位于行内。
- Fixed - 页面和页脚会留在页面顶部和底部。
- Fullscreen - 与 fixed 类似;页面和页脚会留在页面顶部和底部,but also over the page content. It is also slightly see-through
请使用 data-position 属性来定位页眉和页脚:
Inline 定位(默认)
<div data-role="header"data-position="inline"
></div> <div data-role="footer"data-position="inline"
></div>
Fixed 定位
<div data-role="header"data-position="fixed"
></div> <div data-role="footer"data-position="fixed"
></div>
Fullscreen 定位
<div data-role="header" data-position="fixed"data-fullscreen="true"
></div> <div data-role="footer" data-position="fixed"data-fullscreen="true"
></div>