Framework7 - 自動隱藏導航欄

描述

對於一些不需要導航欄的Ajax載入頁面，導航欄可以自動隱藏/顯示。這僅在使用貫穿式佈局時才有效。您需要在載入的頁面中新增no-navbar類並放置一個空的導航欄。

示例

以下示例演示了單擊連結時如何自動隱藏導航欄：

建立檔案 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>

輸出

讓我們執行以下步驟來檢視上述程式碼是如何工作的：

將上述HTML程式碼儲存為navbar_hide_auto.html檔案到您的伺服器根資料夾。
以https:///navbar_hide_auto.html開啟此HTML檔案，輸出將如下所示。
執行程式碼時，您可以根據需要自動隱藏或顯示導航欄。

framework7_navbars.htm

列印頁面