Framework7 - Convertir la feuille d'action en popover

La description

Popover ne peut pas être utilisé sur les téléphones (iPhone) et Action Sheet sur les tablettes, vous pouvez donc utiliser la syntaxe ActionSheet étendue, qui convertira automatiquement Action Sheet en popover sur les tablettes. Vous pouvez utiliser les méthodes ci-dessous -

  • myApp.actions(target, groups) - Il est utilisé pour créer et ouvrir la feuille d'action (ou popover sur les tablettes) avec un nombre défini de groupes de boutons.

    • Ou

  • myApp.actions(target, buttons) - Il est utilisé pour créer et ouvrir la feuille d'action (ou popover sur les tablettes) avec un groupe et des boutons.

    • target- C'est un HTMLElement ou une chaîne (avec CSS Selector) de l'élément cible. C'est un paramètre obligatoire.

    • groups- C'est un tableau de groupes où chaque groupe a un tableau de boutons.

    • buttons- C'est un tableau de boutons dans lequel il y aura un groupe .

Exemple

L'exemple suivant montre comment convertir la feuille d'action en popover dans le Framework7, qui convertit la feuille d'action en popover lorsque vous cliquez sur le lien -

<!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>Convert Action Sheet to 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"> </div>
                        <div class = "center">Action Sheet</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "ac-1">Convert Action Sheet to Popover</a></p>
                     </div>
                  </div>
                  
               </div>
            </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;

         $$('.ac-1').on('click', function (e) {
            var target = this;
            var buttons = [
               {
                  text: 'Button 1'
               },
               {
                  text: 'Button 2'
               }
            ];
            myApp.actions(target, buttons);
         });

      </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 actionsheet_convert_to_popover.html fichier dans le dossier racine de votre serveur.

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

  • Cliquez sur l'option pour convertir la feuille d'action en popover automatiquement sur les tablettes. Lorsque vous cliquez dessus, une fenêtre s'ouvre avec deux options comme indiqué ci-dessous.