Framework7 - Popover Dinâmico

Descrição

O popover pode ser criado dinamicamente usando os métodos de aplicativo relacionados, conforme mostrado abaixo -

myApp.popover(popoverHTML, target, removeOnClose) - Este método aceita os seguintes argumentos
- popoverHTML - É a string HTML do popover.
- target- É um HTMLElement ou string (com seletor CSS) do elemento alvo usado para definir a posição do popover. É um argumento obrigatório .
- removeOnClose- É do tipo booleano e é um argumento opcional. Por padrão, é definido como verdadeiro , o que remove o popover do DOM quando fechado.

O HTMLElement do popover criado dinamicamente será retornado por este método.

Exemplo

O exemplo a seguir demonstra o uso de popover dinâmico 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>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>

Resultado

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

Salve o código HTML fornecido acima como popover_dynamic.html arquivo na pasta raiz do servidor.
Abra este arquivo HTML como http: //localhost/popover_dynamic.html e a saída é exibida conforme mostrado abaixo.
Você pode criar uma dinâmica sobre o popover clicando no primeiro link. Da mesma forma, para criar menus popover dinâmicos, clique no segundo link.
Ao clicar nos links, um popover dinâmico é criado e você pode fechar o popover clicando fora.

Quando você clica nos links, o popover dinâmico é aberto e clique com o mouse fora para fechar o popover.

↰ Previous page