Framework7 - 浮動操作按鈕佈局

描述

浮動操作按鈕佈局非常簡單，您只需將其作為頁面或檢視的子元素即可。要在您的應用程式中使用浮動操作按鈕，您需要使用floating-button類。

示例

以下示例演示了在 Framework7 中使用浮動操作按鈕：

<!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>Create and open Action Sheet</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" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.min.css" />
      <link rel = "stylesheet" 
         href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.material.colors.min.css" />
   </head>

   <body>
      <div class = "views">
         <div class = "view view-main">
            <div class = "pages">
               <div class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "center">Floating Action Button Layout</div>
                     </div>
                  </div>
                  
                  <a href = "#" class = "floating-button color-teal"><i class = "icon icon-plus"></i></a>
                  <div class = "page-content">
                     <div class = "content-block">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                           nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                           eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                           qui officia deserunt mollit anim id est laborum.</p>
                        
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
                           quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia 
                           voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
                           ratione voluptatem sequi nesciunt.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod 
                           tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
                           nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore 
                           eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
                           qui officia deserunt mollit anim id est laborum.</p>
                        
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
                           incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
                           exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.Lorem ipsum dolor sit 
                           amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
                           magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
                           aliquip ex ea commodo consequat.Lorem ipsum dolor sit amet, consectetur adipiscing elit, 
                           sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                           quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                        
                        <p> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
                           fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
                           officia deserunt mollit anim id est laborum.</p>
                        
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
                           doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et 
                           quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas 
                           sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione 
                           voluptatem sequi nesciunt.Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
                           accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
                           veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem 
                           quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui 
                           ratione voluptatem sequi nesciunt.Sed ut perspiciatis unde  omnis iste natus error sit 
                           voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo 
                           inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam 
                           voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni 
                           dolores eos qui ratione voluptatem sequi nesciunt.</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 ({
            material: true
         });
      </script>
   </body>

</html>

輸出

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

將上面給出的 HTML 程式碼儲存為action_button_layout.html檔案，放在您的伺服器根目錄下。
以 https:///action_button_layout.html 的方式開啟此 HTML 檔案，輸出結果將如下所示。
此示例提供了一個在 UI 上以圓形浮動的浮動操作按鈕，並附加了操作，當您點選它時會顯示一些相關資訊。這裡，程式碼展示瞭如何在 UI 上新增浮動操作按鈕。

framework7_action_button.htm

列印頁面