Framework7 - Eventi del pannello

Descrizione

Per rilevare come un utente interagisce con il pannello, puoi utilizzare gli eventi del pannello. Può anche essere usato per fare qualcosa in JS ogni volta che il pannello viene aperto / chiuso.

La tabella seguente elenca gli eventi supportati da Framework7 -

S.No Descrizione dell'evento Bersaglio
1

open

Ogni volta che il pannello inizia la sua animazione di apertura, questo evento verrà attivato.

Elemento del pannello

<div class = "panel">
2

opened

Ogni volta che il pannello completa la sua animazione di apertura, questo evento verrà attivato.

Elemento del pannello

<div class = "panel">
3

close

Ogni volta che viene avviata l'animazione di chiusura del pannello, questo evento verrà attivato.

Elemento del pannello

<div class = "panel">
4

closed

Ogni volta che l'animazione di chiusura del pannello viene completata, questo evento verrà attivato.

Elemento del pannello

<div class = "panel">

Esempio

L'esempio seguente mostra gli eventi del pannello in Framework7. L'esempio rileva l'interazione dell'utente con il pannello e visualizza i messaggi di evento di conseguenza.

<!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>

Produzione

Eseguiamo i seguenti passaggi per vedere come funziona il codice sopra indicato:

  • Salva il codice HTML sopra indicato come sidepanels_events.html file nella cartella principale del server.

  • Apri questo file HTML come http: //localhost/sidepanels_events.html e l'output viene visualizzato come mostrato di seguito.

  • Questo esempio visualizza il pannello di sinistra quando si fa clic sul collegamento Apri pannello sinistro e visualizza il pannello di destra quando si fa clic sul collegamento Apri pannello destro e l'evento del pannello verrà attivato quando le statistiche del pannello si aprono e chiudono l'animazione.