Framework7 - Popover dinámico

Descripción

El popover se puede crear dinámicamente utilizando los métodos de aplicación relacionados como se muestra a continuación:

myApp.popover(popoverHTML, target, removeOnClose) - Este método acepta los siguientes argumentos
- popoverHTML - Es la cadena HTML de popover.
- target- Es un HTMLElement o cadena (con CSS Selector) del elemento de destino utilizado para establecer la posición del popover alrededor. Es un argumento obligatorio .
- removeOnClose- Es de tipo booleano y es un argumento opcional. De forma predeterminada, se establece en verdadero , lo que elimina el popover de DOM cuando se cierra.

Este método devolverá el elemento HTMLE del popover creado dinámicamente.

Ejemplo

El siguiente ejemplo demuestra el uso de popover dinámico 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>Dynamic 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">
   </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 create-menus">Menus</a></div>
                        <div class="center">Dynamic Popover</div>
                        <div class="right"> <a href="#" class="link create-about">About</a></div>
                     </div>
                  </div>
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="create-about">Create About Popover</a></p>
                        <p><a href="#" class="create-menus">Create Menus 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="create-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="create-menus">Menus</a>.</p>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
      <style>.popover{width:300px;}</style>
      <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;
         $$('.create-about').on('click', function () {
           var clickedLink = this;
           var popoverHTML = '<div class="popover">'+
                               '<div class="popover-inner">'+
                                 '<div class="content-block">'+
                                   '<p>About Popover created dynamically.</p>'+
                                   '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac diam ac quam euismod porta vel a nunc.</p>'+
                                 '</div>'+
                               '</div>'+
                             '</div>'
           myApp.popover(popoverHTML, clickedLink);
         });

         $$('.create-menus').on('click', function () {
           var clickedLink = this;
           var popoverHTML = '<div class="popover">'+
                               '<div class="popover-inner">'+
                                 '<div class="list-block">'+
                                   '<ul>'+
                                   '<li><a href="#" class="item-link list-button">Menus 1</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 2</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 3</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 4</li>'+
                                   '<li><a href="#" class="item-link list-button">Menus 5</li>'+
                                   '</ul>'+
                                 '</div>'+
                               '</div>'+
                             '</div>'
           myApp.popover(popoverHTML, clickedLink);
         });
      </script>
   </body>
</html>

Salida

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

Guarde el código HTML proporcionado anteriormente como popover_dynamic.html archivo en la carpeta raíz de su servidor.
Abra este archivo HTML como http: //localhost/popover_dynamic.html y el resultado se muestra como se muestra a continuación.
Puede crear dinámicas sobre popover haciendo clic en el primer enlace. De manera similar, para crear menús emergentes dinámicos, haga clic en el segundo enlace.
Cuando haces clic en los enlaces, se crea un popover dinámico y puedes cerrarlo haciendo clic fuera.

Al hacer clic en los enlaces, se abrirá la ventana emergente dinámica y haga clic con el mouse en el exterior para cerrar la ventana emergente.

↰ Previous page