- Barre de navigation simple.
- Barres de navigation dans l'entête.
- Barres de navigation dans le pied de page.
- Icônes dans la barre de navigation.
- Utilisation d'une bibliothèque externe d'icônes (ex : glyphish).
- Thémes pour les barres de navigation
Barre de navigation simple (navbar)
Contenu avec barre de navigation à 2 colonnes
jQuery Mobile dispose d'un widget barre de navigation très simple qui est utile pour fournir jusqu'à 5 boutons avec des icônes en option dans une barre, généralement au sein d'une entête ou pied de page. Il existe également une variante, que nous appeleront barre de navigation persistante, qui fonctionne davantage comme une barre d'onglets qui reste fixe pendant que vous naviguez de page en page.
Une barre de navigation est codée comme une liste de liens non ordonnés enveloppée dans un conteneur qui a l'attribut data-role="navbar". Pour définir l'un de ces liens à l'état actif (selected), ajoutez au lien class="ui-btn-active". Dans cet exemple, nous avons une barre de navigation à deux boutons en bas de page avec l'élément "Un" activé :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="deuxcolonnes"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 2 colonnes..</p> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">Une</a></li> <li><a href="b.html">Deux</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Les éléments de la barre de navigation sont définis afin de diviser l'espace de façon uniforme, ici chaque bouton occupe la moitié de la largeur de la fenêtre du navigateur :
Voir le résultat : Contenu avec barre de navigation à 2 colonnes.
Contenu avec barre de navigation à 3 colonnes
L'ajout d'un troisième élément répartira automatiquement chaque bouton sur 1/3 de la largeur de la fenêtre du navigateur :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="deuxcolonnes"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 3 colonnes..</p> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">Une</a></li> <li><a href="b.html">Deux</a></li> <li><a href="c.html">Trois</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Contenu avec barre de navigation à 3 colonnes.
Contenu avec barre de navigation à 4 colonnes
L'ajout d'un quatrième élément répartira automatiquement chaque bouton sur 1/4 de la largeur de la fenêtre du navigateur :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="deuxcolonnes"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 4 colonnes.</p> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">Une</a></li> <li><a href="b.html">Deux</a></li> <li><a href="c.html">Trois</a></li> <li><a href="d.html">Quatre</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Contenu avec barre de navigation à 4 colonnes.
Contenu avec barre de navigation à 5 colonnes
L'ajout d'un cinquième élément répartira automatiquement chaque bouton sur 1/5 de la largeur de la fenêtre du navigateur. Jusqu'à 5 éléments maximum peuvent tenir dans la largeur de la fenêtre du navigateur :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="deuxcolonnes"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 5 colonnes..</p> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">Une</a></li> <li><a href="b.html">Deux</a></li> <li><a href="c.html">Trois</a></li> <li><a href="d.html">Quatre</a></li> <li><a href="e.html">Cinq</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Contenu avec barre de navigation à 5 colonnes.
Contenu avec barre de navigation avec plus de 5 colonnes
Si plus de 5 éléments sont ajoutés, la barre de navigation sera tout simplement affichée sur plusieurs lignes :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page" id="deuxcolonnes"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 10 colonnes..</p> <div data-role="navbar"> <ul> <li><a href="a.html" class="ui-btn-active">Une</a></li> <li><a href="b.html">Deux</a></li> <li><a href="c.html">Trois</a></li> <li><a href="d.html">Quatre</a></li> <li><a href="e.html">Cinq</a></li> <li><a href="f.html">Six</a></li> <li><a href="g.html">Sept</a></li> <li><a href="h.html">Huit</a></li> <li><a href="i.html">Neuf</a></li> <li><a href="j.html">Dix</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Contenu avec barre de navigation à 10 colonnes.
En dernier recours, une barre de navigation comportant un seul élément sera affichée avec une largeur de 100%.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Modèle de page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <h1>Contenu de l´entête</h1> </div><!-- /header --> <div data-role="content"> <p>Contenu de la page avec barre de navigation à 1 colonne.</p> <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active">Une</a></li> </ul> </div><!-- /navbar --> </div> <div data-role="footer"> <h4>Pied de page</h4> </div><!-- /footer --> </div><!-- /page --> </body> </html>
Voir le résultat : Contenu avec barre de navigation à 1 colonne.
Barres de navigation dans l'entête
Si vous souhaitez ajouter une barre de navigation en haut de la page, vous pouvez toujours avoir un titre de page et des boutons. Il suffit d'ajouter le conteneur de la barre d'outils à l'intérieur du bloc d'entête (header), juste après le titre et les boutons dans l'ordre du code source.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Je suis l´entête de page</h1>
<a href="index.html" data-icon="gear" class="ui-btn-right">Options</a>
<div data-role="navbar">
<ul>
<li><a href="#">Une</a></li>
<li><a href="#">Deux</a></li>
<li><a href="#">Trois</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Entête de page (Header) avec barre de navigation à 3 colonnes.</p>
</div>
<div data-role="footer">
<h4>Contenu du pied</h4>
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Entête avec barre de navigation à 3 colonnes comportant chacune un bouton.
Barres de navigation dans le pied de page
Si vous souhaitez ajouter une barre de navigation en bas de la page, afin qu'elle agisse comme une barre d'onglets, il suffit d'ajouter le conteneur de la barre d'outils à l'intérieur du bloc du pied de page (footer) ayant un attribut data-role="footer".
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Je suis l´entête de page</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Pied de page (Footer) avec barre de navigation à 3 colonnes.</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#">Une</a></li>
<li><a href="#">Deux</a></li>
<li><a href="#">Trois</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Pied de page avec barre de navigation à 3 colonnes comportant chacune un bouton.
Icônes dans la barre de navigation
Icône placée au-dessus du texte du bouton
Des icônes peuvent être ajoutées dans les éléments d'une barre de navigation en ajoutant l'attribut data-icon en specifiant une icône pour mobile standard à chaque lien. Par défaut, les icônes sont ajoutées au-dessus du texte (équivalent de data-iconpos="top"). Les exemples suivants ajoutent des icônes à la barre de navigation située dans un pied de page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="iconehaut">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte un barre de navigation divisée en 3 colonnes, comportant chacune un bouton avec une icône placée au-dessus de l´intitulé.</p>
</div>
<div data-role="footer">
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">Sommaire</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favoris</a></li>
<li><a href="#" data-icon="gear">Configuration</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation avec icône placée au-dessus du texte du bouton.
Icône placée en-dessous du texte du bouton
La position de l'icône est définie sur le conteneur de la barre de navigation plutôt que sur chacun des liens afin de maitenir une cohérence visuelle. Par exemple, pour placer les icônes en-dessous des libellés du bouton, ajoutez l'attribut data-iconpos="bottom" au conteneur de la barre de navigation.
<div data-role="navbar" data-iconpos="bottom">
Cela entrainera un positionnement des icônes sous le libellé du bouton :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="iconehaut">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte un barre de navigation divisée en 3 colonnes, comportant chacune un bouton avec une icône placée au-dessus de l´intitulé.</p>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="bottom">
<ul>
<li><a href="#" data-icon="grid">Sommaire</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favoris</a></li>
<li><a href="#" data-icon="gear">Configuration</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation avec icône placée en-dessous du texte du bouton.
Icône placée à gauche du texte du bouton
Icône positionnée à gauche du libellé du bouton :
<div data-role="navbar" data-iconpos="left">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="iconehaut">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte un barre de navigation divisée en 3 colonnes, comportant chacune un bouton avec une icône placée au-dessus de l´intitulé.</p>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="left">
<ul>
<li><a href="#" data-icon="grid">Sommaire</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favoris</a></li>
<li><a href="#" data-icon="gear">Configuration</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation avec icône placée à gauche du texte du bouton.
Icône placée à droite du texte du bouton
Icône positionnée à droite du libellé du bouton :
<div data-role="navbar" data-iconpos="right">
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page" id="iconehaut">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte un barre de navigation divisée en 3 colonnes, comportant chacune un bouton avec une icône placée au-dessus de l´intitulé.</p>
</div>
<div data-role="footer">
<div data-role="navbar" data-iconpos="right">
<ul>
<li><a href="#" data-icon="grid">Sommaire</a></li>
<li><a href="#" data-icon="star" class="ui-btn-active">Favoris</a></li>
<li><a href="#" data-icon="gear">Configuration</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation avec icône placée à droite du texte du bouton.
Utilisation d'une bibliothèque externe d'icônes
Vous pouvez ajouter une des bibliothèques d'icônes populaires telle que Glyphish pour créer des onglets dont le style, proche d'iOS, utilise de grandes icônes placées au-dessus du libellé. Pour cela il est nécessaire d'utiliser des styles personnalisés faire pour lier et positionner les icônes dans la barre de navigation. Voici un exemple d'utilisation des icônes Glyphish et des styles personnalisés (voir le code source ci-dessous) dans notre barre de navigation :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
<style type="text/css">
.nav-glyphish-example .ui-btn .ui-btn-inner { padding-top: 40px !important; }
.nav-glyphish-example .ui-btn .ui-icon { width: 30px!important; height: 30px!important; margin-left: -15px !important; box-shadow: none!important; -moz-box-shadow: none!important; -webkit-box-shadow: none!important; -webkit-border-radius: none !important; border-radius: none !important; }
#chat .ui-icon { background: url(glyphish-icons/09-chat2.png) 50% 50% no-repeat; background-size: 24px 22px; }
#email .ui-icon { background: url(glyphish-icons/18-envelope.png) 50% 50% no-repeat; background-size: 24px 16px; }
#login .ui-icon { background: url(glyphish-icons/30-key.png) 50% 50% no-repeat; background-size: 12px 26px; }
#beer .ui-icon { background: url(glyphish-icons/88-beermug.png) 50% 50% no-repeat; background-size: 22px 27px; }
#coffee .ui-icon { background: url(glyphish-icons/100-coffee.png) 50% 50% no-repeat; background-size: 20px 24px; }
#skull .ui-icon { background: url(glyphish-icons/21-skull.png) 50% 50% no-repeat; background-size: 22px 24px; }
</style>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte une barre de navigation divisée en 5 colonnes, comportant chacune un bouton avec une icône provenant de la bibliothèque glyphish placée au-dessus de l'intitulé.</p>
</div>
<div data-role="footer" class="nav-glyphish-example">
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
<ul>
<li><a href="#" id="chat" data-icon="custom">Chat</a></li>
<li><a href="#" id="email" data-icon="custom">Email</a></li>
<li><a href="#" id="skull" data-icon="custom">Danger</a></li>
<li><a href="#" id="beer" data-icon="custom">Bière</a></li>
<li><a href="#" id="coffee" data-icon="custom">Café</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation utilisant les icônes glyphish.
Icônes de Joseph Wain / glyphish.com. Sous licence Creative Commons Attribution 3.0 United States License.
Théme pour les barres de navigation
Les barres de navigation héritent du thème de leur conteneur parent, tout comme les boutons. Si une barre de navigation est placée une dans barre d'outils en-tête ou pied de page, elle héritera du thème par défaut (A) de la barre d'outils pour les bars, sauf si vous la définissez dans le balisage.
Voici quelques exemples de barres de navigation dans diverses thèmes de conteneur que héritent automatiquement de la lettre de leurs parents. Notez que dans ces exemples, au lieu d'utiliser un attribut de data-theme, nous allons ajouter manuellement les classes de thème pour appliquer le thème du corps (ui-body-a) et la classe pour ajouter le padding du corps standard (ui-body), mais l'héritage fonctionne de la même façon :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Barre de navigation placée dans un conteneur et héritant de son thème.</p>
<div class="ui-body-a ui-body">
<h3>Swatch A</h3>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">A</a></li>
<li><a href="#" data-icon="star">B</a></li>
<li><a href="#" data-icon="gear">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><!-- /navbar -->
</div><!-- /container -->
<div class="ui-body-d ui-body">
<h3>Swatch B</h3>
<div data-role="navbar">
<ul>
<li><a href="#" data-icon="grid">A</a></li>
<li><a href="#" data-icon="star">B</a></li>
<li><a href="#" data-icon="gear">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><!-- /navbar -->
</div><!-- /container -->
</div>
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barres de navigations avec héritage des thèmes.
Pour définir la couleur de thème d'un élément de la barre de navigation, ajoutez l'attribut data-theme à chaque lien et indiquez la lettre d'un thème. Notez que'lapplication d'un thème au conteneur de la barre de navigation n'est pas supporté.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Modèle de page</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Contenu de l´entête.</h1>
</div><!-- /header -->
<div data-role="content">
<p>Contenu de la page.</p>
<p>Le pied de page comporte une barre de navigation divisée en 5 colonnes, comportant chacune un bouton avec une icône placée au-dessus de l'intitulé et un thème différent pour chaque bouton.</p>
<div data-role="navbar" class="nav-glyphish-example" data-grid="d">
</div>
<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="star" data-theme="b">B</a></li>
<li><a href="#" data-icon="gear" data-theme="c">C</a></li>
<li><a href="#" data-icon="arrow-l" data-theme="d">D</a></li>
<li><a href="#" data-icon="arrow-r" data-theme="e">E</a></li>
</ul>
</div><!-- /navbar -->
</div><!-- /footer -->
</div><!-- /page -->
</body>
</html>
Voir le résultat : Exemple de barre de navigation comportant 5 boutons aux styles et icônes différents.