Framework7 - 混合佈局

上一頁
下一頁

描述

您可以在單個檢視中混合使用不同型別的佈局。

示例

以下示例演示了在 Framework7 中使用混合佈局。導航欄和工具欄可以具有混合佈局，例如固定導航欄和貫穿工具欄，如下所示：

首先，我們將建立我們的mixed_layout.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>My App</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">Mixed Navbar</div>
               </div>
            </div>
            
            <div class = "pages navbar-fixed toolbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                     
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "/framework7/src/mixed_layout-services.html" class = "">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Go to Services page</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                     
                     <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 class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class="link">First Link</a>
                  <a href = "#" class="link">Second Link</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>

接下來，再建立一個 HTML 頁面，即mixed_layout-services.html，如下所示：

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "center sliding">Services</div>
   </div>
</div>

<div class = "pages">
   <div data-page = "services" class = "page">
      <div class = "page-content">
         <div class = "content-block">
            <br>
            
            <h2>Our Services</h2>
            <ul>
               <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
               eiusmod tempor incididunt ut labore.</li>
               <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris.</li>
               <li>Duis aute irure dolor in reprehenderit in voluptate velit esse 
               cillum dolore eu fugiat nulla pariatur.</li>
               <li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit 
               aut fugit.</li>
               <li>At vero eos et accusamus et iusto odio dignissimos ducimus 
               qui blanditiis praesentium voluptatum deleniti atque corrupti quos 
               dolores et.</li>
               <li>Nam libero tempore, cum soluta nobis est eligendi optio 
               cumque nihil impedit quo minus id.</li>
            </ul>
            
            <p>Go <a href = "#" class = "back">back</a> to home page.</p>
         </div>
      </div>
   </div>
</div>

輸出

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

  • 將上面給出的 html 程式碼儲存為mixed_layout.html檔案到您的伺服器根資料夾。

  • 以 https:///mixed_layout.html 的方式開啟此 HTML 檔案，輸出將如下所示。

  • 您可以看到導航欄是固定的，並且貫穿佈局應用於工具欄。

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

© . All rights reserved.