头部工具栏(页眉) data-role=header

头部工具栏,又称页眉、标题栏。它作为网页的标题,通常是在每个移动页面的第一个元素,通常包含一个页面的标题和两个按钮。

头部结构

页眉是一个工具栏在页面的顶部,通常包含页面标题文本和可选的按钮。按钮被定位在标题的左右侧。头部标题通常是导航或动作。标题可以被固定的,当滚动页面时,他们始终在屏幕顶部。
标题文本通常是一个H1标题元素,但使用任何级别的标题(h1-h6)允许语义的灵活性。例如,一个页面包含多个移动页面可以使用h1元素在家“页”和在第二页h2元素。所有的标题级别是相同的风格,默认情况下保持视觉的一致性。

<div data-role="header">
  <h1> Page Title </h1>
</div>

样式主题 data-theme

头部工具栏默认样式主题,data-theme="a" (黑色)。可以轻松定义这颜色。JQuery Mobile 预设置了五套样式 a(黑色)、b(蓝色)、c(灰色)、d(白色)、e(黄色)。

<div data-role="header" data-theme="a">
  <h1> Page Title </h1>
</div>

头部工具栏 data-role=header

添加按钮 头部栏的链接被自动样式化为按钮

在标准的头部栏的设置下,标题文字两边各有一个可放置按钮的位置。每一个按钮通常都是都是 a 元素,但是任何有效的按钮标记的元素都可以。为了节省空间,工具栏里的按钮都是内联按钮,所以按钮的宽度只容纳icon和里面的文字。

头部的按钮是头部栏容器的直接子节点,默认情况下,JQuery Mobile 会自动设置第一个链接在标题的左边,第二个链接在右边。在下面这个例子中,“取消”按钮会出现在左边,“保存”按钮会出现在右边位置。

<div data-role="header">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check">Save</a>
</div>

头部工具栏 data-role=header

使按钮在视觉上突出 data-theme

按钮会自动应用他们的父容器的主题样式,如果头部容器应用了"a"主题样式,头部栏里的按钮也会继承"a"主题样式。但我们通过给按钮增加 data-theme 的属性来设置,可以使按钮看起来有所区别。

<div data-role="header">
	<a href="index.html" data-icon="delete">Cancel</a>
	<h1>Edit Contact</h1>
	<a href="index.html" data-icon="check" data-theme="b">Save</a>
</div>

头部工具栏 data-role=header

通过class控制按钮的定位。

a 链接按钮的位置,也可以通过CSS来控制按钮,而不依赖他们在源代码中的顺序。如果你只需要一个按钮并且想放在右侧,这是特别有用的。指定按钮的位置,需要添加CSS类 ui-btn-left 或者 ui-btn-right 来设置定位。

<!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; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:90px; min-height:90px;"> 
	<div data-role="header" >
		<h1>Page Title</h1>
		<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
	</div>
</div>
</body>
</html>

头部工具栏 data-role=header

添加”返回“按钮 data-rel="back" href属性的链接样式化为“返回”按钮

给a标签增加 data-rel="back" 的属性,它被样式化为后退按钮,任何方式的点击,它都后退到上一个历史记录的页面,无视该链接的herf地址。这点在链接回一个已命名的页面十分有用,比如当有一个到“home”链接或者当用javascript生成一个后退按钮时,或者一个按钮用来关闭一个对话框

请给链接设定一个有意义的 herf 地址,指向实际要连接的页面,使得C级浏览器也能够使用这个按钮。

如果你只是需要一个反向过渡,而不是真正的后退到上一个历史记录的页面,应该用 data-direction="reverse" 的属性,而不是用data-rel="back"属性的按钮。

   <div data-role="content">
         <p>
            <a href="http://www_qibosoft_com" data-rel="back">
                返回首页
            </a>
        </p>
    </div>

开启自动创建“返回”按钮功能 data-add-back-btn="true"

Query移动有一个功能,给任何的头部栏,自动创建的“后退”按钮,但默认情况下禁用此功能。这主要是在chromeless应用程序中非常有用的,如那些运行在本地应用Web视图。
若要开启此功能,让框架自动生成一个“返回”按钮,把页面插件的 addBackBtn 选项设置为真。如: $.mobile.page.prototype.options.addBackBtn = true 。这也可以通过HTML标记设置,给“page”容器元素添加 data-add-back-btn="true" 属性。

