Framework7 - Popover dynamique

La description

Le popover peut être créé dynamiquement à l'aide des méthodes d'application associées, comme indiqué ci-dessous -

  • myApp.popover(popoverHTML, target, removeOnClose) - Cette méthode accepte les arguments suivants

    • popoverHTML - C'est la chaîne HTML du popover.

    • target- C'est un HTMLElement ou une chaîne (avec CSS Selector) de l'élément cible utilisé pour définir la position du popover autour. C'est un argument indispensable .

    • removeOnClose- Il est de type booléen et est un argument optionnel. Par défaut, il est défini sur true , ce qui supprime le popover du DOM lorsqu'il est fermé.

Le HTMLElement du popover créé dynamiquement sera renvoyé par cette méthode.

Exemple

L'exemple suivant montre l'utilisation du popover dynamique dans 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>

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous popover_dynamic.html fichier dans le dossier racine de votre serveur.

  • Ouvrez ce fichier HTML en tant que http: //localhost/popover_dynamic.html et la sortie s'affiche comme indiqué ci-dessous.

  • Vous pouvez créer une dynamique sur le popover en cliquant sur le premier lien. De même, pour créer des popover de menus dynamiques, cliquez sur le deuxième lien.

  • Lorsque vous cliquez sur les liens, un popover dynamique est créé et vous pouvez fermer le popover en cliquant à l'extérieur.

Lorsque vous cliquez sur les liens, le popover dynamique s'ouvre et cliquez sur la souris à l'extérieur pour fermer le popover.