固定工具栏 data-position=fixed

在浏览器支持的 CSS position: fixed (大多数的桌面浏览器, iOS5+, Android 2.2+, BlackBerry 6, 和其他)。工具栏使用“固定工具栏”插件将被固定在视图的顶部或底部,当页面自由滚动,固定栏始终浮动在屏幕的顶部或者底部。在浏览器不支持固定定位,工具栏将留在那固定的位置(页面的顶部或底部)。

给头部栏或底部栏设置这样的行为,需要给工具栏的容器增加 data-position="fixed" 属性。

<!DOCTYPE html> 
<html> 
<head> 
	<title>Page Title</title> 
	<meta name="viewport" content="width=device-width, initial-scale=1"> 
	<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
	<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
	<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
	<style>
	html, body { padding: 0; margin: 0; }
	
	
	.ui-content{
		padding:10px 15px 0px 15px;
	}
    </style>
</head> 
<body> 
<div data-role="page">
	<div data-role="header" data-position="fixed" data-theme="a">
		<h1>Fixed Header</h1>
	</div><div data-role="content" > <img src="photo-run.jpeg"  alt="Photo Run">
	
		<p>This page demonstrates the "fixed" toolbar mode. </p>
		
		<p>To enable this toolbar feature type, you apply the <strong>data-position="fixed"</strong> attribute to both the header and footer <code>div</code> elements. </p>
					      
	</div>
    <div data-role="footer" data-theme="a" data-position="fixed">
		<h1>Fixed Footer</h1>
	</div>
</div>
</body>
</html>

固定工具栏 data-position=fixed
开始浏览

固定工具栏 data-position=fixed
滚屏到底部

 

全屏 data-fullscreen="true"

当开始浏览内容的时候,在内容的顶部,全屏固定工具栏是显示的。但是当点击屏幕时,工具条从屏幕上消失完全。再点击屏幕时候,工具栏显示。全屏工具栏更加身临其境的界面是理想的,像一个图片查看器是全屏的照片本身并没有分心。

给头部栏或底部栏设置这样的行为,需要给工具栏的容器增加 data-fullscreen="true" 属性。

<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed Header!</h1>
</div>

固定工具栏 data-position=fixed
开始浏览

固定工具栏 data-position=fixed
滚屏到底部

固定工具栏 data-position=fixed
点击屏幕关闭工具栏