小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

百变鹏仔 2个月前 (10-19) #H5教程

文章标签页眉

一、页眉

1、添加页眉和页脚

	<p data-role="header">	<h1>第 1 页</h1></p>

	<p data-role="footer">	<h4>页面脚注</h4></p>

默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉

	<p data-role="header" data-position="fixed">	<h1>第 1 页</h1></p>

	<p data-role="footer" data-position="fixed">	<h4>页面脚注</h4></p>

可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"

 jQuery Mobile Web 应用程序  <p data-role="header" data-position="fixed">	<h1>第 1 页</h1></p>

第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页
第 2 页
第 3 页
第 4 页

第 2 页

内容

第 3 页

内容

第 4 页

内容

在页面容器中添加data-fullscreen="true"后点击屏幕会出现页眉页脚，再次点击会消失。

立即学习“前端免费学习笔记（深入）”；

二、添加返回按钮

	<p data-role="header" data-position="fixed">    	<a href="#" data-icon="back">返回</a>	<h1>第 1 页</h1>        <a href="#" data-icon="plus" data-iconpos="notext"/></p>

左边是文本图标按钮，右边是纯图标按钮。

三、添加分段工具栏

	<p data-role="header" data-position="fixed">    	<a href="#" data-icon="back">返回</a>	<h1>第 1 页</h1>        <a href="#" data-icon="plus" data-iconpos="notext"/>        <p 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>        </p></p>

<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>

四、标签导航栏

	<p data-role="footer" data-position="fixed">	<p data-role="navbar">        	<ul>            	<li><a href="#" data-icon="arrow-l">A</a></li>                <li><a href="#" data-icon="back">B</a></li>                <li><a href="#" data-icon="star">C</a></li>                <li><a href="#" data-icon="plus">D</a></li>                <li><a href="#" data-icon="arrow-r">E</a></li>            </ul>        </p></p>

文章推荐

小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

第 2 页

第 3 页

第 4 页

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集