自动隐藏导航栏(Hide navbar automatically)
描述 (Description)
导航栏可以隐藏/对于那些不需要导航条一些Ajax加载页面自动显示。 只要您使用的贯通型的布局是唯一有用的。 您需要添加no-navbar类加载的页面，并把一个空的导航条。
例子 (Example)
下面的例子自动隐藏导航栏，当你点击链接 -
创建文件navbar_hide_auto_about.html
navbar_hide_auto_about.html
<div class = "navbar">
<div class = "navbar-inner"></div>
</div>
<div data-page = "about" class = "page no-navbar">
<div class = "page-content">
<div class = "content-block">
<p> <a href = "#" class = "back button">Go Back</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
navbar_hide_auto.html
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name = "apple-mobile-web-app-capable" content = "yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>Navbar View Methods</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main navbar-through">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "center">Center Part</div>
<div class = "right">
<a href = "#" class = "link icon-only"> <i class = "icon icon-bars"></i></a>
</div>
</div>
</div>
<div class = "pages">
<div data-page = "home" class = "page">
<div class = "page-content">
<div class = "content-block">
<p><a href = "navbar_hide_auto_about.html" class = "button">About</a></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida.
Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Integer
sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis sed placerat
dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed purus lacinia
dignissim. Aenean sagittis interdum leo in molestie. Aliquam sodales in diam
eu consectetur. Sed posuere a orci id imperdiet.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<script>
var myApp = new Framework7();
var mainView = myApp.addView('.view-main', {
dynamicNavbar: true
});
</script>
</body>
</html>
输出 (Output)
让我们来进行上面给出看看代码是如何工作的以下步骤 -
保存上面给出的HTML代码navbar_hide_auto.html文件服务器在你的根文件夹。
打开这个HTML文件为http://localhost/navbar_hide_auto.html和如下所示被显示的输出。
当您运行的代码，你可以隐藏或自动显示导航栏时不需要导航条。
