Framework7 - Barres d'outils

La description

La barre d'outils fournit un accès facile à d'autres pages en utilisant les éléments de navigation en bas de l'écran.

Vous pouvez utiliser la barre d'outils de deux manières, comme indiqué dans le tableau -

S. Non Types de barres d'outils et description
1 Masquer la barre de tâches

Vous pouvez masquer la barre d'outils automatiquement lorsque vous chargez les pages en utilisant le no-toolbar classe à la page chargée.
2 Barre d'outils inférieure

Placez la barre d'outils au bas de la page en utilisant le toolbar-bottom classe.

Méthodes de la barre d'outils

Les méthodes disponibles suivantes peuvent être utilisées avec les barres d'outils -

S. Non Méthodes et description de la barre d'outils
1

myApp.hideToolbar(toolbar)

Il masque la barre d'outils spécifiée.
2

myApp.showToolbar(toolbar)

Il montre la barre d'outils spécifiée.
3

view.hideToolbar()

Il masque la barre d'outils spécifiée dans la vue.
4

view.showToolbar()

Il affiche la barre d'outils spécifiée dans la vue.

Exemple

L'exemple suivant illustre l'utilisation de la disposition de la barre d'outils dans Framework7.

Tout d'abord, nous allons créer une page HTML appelée toolbar.html comme indiqué ci-dessous -

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

Maintenant, initialisez votre application et vos vues dans le fichier JS personnalisé toolbar.js.

Production

Exécutons les étapes suivantes pour voir comment fonctionne le code donné ci-dessus -

  • Enregistrez le code HTML ci-dessus sous toolbar.html fichier dans le dossier racine de votre serveur.

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