Framework7 - 相關應用和檢視方法

描述

View(<div class = "view">) 是應用的一個分離的視覺部分，包含其自身設定、導航和歷史記錄。每個檢視可以有不同的導航欄和工具欄佈局。

Views 是所有視覺檢視（除了 模態框 和面板）的包裝容器。當 views 被設定為應用主體的主要包裝容器時，只允許一個 views 元素。以下程式碼顯示了 views 的 HTML 結構：

<body>
   ...
   <div class = "panel panel-left panel-cover">
      <div class = "view panel-view"> .... </div>
   </div>
   
   <!-- Views -->
   <div class = "views">
      <!-- Your main view -->
         
      <div class = "view view-main">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
         
      <!-- Another view -->
      <div class = "view another-view">
         <!-- Navbar-->
         <!-- Pages -->
         <!-- Toolbar-->
      </div>
   </div>
  
   <div class = "popup">
      <div class = "view popup-view"> .... </div>
   </div>
   ....
      
</body>

在初始化 View 時，framework7 允許您使用如下所示的導航欄可用方法：

序號	方法及描述
1	myApp.hideNavbar(navbar) 用於隱藏特定導航欄。navbar 可以是 HTMLElement 或所需導航欄的字串（帶 CSS 選擇器），是必需引數。
2	myApp.showNavbar(navbar) 用於顯示特定導航欄。navbar 可以是 HTMLElement 或所需導航欄的字串（帶 CSS 選擇器），是必需引數。
3	view.hideNavbar() 隱藏此檢視中的導航欄。
4	view.showNavbar() 顯示此檢視中的導航欄。
5	myApp.sizeNavbars(viewContainer) 用於重新計算導航欄的位置樣式。viewContainer 可以是 CSS 選擇器字串或 HTMLElement，僅供 iOS 主題使用。

示例

以下示例演示了在 Framework7 中使用檢視方法，當您點選 隱藏導航欄（使用 .hide-navbar 類）按鈕時隱藏導航欄，並透過點選 顯示導航欄（使用 .show-navbar 類）按鈕顯示導航欄。

<!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">
            <div class = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                     
                        <div class = "left">
                           <a href = "#" class = "link"> <i class = "icon icon-back"></i><span>Previous</span></a>
                        </div>
                        
                        <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 = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "button hide-navbar">Hide Navbar</a></p>
                        
                        <p> <a href = "#" class = "button show-navbar">Show Navbar</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 $ = Framework7.$;
         var mainView = myApp.addView('.view-main');
         
         $('.hide-navbar').on('click', function () {
            mainView.hideNavbar();
         });
         
         $('.show-navbar').on('click', function () {
            mainView.showNavbar();
         });
      </script>
   </body>

</html>

輸出

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

將上面給出的 html 程式碼儲存為 navbar_app_view.html 檔案到您的伺服器根目錄。
以 https:///navbar_app_view.html 的方式開啟此 HTML 檔案，輸出結果如下所示。
執行程式碼時，您可以透過點選“隱藏導航欄”按鈕隱藏導航欄，並透過點選“顯示導航欄”按鈕顯示導航欄。

framework7_navbars.htm

列印頁面