Framework7 - Barre degli strumenti

Descrizione

La barra degli strumenti fornisce un facile accesso ad altre pagine utilizzando gli elementi di navigazione nella parte inferiore dello schermo.

È possibile utilizzare la barra degli strumenti in due modi, come specificato nella tabella:

S.No Tipi di barra degli strumenti e descrizione
1 Nascondi barra degli strumenti

È possibile nascondere automaticamente la barra degli strumenti quando si caricano le pagine utilizzando il file no-toolbar classe alla pagina caricata.
2 Barra degli strumenti inferiore

Posiziona la barra degli strumenti nella parte inferiore della pagina utilizzando il toolbar-bottom classe.

Metodi di barra degli strumenti

I seguenti metodi disponibili possono essere utilizzati con le barre degli strumenti:

S.No Metodi e descrizione della barra degli strumenti
1

myApp.hideToolbar(toolbar)

Nasconde la barra degli strumenti specificata.
2

myApp.showToolbar(toolbar)

Mostra la barra degli strumenti specificata.
3

view.hideToolbar()

Nasconde la barra degli strumenti specificata nella vista.
4

view.showToolbar()

Mostra la barra degli strumenti specificata nella vista.

Esempio

L'esempio seguente mostra l'uso del layout della barra degli strumenti in Framework7.

Innanzitutto, creeremo una pagina HTML chiamata toolbar.html come mostrato di seguito -

<!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>Toolbar Layout</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">Toolbar Layout</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page with-subnavbar">
                  <div class = "page-content">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                     
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
                        Suspendisse at nibh felis. Nunc consequat diam et tellus tempor gravida. 
                        Donec hendrerit aliquet risus, ut tempor purus dictum sit amet. Aenean 
                        sagittis interdum leo in molestie. Aliquam sodales in diam eu consectetur. 
                        Sed posuere a orci id imperdiet.</p>
                  </div>
               </div>
            </div>
            
            <div class = "toolbar">
               <div class = "toolbar-inner">
                  <a href = "#" class = "link">Link 1</a>
                  <a href = "#" class = "link">Link 2</a>
                  <a href = "#" class = "link">Link 3</a>
               </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 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
         });
      </script>
   </body>

</html>

Ora inizializza la tua app e le viste nel file JS personalizzato toolbar.js.

Produzione

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

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

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