Framework7 - Événements du panel

La description

Pour détecter la manière dont un utilisateur interagit avec le panneau, vous pouvez utiliser les événements du panneau. Il peut également être utilisé pour faire quelque chose dans JS chaque fois que le panneau est ouvert / fermé.

Le tableau suivant répertorie les événements pris en charge par Framework7 -

S. Non Description de l'évenement Cible
1

open

Chaque fois que le panneau commence son animation d'ouverture, cet événement sera déclenché.

Élément de panneau

<div class = "panel">
2

opened

Chaque fois que le panneau termine son animation d'ouverture, cet événement est déclenché.

Élément de panneau

<div class = "panel">
3

close

À chaque fois que l'animation de fermeture du panneau est lancée, cet événement sera déclenché.

Élément de panneau

<div class = "panel">
4

closed

À la fin de l'animation de fermeture du panneau, cet événement sera déclenché.

Élément de panneau

<div class = "panel">

Exemple

L'exemple suivant illustre les événements de panneau dans le Framework7. L'exemple détecte l'interaction de l'utilisateur avec le panneau et affiche les messages d'événement en conséquence.

<!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>Panel Events</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">
            <h2>Left Panel content</h2>
            <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">
            <h2>Right Panel content</h2>
            <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 Panel Events</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();

         var $$ = Dom7;

         $$('.panel-left').on('opened', function () {
            myApp.alert('Left panel opened!!');
         });
         
         $$('.panel-left').on('close', function () {
            myApp.alert('Left panel is closing!!');
         });
         
         $$('.panel-right').on('open', function () {
            myApp.alert('Right panel is opening!!');
         });
         
         $$('.panel-right').on('closed', function () {
            myApp.alert('Right panel closed!!');
         });
      </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_events.html fichier dans le dossier racine de votre serveur.

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

  • Cet exemple affiche le panneau de gauche lorsque vous cliquez sur le lien Ouvrir le panneau de gauche et affiche le panneau de droite lorsque vous cliquez sur le lien Ouvrir le panneau de droite et l'événement de panneau sera déclenché lors de l'animation d'ouverture et de fermeture des statistiques du panneau.