jQuery Mobile - 外部工具栏
描述
页眉和页脚将放置在页面之外。
这些工具栏位于正文内页面之前和之后，除非手动删除，否则它们将保留在 dom 中。
由于工具栏位于页面之外，因此它们不会被自动初始化。 您必须通过调用以下函数来调用工具栏插件。
$(function() {
$( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});
由于工具栏位于页面之外，因此它们不会从页面继承主题，而是您必须始终为它们设置主题。
data-theme 属性可用于此目的，或在您通过调用以下函数调用插件时设置 theme 选项。
$(function() {
$( "[data-role='header']" ).toolbar({ theme: "a" });
});
示例
以下示例演示了在 jQuery Mobile 中使用外部工具栏。
<!DOCTYPE html>
<html>
<head>
<title>Toolbar External Toolbars</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script>
$(function() {
$( "[data-role = 'header'], [data-role = 'footer']" ).toolbar({ theme: "a" });
});
</script>
</head>
<body>
<div data-role = "header">
<h2>External Header</h2>
</div>
<div data-role = "page">
<h2>Page's Content</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur.</p>
</div>
<div data-role = "footer">
<h2>External Footer</h2>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 toolbar_external.html 文件。
将此 HTML 文件打开为 http://localhost/toolbar_external.html，将显示以下输出。
