jQuery Mobile - 导航栏持久化
描述
持久导航栏就像一个标签栏，在您浏览页面时看起来是固定的。 将 ui-btn-active 类添加到标记中的锚点，您可以在导航栏初始化时为项目设置活动状态。
每当单击导航栏时，页面内容都会发生变化，而持久性页眉和页脚工具栏将保持不变。 这些工具栏必须放在每个页面上。
示例
以下示例演示了在 jQuery Mobile 中使用 navbar persistent。
<!DOCTYPE html>
<html>
<head>
<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 = 'navbar']" ).navbar();
$( "[data-role = 'header'], [data-role = 'footer']" ).toolbar();
});
// Update the the toolbar's contents
$( document ).on( "pagecontainerchange", function() {
// Each of the 4 pages in this example has a data-title attribute
// which value is equal to the nav button's text
// For e.g., on first page: <div data-role = "page" data-title = "Details">
var current = $( ".ui-page-active" ).jqmData( "title" );
// Change the heading
$( "[data-role = 'header'] h1" ).text( current );
// Remove active class
$( "[data-role = 'navbar'] a.ui-btn-active" ).removeClass( "ui-btn-active" );
// Add active class to current nav button
$( "[data-role = 'navbar'] a" ).each(function() {
if ( $( this ).text() === current ) {
$( this ).addClass( "ui-btn-active" );
}
});
});
</script>
</head>
<body>
<div data-role = "header" data-position = "fixed" data-theme = "a">
<a href = "" data-rel = "back" class = "ui-btn ui-btn-left ui-alt-icon
ui-nodisc-icon ui-corner-all ui-btn-icon-notext ui-icon-carat-l">Back</a>
<h1>Details</h1>
</div>
<div data-role = "page" data-title = "Details" class = "jqm-demos">
<div role = "main" class = "ui-content jqm-content jqm-fullwidth">
<h1>jQuery Mobile</h1>
<p>The jQuery Mobile is a user interface framework which is built on
jQuery core and used for developing responsive websites or applications that
are accessible on mobile, tablet and desktop devices. It uses features of both
jQuery and jQueryUI to provide API features for mobile web applications.</p>
<ul class = "list">
<li><p>The jQuery Mobile creates web applications in such a way that it
will work the same way on the mobile, tablet and desktop devices.</p></li>
<li><p>The jQuery Mobile is compatible with other frameworks such as
<i>PhoneGap</i>, <i>Whitelight</i> etc.</p></li>
<li><p>The jQuery Mobile provides set of touch friendly form inputs and
UI widgets.</p></li>
<li><p>The progressive enhancement brings you functionality to all mobile,
tablet and desktop platforms and adds efficient page loads and wider device
support.</p></li>
</ul>
</div>
</div>
<div data-role = "footer" data-position = "fixed" data-theme = "a">
<div data-role = "navbar">
<ul>
<li><a href = "/jquery_mobile/src/navbar_persistent.html"
data-prefetch = "true" data-transition = "flip">Details</a></li>
<li><a href = "/jquery_mobile/src/page_one.html" data-prefetch = "true"
data-transition = "fade">Friends</a></li>
<li><a href = "/jquery_mobile/src/page_two.html" data-prefetch = "true"
data-transition = "slide">Messages</a></li>
<li><a href = "/jquery_mobile/src/page_three.html" data-prefetch = "true"
data-transition = "turn">Emails</a></li>
</ul>
</div>
</div>
</body>
</html>
输出
让我们执行以下步骤，看看上面的代码是如何工作的 −
将上述 html 代码保存为服务器根文件夹中的 navbar_persistent.html 文件。
将此 HTML 文件打开为 http://localhost/navbar_persistent.html，将显示以下输出。
