jQuery Mobile - Thèmes Navbars

La description

Tout comme les boutons, l'échantillon de thème sera hérité par les barres de navigation de leur conteneur parent.

Chaque fois que la barre de navigation est positionnée dans la barre d'outils d'en-tête ou de pied de page, la nuance de barre d'outils par défaut a sera héritée à moins qu'elle ne soit définie dans le balisage.

Vous pouvez ajouter swatch classespour appliquer l'échantillon de corps (ui-body-a et ui-body-b). Vous pouvez aussi utiliserdata-theme attribut pour définir la couleur du thème pour les éléments individuels de la barre de navigation et spécifier une nuance de thème.

La classe ui-body ajoute le rembourrage de corps standard.

Exemple

L'exemple suivant montre l'utilisation des thèmes de la barre de navigation dans jQuery Mobile.

<!DOCTYPE html>
<html>
   <head>
      <title>Navbars Themes</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js"></script>
      <script src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
   </head>

   <body>
      <div class = "ui-body-a ui-body">
         <h3>Swatch "a"</h3>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "star">A</a></li>
               <li><a href = "#" data-icon = "gear">B</a></li>
               <li><a href = "#" data-icon = "grid">C</a></li>
               <li><a href = "#" data-icon = "arrow-l">D</a></li>
               <li><a href = "#" data-icon = "arrow-r">E</a></li>
            </ul>
         </div>
      </div>
      
      <div class = "ui-body-b ui-body">
         <h3>Swatch "b"</h3>
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "star">A</a></li>
               <li><a href = "#" data-icon = "gear">B</a></li>
               <li><a href = "#" data-icon = "grid">C</a></li>
               <li><a href = "#" data-icon = "arrow-l">D</a></li>
               <li><a href = "#" data-icon = "arrow-r">E</a></li>
            </ul>
         </div>
      </div>

      <h3><i>data-theme</i> attribute</h3>
      <div data-role  =  "footer">
         <div data-role = "navbar">
            <ul>
               <li><a href = "#" data-icon = "grid" data-theme = "a">A</a></li>
               <li><a href = "#" data-icon = "grid" data-theme = "b">B</a></li>
            </ul>
         </div>
      </div>
      
   </body>
</html>

Production

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

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

  • Ouvrez ce fichier HTML en tant que http: //localhost/navbar_themes.html et la sortie suivante sera affichée.