Framework7 - 浮動操作按鈕速撥

上一頁
下一頁

描述

您可以使用速撥點選浮動操作按鈕來呼叫相關的操作。速撥操作中可以使用最少3個，最多6個操作。

示例

以下示例指定了按鍵時不同型別的速撥操作：

<!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>Floating Action Button Speed Dial</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">Speed Dial</div>
                     </div>
                  </div>
                  
                  <div class = "speed-dial">
                     <a href = "#" class = "floating-button color-orange"><i class = "icon icon-plus"></i><i class = "icon icon-close"></i></a>
                        <div class = "speed-dial-buttons">
                        <a href = "#" class = "color-orange"><i class = "icon icon-form-email"></i></a><a href = "#" class = "color-orange"><i class = "icon icon-form-calendar"></i></a><a href = "#" class = "color-orange"><i class = "icon icon-form-comment"></i></a>
                     </div>
                  </div>
                  
                  <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>
      
      <div style = "width:250px%" class = "popover demo-popover">
         <div class = "popover-inner">
            <div class = "list-block">
               <ul>
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 1</div>
                        </div>
                     </a>
                  </li>
                  
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 2</div>
                        </div>
                     </a>
                  </li>
                  
                  <li>
                     <a href = "#" class = "item-content item-link">
                        <div class = "item-inner">
                           <div class = "item-title">Mail 3</div>
                        </div>
                     </a>
                  </li>
               </ul>
            </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_speed_dial.html檔案到您的伺服器根目錄。

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

  • 當您點選浮動操作按鈕時，會呼叫不同型別的速撥操作，並在您點選時顯示一些相關資訊。這裡，程式碼展示瞭如何使用浮動操作按鈕在UI上建立速撥操作。

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