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

最新推荐文章于 2017-07-20 19:14:00 发布

VIP文章 lxq_xsyu

最新推荐文章于 2017-07-20 19:14:00 发布

阅读量5.1k

点赞数 1

本文链接：https://blog.csdn.net/dawanganban/article/details/22925057

版权

一、页眉

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">
<title>jQuery Mobile Web 应用程序</title>
<link href="jquery-mobile/jquery.mobile-1.0.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</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">
			<l

最低0.47元/天解锁文章

lxq_xsyu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
小强的HTML5移动开发之路（43）——JqueryMobile页眉、工具栏和标签栏导航

一、页眉1、添加页眉默认的页眉在屏幕的顶部边缘显示，而且在在屏幕滚动时，页眉会滑出屏幕之外，通过添加data-position属性可以创建一个固定的页眉可以使用date-theme属性来调整页眉的主题，默认主题是黑色data-theme="a"
复制链接

扫一扫