本文为 兄弟连IT教诲 机构官方 HTML5培训 教程，次要介绍：HTML5挪动开发之路（43）——JqueryMobile页眉、东西栏和标签栏导航
一、页眉
1、添加页眉和页脚
div data-role="header"
h1第 1 页/h1
/div
div data-role="footer"
h4页面脚注/h4
/div
默认的页眉在屏幕的顶部边沿展现，并且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性能够创建一个固定的页眉
div data-role="header" data-position="fixed"
h1第 1 页/h1
/div
div data-role="footer" data-position="fixed"
h4页面脚注/h4
/div
能够利用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"
!DOCTYPE html
html
head
meta charset="utf-8"
titlejQuery Mobile Web 利用法式/title
link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/
/head
body
div data-role="page" id="page"
div data-role="header" data-position="fixed"
h1第 1 页/h1
/div
div data-role="content"
ul data-role="listview"
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
lia href="#page2"第 2 页/a/li
lia href="#page3"第 3 页/a/li
lia href="#page4"第 4 页/a/li
/ul
/div
div data-role="footer" data-position="fixed"
h4页面脚注/h4
/div
/div
div data-role="page" id="page2"
div data-role="header"
h1第 2 页/h1
/div
div data-role="content"
内容
/div
div data-role="footer"
h4页面脚注/h4
/div
/div
div data-role="page" id="page3"
div data-role="header"
h1第 3 页/h1
/div
div data-role="content"
内容
/div
div data-role="footer"
h4页面脚注/h4
/div
/div
div data-role="page" id="page4"
div data-role="header"
h1第 4 页/h1
/div
div data-role="content"
内容
/div
div data-role="footer"
h4页面脚注/h4
/div
/div
/body
/html
在页面庞器中添加data-fullscreen="true"后点击屏幕会呈现页眉页脚，再次点击会消逝。
二、添加返回按钮
div data-role="header" data-position="fixed"
a href="#" data-icon="back"返回/a
h1第 1 页/h1
a href="#" data-icon="plus" data-iconpos="notext"/
/div
右边是文本图标按钮，右边是纯图标按钮。
三、添加分段东西栏
div data-role="header" data-position="fixed"
a href="#" data-icon="back"返回/a
h1第 1 页/h1
a href="#" data-icon="plus" data-iconpos="notext"/
div data-role="controlgroup" data-type="horizontal" align="center" class="segment-control"
a href="#" data-role="button" class="ui-control-active"菜单一/a
a href="#" data-role="button" class="ui-control-inactive"菜单二/a
a href="#" data-role="button" class="ui-control-inactive"菜单三/a
/div
/div
style style="text/css"
.segment-control{text-align:center;margin:0.2em;}
.ui-control-active, .ui-control-inactive{border-style:solid; border-color:gray;}
.ui-control-active{background:#BBB;}
.ui-control-inactive{background:#DDD;}
/style
四、标签导航栏
div data-role="footer" data-position="fixed"
div data-role="navbar"
ul
lia href="#" data-icon="arrow-l"A/a/li
lia href="#" data-icon="back"B/a/li
lia href="#" data-icon="star"C/a/li
lia href="#" data-icon="plus"D/a/li
lia href="#" data-icon="arrow-r"E/a/li
/ul
/div
/div