Toolbar elements are typically located within the header and footer - making navigation easily accessible:
Header Bar
The header bar typically contains the page title /logo or a button or two (usually Home, Options, or Search).
You can add buttons to the left or right side of the header.
The following code will add a button to the left of the header title text and a button to the right of the header title text:
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
</div>
<div data-role="main" class="ui-content">
<p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
The code below will add a button to the header title To the left of the text:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
</div>
</body>
</html>
Click "Run Instance" "Button view online example
#However, if you place the button link after the <h1> element, the text on the right will not be displayed. To add a button to the right of the header title, specify the class "ui-btn-right":
##Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="header">
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a>
</div>
</body>
</html>
Run Instance»
Click the "Run Instance" button to view the online instance
##The header can contain one or two buttons, while the tail has no limit. | |
|---|
Tail Bar
Tail bars are more flexible than header bars - they are more functional and changeable throughout the page, so can contain as many buttons as you like:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a>
</div>
<div data-role="main" class="ui-content">
<p>该按钮仅用于演示，不会有任何效果。</p>
<p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p>
</div>
<div data-role="footer">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
Note: The tail is styled differently than the header (no padding and space, and the button is not centered). We can solve this problem using a simple style:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
</div>
<div data-role="main" class="ui-content">
<p>该按钮仅用于演示，不会有任何效果。</p>
</div>
<div data-role="footer" style="text-align:center;">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram关注我</a>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
You can also combine the buttons in the tail horizontally or vertically:
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a>
<h1>欢迎访问我的主页</h1>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a>
</div>
<div data-role="main" class="ui-content">
<p>该按钮仅用于演示，不会有任何效果。</p>
</div>
<div data-role="footer" style="text-align:center;">
<div data-role="controlgroup" data-type="horizontal">
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a>
<a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a>
</div>
</div>
</div>
</body>
</html>
Click the "Run Instance" button to view the online instance
Positioning the Header and Trailer Bars
The header and trailer can be positioned in three ways:
Inline - Default. The header and footer columns are inline with the page content.
Fixed - The header and footer bars are fixed to the top and bottom of the page.
Fullscreen - Basically the same as Fixed positioning mode, the header and footer bars are fixed to the top and bottom of the page. However, when the toolbar scrolls out of the screen, it will not automatically reappear unless the screen is clicked. This is very useful for applications such as pictures or videos that enhance the sense of substitution. Note that in this mode the toolbar will cover the page content, so it is best used in special situations.
Use the data-position attribute to position the header and footer columns:
Inline positioning (default)
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="inline">
<h1>行内页眉</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>
</div>
<div data-role="footer" data-position="inline">
<h1>行内页脚</h1>
</div>
</div>
</body>
</html>
Click the "Run instance" button to view the online instance
Fixed Positioning
Instance
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>Fixed 页眉</h1>
</div>
<div data-role="main" class="ui-content">
<p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p><b>提示：</b> 如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p>
<p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>
</div>
<div data-role="footer" data-position="fixed">
<h1>Fixed 页脚</h1>
</div>
</div>
</body>
</html>
Click "Run Instance" Button to view online examples
To enable fullscreen positioning, use data-position="fixed" and add the data-fullscreen attribute to the element:
Fullscreen positioning
Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed" data-fullscreen="true">
<h1>Fixed 和 Fullscreen 页眉</h1>
</div>
<div data-role="main" class="ui-content"><br><br>
<p><b>提示:</b> T如果要看到效果，则需要调整窗口大小使滚动条可用。</p>
<p><b>提示:</b> 敲击屏幕会隐藏或显示页眉和页脚。</p>
<p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p>
</div>
<div data-role="footer" data-position="fixed" data-fullscreen="true">
<h1>Fixed 和 Fullscreen 页脚</h1>
</div>
</div>
</body>
</html>
Click the "Run instance" button to view the online instance
Tips: Full screen positioning works with photos, images and videos.
Tips: In fixed positioning and full-screen positioning, the header bar and tail bar will be hidden and displayed by clicking on the screen.
More examples
Only display icons on the toolbar
To display only icons on the toolbar you can use ui-btn- icon-notext class.
