Framework7 - Abrir e fechar popover usando JavaScript

Descrição

O popover também pode ser aberto e fechado com JavaScript usando os métodos de aplicativo relacionados, conforme mostrado abaixo -

myApp.popover(popover, target) - É usado para abrir o popover em torno do elemento de destino e aceita os seguintes argumentos -
- popover- É um argumento obrigatório , que é um HTMLElement ou string (com seletor CSS) de popover para abrir.
- target- É um argumento obrigatório , que é um HTMLElement ou string (com seletor CSS) do elemento de destino usado para definir a posição do popover em torno desse elemento.
myApp.closeModal(popover)- É usado para fechar o popover e aceita o argumento popover , que é um HTMLElement ou string (com seletor CSS) . É um argumento opcional e, se não for especificado, qualquer um dos popover abertos será fechado.

Se você abrir o popover usando JavaScript, o elemento de destino precisa ser passado para definir o popover em torno do elemento de destino.

Exemplo

O exemplo a seguir demonstra o uso de abrir e fechar popover usando JavaScript no 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>Open and close Popover Using JavaScript</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 = "pages">
               <div data-page = "home" class = "page navbar-fixed">
                  
                  <div class = "navbar">
                     <div class = "navbar-inner">
                        <div class = "left"> <a href = "#" class = "link open-menus">Menus</a></div>
                        <div class = "center">Open and close Popover Using JavaScript</div>
                        <div class = "right"> <a href = "#" class = "link open-about">About</a></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "open-menus">Open menus Popover</a></p>
                        
                        <p><a href = "#" class = "open-about">Open About Popover</a></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 
                           <a href = "#" class = "open-about">About</a> nibh iaculis quis. 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 <a href = "#" class = "open-menus">Menus</a>.</p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <style>.popover{width:200px;}</style>
      <div class = "popover popover-about">
         <div class = "popover-angle"></div>
            <div class = "popover-inner">
            <div class = "content-block">
               <p>About</p>
               
               <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
               Quisque ac diam ac quam euismod porta vel a nunc.</p>
            </div>
         </div>
      </div>
      
      <div class = "popover popover-menus">
         <div class = "popover-angle"></div>
         <div class = "popover-inner">
            <div class = "list-block">
               <ul>
                  <li><a href = "#" class = "list-button item-link">Menu 1</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 2</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 3</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 4</a></li>
                  <li><a href = "#" class = "list-button item-link">Menu 5</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();
         var $$ = Dom7;

         $$('.open-about').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-about', clickedLink);
         });

         $$('.open-menus').on('click', function () {
            var clickedLink = this;
            myApp.popover('.popover-menus', clickedLink);
         });
      </script>
   </body>

</html>

Resultado

Vamos realizar as seguintes etapas para ver como funciona o código fornecido acima -

Salve o código HTML fornecido acima como popover_open_close_js.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/popover_open_close_js.html e a saída é exibida conforme mostrado abaixo.
Quando você clica no primeiro link, a janela popover dos menus é aberta com vários itens de menu. Da mesma forma, quando você clica no segundo link, a janela popover sobre é aberta.
O menu e as janelas popover sobre também abrem clicando nas opções do menu e sobre. O popover será aberto e fechado em torno do elemento de destino usando javascript.

↰ Previous page