Framework7 - Overlay Picker Modal utilisant JavaScript

La description

Vous pouvez ouvrir et fermer le modal du sélecteur à l'aide du code JavaScript. Vous pouvez utiliser la méthode pickerModal (sélecteur) pour ouvrir le sélecteur modal et closeModal (sélecteur) pour fermer le sélecteur modal.

Exemple

L'exemple suivant affiche le mode d'ouverture et de fermeture du sélecteur à l'aide de JavaScript 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>Picker Modal 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"> </div>
                        <div class = "center">Picker Modal using JavaScript</div>
                        <div class = "right"> <a href = "#" class = "link open-picker">Picker</a></div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p><a href = "#" class = "open-picker">Open the Page</a></p>
                        <p><a href = "#" class = "close-picker">Close the Page</a></p>
                     </div>
                  </div>
                  
               </div>
            </div>
         </div>
      </div>
      
      <div class = "picker-modal picker_val">
         <div class = "toolbar">
            <div class = "toolbar-inner">
               <div class = "left"></div>
               <div class = "right"><a href = "#" class = "close-picker">Ok</a></div>
            </div>
         </div>
         
         <div class = "picker-modal-inner">
            <div class = "content-block">
               <h4>Welcome to Framework7!!!</h4>
               <p>Framework7 - is a free and open source mobile HTML framework to develop hybrid mobile 
               apps or web apps with iOS & Android native look and feel. It is also an indispensable prototyping
               apps tool to show working app prototype as soon as possible in case you need to.</p>
            </div>
         </div>
      </div>

      <script type = "text/javascript" 
         src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
         
      <script>
         // Here you can initialize the app
         var myApp = new Framework7();

         //If your using custom DOM library, then save it to $$ variable
         var $$ = Dom7;

         $$('.open-picker').on('click', function () {
            myApp.pickerModal('.picker_val')
         });
         
         $$('.close-picker').on('click', function () {
            myApp.closeModal('.picker_val')
         });
      </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 picker_modal_using_javascript.html fichier dans le dossier racine de votre serveur.

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

  • Cliquez sur le lien «Ouvrir la page» pour ouvrir le modal de sélection. La page peut également être ouverte en cliquant sur le sélecteur de lien affiché en haut à droite.

  • Le modal de sélection peut être fermé en cliquant sur l'option «Fermer la page». Le modal du sélecteur est ouvert et fermé à l'aide de code javascript.