Framework7 - Nascondere la barra degli strumenti

Descrizione

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

esempio

Il seguente esempio dimostra l'uso di nascondere la barra degli strumenti Framework7 -

Innanzitutto, creeremo una pagina HTML chiamata toolbar_hiding.html.

<!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 Hiding</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 Hiding</div>
               </div>
            </div>
            
            <div class = "pages navbar-through">
               <div data-page = "index" class = "page">
                  <div class = "page-content">
                  
                     <div class = "list-block">
                        <ul>
                           <li>
                              <a href = "/framework7/src/toolbar-services.html" class = "link">
                                 <div class = "item-content">
                                    <div class = "item-inner">
                                       <div class = "item-title">Go to Services page</div>
                                    </div>
                                 </div>
                              </a>
                           </li>
                        </ul>
                     </div>
                     
                     <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. 
                        Integer sit amet lacus eget ipsum pulvinar interdum. Proin semper turpis 
                        sed placerat dapibus. Sed iaculis id nibh a viverra. Sed vitae tellus sed 
                        purus lacinia dignissim. 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>

Quindi, crea un'altra pagina HTML, ad es toolbar-services.html come mostrato di seguito -

<div class = "navbar">
   <div class = "navbar-inner">
      <div class = "center sliding">Services</div>
   </div>
</div>

<div class = "pages">
   <div data-page = "services" class = "page no-toolbar">
      <div class = "page-content">
         <div class = "content-block">
            <br>
            
            <h2>Our Services</h2>
            <ul>
               <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
               eiusmod tempor incididunt ut labore.</li>
               <li>Ut enim ad minim veniam, quis nostrud exercitation ullamco 
               laboris.</li>
               <li> Duis aute irure dolor in reprehenderit in voluptate velit esse 
               cillum dolore eu fugiat nulla pariatur.</li>
               <li>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit 
               aut fugit.</li>
               <li>At vero eos et accusamus et iusto odio dignissimos ducimus qui 
               blanditiis praesentium voluptatum deleniti atque corrupti quos 
               dolores et.</li>
               <li>Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil 
               impedit quo minus id.</li>
            </ul>
            
            <p>Go <a href = "#" class = "back">back</a> to home page.</p>
         </div>
      </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>

produzione

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

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

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

  • Quando esegui il codice, fai clic sul collegamento della pagina Servizi, che nasconderà automaticamente la barra degli strumenti nella pagina.