Framework7 - 固定佈局

上一頁
下一頁

描述

在此佈局中，導航欄和工具欄將被固定，並且在頁面上無法滾動。每個頁面也可以有自己的導航欄和工具欄。

示例

以下示例演示了在 Framework7 中使用固定佈局。以下示例中的導航欄和工具欄看起來是固定的。

首先，我們將建立我們的 **fixed_layout.html** 檔案。

<!DOCTYPE html>
<html>
   
   <head>
      <meta charset = "utf-8">
      <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>Fixed 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 = "pages">
               
               <div data-page = "home" class = "page navbar-fixed toolbar-fixed">
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"></div>
                        <div class = "center">Fixed Navbar</div>
                        <div class = "right"></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "fixed_layout-services.html">Services page</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>
                     </div>
                  </div>
                  
                  <div class = "toolbar">
                     <div class = "toolbar-inner">
                        <a href = "#" class = "link">Link 1</a>
                        <a href="#" class="link">Link 1</a>
                     </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');
      </script>
   </body>
   
</html>

接下來，建立 HTML 頁面，即 **fixed_layout-services.html**，如下所示：

<div class = "views">
   <div class = "view view-main">
      <div class = "pages">
         <div data-page = "services" class = "page navbar-fixed toolbar-fixed">
         
            <div class = "navbar">
               <div class = "navbar-inner">
                  <div class = "center">Services Page</div>
               </div>
            </div>
            
            <div class = "page-content">
               <div class = "content-block">
                  <p><a href = "bars-fixed-index.html" class = "back">Go back to Home page</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 class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Service link 1</a>
                  <a href = "#" class = "link">Service link 2</a>
               </div>
            </div>
         
         </div>
      </div>
   </div>
</div>

輸出

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

  • 將上面給出的 html 程式碼儲存為 **fixed_layout.html** 檔案，放在伺服器根資料夾中。

  • 開啟此 HTML 檔案，地址為 https:///fixed_layout.html，輸出結果如下所示。

  • 當您滾動頁面時，導航欄和工具欄將被固定，並且在螢幕上可見。

您可以為所有頁尾連結建立單獨的頁面。

framework7_layouts.htm
列印頁面
上一頁
下一頁
廣告

© . All rights reserved.