Framework7 - 工具欄

描述

工具欄透過在螢幕底部使用導航元素，方便訪問其他頁面。

您可以透過表格中指定的方式使用兩種工具欄：

序號	工具欄型別及描述
1	隱藏工具欄您可以透過使用no-toolbar 類到載入的頁面，在載入頁面時自動隱藏工具欄。
2	底部工具欄透過使用toolbar-bottom 類，將工具欄放置在頁面底部。

工具欄方法

以下可用方法可與工具欄一起使用：

序號	工具欄方法及描述
1	myApp.hideToolbar(toolbar) 隱藏指定的工具欄。
2	myApp.showToolbar(toolbar) 顯示指定的工具欄。
3	view.hideToolbar() 隱藏檢視中指定的工具欄。
4	view.showToolbar() 顯示檢視中指定的工具欄。

示例

以下示例演示了在 Framework7 中使用工具欄佈局。

首先，我們將建立一個名為toolbar.html的 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>Toolbar Layout</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 = "navbar">
               <div class = "navbar-inner">
                  <div class = "center sliding">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <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. 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. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </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>
         // here initialize the app
         var myApp = new Framework7();

         // If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         // Add the view
         var mainView = myApp.addView('.view-main', {
         
            // enable the dynamic navbar for this view
            dynamicNavbar: true
         });
      </script>
   </body>

</html>

現在，在自定義 JS 檔案toolbar.js中初始化您的應用程式和檢視。

輸出

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

將上述 HTML 程式碼儲存為toolbar.html檔案到您的伺服器根資料夾。
以 https:///toolbar.html 的方式開啟此 HTML 檔案，輸出將顯示如下。

列印頁面