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://127.0.0.1/action_button_speed_dial.html，输出结果如下所示。

  • 当您点击浮动操作按钮时，会调用不同类型的速拨操作，并在您点击时显示一些相关信息。这里，代码展示了如何使用浮动操作按钮在UI上创建速拨操作。

framework7_action_button.htm
打印页面
上一页
下一页
广告