Framework7 - Superposition de sélecteur dynamique modal

La description

Vous pouvez également créer un sélecteur modal dynamique en utilisant ses méthodes HTML to App. Il utilise deux paramètres -

  • pickerHTML - Il contient un élément de chaîne du sélecteur modal.

  • removeOnClose- Il inclut une valeur booléenne, qui sera supprimée du DOM lorsque vous fermez le sélecteur. Par défaut, il inclut la vraie valeur.

Exemple

L'exemple suivant illustre l'utilisation du sélecteur dynamique modal 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 Picker Modal</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="navbar">
               <div class="navbar-inner">
                  <div class="center sliding">Dynamic Picker Modal</div>
               </div>
            </div>
            <div class="pages">
               <div data-page="index" class="page navbar-fixed">
                  <div class="page-content">
                     <div class="content-block">
                        <p><a href="#" class="create-modal-picker">Open Picker</a></p>
                        <p><a href="#" class="close-picker">Close Picker</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>
         // Here you can initialize the app
         var myApp = new Framework7();

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

         // Add the view
         var mainView = myApp.addView('.view-main', {
         // enable the dynamic navbar for this view:
            dynamicNavbar: true
         });

         $$('.create-modal-picker').on('click', function () {
           //Here you can check whether we have already opened picker or not
            if ($$('.picker-modal.modal-in').length > 0) {
               myApp.closeModal('.picker-modal.modal-in');
            }

            myApp.pickerModal(
               '<div class="picker-modal">' +
               '<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">' +
               '<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>
   </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_dynamic.html fichier dans le dossier racine de votre serveur.

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