Framework7 - Abrir y cerrar popover usando JavaScript

Descripción

El popover también se puede abrir y cerrar con JavaScript utilizando los métodos de la aplicación relacionados como se muestra a continuación:

myApp.popover(popover, target) - Se usa para abrir el popover alrededor del elemento de destino y acepta los siguientes argumentos -
- popover- Es un argumento obligatorio , que es un HTMLElement o una cadena (con CSS Selector) de popover para abrir.
- target- Es un argumento obligatorio , que es un HTMLElement o una cadena (con CSS Selector) del elemento de destino utilizado para establecer la posición del popover alrededor de este elemento.
myApp.closeModal(popover)- Se usa para cerrar el popover y acepta el argumento del popover , que es un HTMLElement o una cadena (con CSS Selector) . Es un argumento opcional y si no se especifica, se cerrará cualquiera de los popover abiertos.

Si abre popover usando JavaScript, el elemento de destino debe pasarse para configurar el popover alrededor del elemento de destino.

Ejemplo

El siguiente ejemplo demuestra el uso de abrir y cerrar popover usando JavaScript en 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>

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código HTML proporcionado anteriormente como popover_open_close_js.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/popover_open_close_js.html y la salida se muestra como se muestra a continuación.
Al hacer clic en el primer enlace, se abre la ventana emergente de menús con varios elementos de menú. Del mismo modo, cuando hace clic en el segundo enlace, se abre la ventana emergente acerca de.
El menú y las ventanas emergentes de información también se abren haciendo clic en el menú y las opciones de información. El popover se abrirá y cerrará alrededor del elemento de destino usando javascript.

↰ Previous page