//以编程的方式 
$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.addBackBtn = true;
});
 
//在HTML中  
<div data-role="page" data-add-back-btn="true">
  <div data-role="header">
    <h1>后退按钮文字</h1>
  </div>
  <div data-role="content">
    <p><a href="#e1">首页</a></p>
  </div>
  <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>

自定义“返回”按钮的文字 ata-back-btn-text

自定义后退按钮的文本,给“page”容器添加 data-back-btn-text="previous" 属性。或将它编程方式通过网页插件的选项 $.mobile.page.prototype.options.backBtnText = "previous";

//以编程的方式 
$(document).bind("mobileinit", function() {
    $.mobile.page.prototype.options.backBtnText ="首页";
});
 
//在HTML中  
<div data-role="page" data-add-back-btn="true" data-back-btn-text="首页"> 
  <div data-role="header">
    <h1>后退按钮文字</h1>
  </div>
  <div data-role="content">
    <p><a href="#e1">首页</a></p>
  </div>
  <div data-role="footer"><h4>2012 rttop.cn studio</h4></div>
</div>

设置“返回”按钮的样式风格

自定义配置后退按钮的样式主题,您可以在mobileinit事件处理程序使用:$.mobile.page.prototype.options.backBtnTheme = "a";

头部栏无标题 class="ui-title"

头部栏有标题的时候,标题栏才能正常显示高度和外边距。如果您选择不使用一个标题,你将需要添加一个类 class="ui-title" ,才能得到正确显示。

<div data-role="header">
	<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
	<span class="ui-title" /> 
</div>

头部工具栏 data-role=header

自定义头部工具栏

如果你想创建一个不遵循默认配置的头部工具栏,在div的任何容器里,添加自定义的标记。在这栏容器内,Jquery Mobile不会自动生成按钮,所以你可以给你的头部栏自定义你的样式。

这能合理的实现创建自定义头部工具栏(标题工具栏),而没有使用 data-role="header"属性。例如,在任何容器内添加CSS的 ui-bar 类来应用标准的含有padding的工具栏,并且添加CSS的 ui-bar-b 类来设置此工具栏的样式主题为蓝色。("b" 可以是任意字符,如:“a“黑色)。

<!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; }
	html, .ui-mobile, .ui-mobile body {
    	height: 85px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 85px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:90px; min-height:90px;">
	<div class="ui-bar ui-bar-b"> 
		<h3>I'm just a div with bar classes and a mini inline <a href="#" data-role="button" data-inline="true" data-mini="true">Button</a></h3> 
	</div> 
</div> 
</body>
</html>

头部工具栏 data-role=header

注意:ui-bar类的工具条,没有被应用到头部栏或者尾部栏(即添加了data-role="header"属性或者data-role="footer"属性的工具栏)时,会在“page"页面内是全屏宽度,并且再附加的空白(padding),这样会导致它撑破父容器。所以把 ui-bar 工具条的内容,放置在一个容器元素内,并且此元素能容纳附加的 padding 部分。

通过编写一些简单的样式,建立这样的留言条是容易的:

<!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; }
	html, .ui-mobile, .ui-mobile body {
    	height: 95px;
	}
	.ui-mobile, .ui-mobile .ui-page {
    	min-height: 95px;
	}
	.ui-content{
		padding:10px 15px 0px 15px;
	}
	</style>
</head> 
<body> 
<div data-role="page" style="max-height:100px; min-height:100px;">
	<div class="ui-bar ui-bar-e">
		<h3 style="display:inline-block; width:92%; margin-top:5px;">This is an alert message. </h3> 
		<div style="display:inline-block; width:8%; margin-top:0px;"><a href="#" data-role="button" data-icon="delete" data-iconpos="notext">Dismiss</a></div> 
		<p style="font-size:85%; margin:-.3em 0 1em;">And here's some additional text in a paragraph.</p>
	</div>
</div>
</body>
</html>

头部工具栏 data-role=header