Framework7 - 形态转换为弹出窗口

上一个
下一个

描述

如果您想在点击浮动操作按钮时打开弹出窗口，则可以使用 floating-button-to-popover 类。

示例

以下示例指定了使用形态转换（以流畅的动画创建内容的外观）在弹出窗口中呈现内容 −

<!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>Morph To Popover</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">Morph To Popover</div>
                     </div>
                  </div>
                  
                  <a href = "#" class = "floating-button floating-button-to-popover open-popover color-orange"><i class = "icon icon-form-email"></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>
      
      <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_morph.html 文件，并将其保存在服务器根文件夹中。

  • 打开此 HTML 文件，网址为 https://127.0.0.1/action_button_morph.html，输出将如下所示。

  • 当点击浮动操作按钮时，形态转换为弹出窗口会打开不同类型的链接，并在您点击它时显示一些相关信息。在这里，代码展示了如何在 UI 上通过点击浮动操作按钮来打开弹出窗口，从而添加更多转换。

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