Framework7 - Ouvrir et fermer les panneaux depuis HTML

La description

Pour ouvrir et fermer le panneau, ajoutez -panneau ouvert et à proximité du panneau des classes respectivement à tout élément HTML. Par défaut, le panneau de gauche s'ouvre / se ferme lorsque votre application comporte deux panneaux. Vous pouvez spécifier quel panneau doit s'ouvrir / se fermer en ajoutant l' attribut data-panel = "left" .

Exemple

L'exemple suivant illustre l'utilisation des panneaux d'ouverture et de fermeture 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>Open and Close Panels</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 = "panel-overlay"></div>
      
      <div class = "panel panel-left panel-reveal">
         <div class = "content-block">
            <p>Left Panel content</p>
            <p><a href = "#" data-panel = "right" class = "open-panel">Open Right Panel</a></p>
            <p><a href = "#" class = "close-panel">Close me</a></p>
         </div>
      </div>
      
      <div class = "panel panel-right panel-cover">
         <div class = "content-block">
            <p>Right Panel content</p>
            <p><a href = "#" data-panel = "left" class = "open-panel">Open Left Panel</a></p>
            <p><a href = "#" class = "close-panel">Close me</a></p>
         </div>
      </div>
      
      <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">Side Panels</div>
                        <div class = "right"> </div>
                     </div>
                  </div>
                  
                  <div class = "page-content">
                     <div class = "content-block">
                        <p> <a href = "#" class = "open-panel">Open Left Panel</a></p>
                        <p> <a href = "#" data-panel = "right" class = "open-panel">Open Right Panel</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();
      </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 sidepanels_open_close_fromHTML.html fichier dans le dossier racine de votre serveur.

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

  • Cet exemple affiche le panneau gauche lorsque vous cliquez sur le lien Ouvrir le panneau gauche et affiche le panneau droit lorsque vous cliquez sur le lien Ouvrir le panneau droit .