Barres d'outils jQuery Mobile

Barres d'outils jQuery Mobile

Tool bar elements are often placed in the header and footer to achieve "visited" navigation:

Title bar

The header usually contains the header title/LOGO or one to two buttons (usually home, options, or search buttons).

You can add buttons to the left or / and right of the header.

The following code will add a button to the left of the header title text and another button to the right:

Exemple

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to my homepage</h1>
  <a href="#" data-role="button">Search</a>
</div>

Essayez-le vous-même

The following code will add a button to the left of the header title:

<div data-role="header">
  <a href="#" data-role="button">Home</a>
  <h1>Welcome to my homepage</h1>
</div>

However, if you place a button link after the <h1> element, it will not be displayed on the right side of the text. To add a button to the right of the header title, specify the class name "ui-btn-right":

Exemple

<div data-role="header">
  <h1>Welcome to my homepage</h1>
  <a href="#" data-role="button" class="ui-btn-right">Search</a>
</div>

Essayez-le vous-même

Astuce :The header can include one or two buttons, but the footer has no restrictions.

Footer bar

Compared to the header, the footer is more flexible - it is more practical and versatile, so it can include the required number of buttons:

Exemple

<div data-role="footer">
  <a href="#" data-role="button">Diffuser sur le Weibo de Sina</a>
  <a href="#" data-role="button">Diffuser sur le Weibo de Tencent</a>
  <a href="#" data-role="button">Diffuser sur l'espace QQ</a>
</div>

Essayez-le vous-même

Remarque :Le style du pied de page et de l'en-tête de page est différent (il supprime un certain espace intérieur et d'espace blanc, et les boutons ne sont pas centrés). Pour corriger ce problème, définissez la classe "ui-btn" dans les paramètres du pied de page :

Exemple

<div data-role="footer" class="ui-btn">

Essayez-le vous-même

Vous pouvez également choisir de combiner les boutons horizontalement ou verticalement dans le pied de page :

Exemple

<div data-role="footer" class="ui-btn">
  <div data-role="controlgroup" data-type="horizontal">
    <a href="#" data-role="button" data-icon="plus">Diffuser sur le Weibo de Sina</a>
    <a href="#" data-role="button" data-icon="plus">Diffuser sur le Weibo de Tencent</a>
    <a href="#" data-role="button" data-icon="plus">Diffuser sur l'espace QQ</a>
  </div>
</div>

Essayez-le vous-même

Positionner les en-têtes et les pieds de page

Il y a trois méthodes pour placer les en-têtes et les pieds de page :

  • En ligne - Par défaut. Les en-têtes et les pieds de page sont placés en ligne avec le contenu de la page.
  • Fixe - Les en-têtes et les pieds de page restent en haut et en bas de la page.
  • Plein écran - Similaire à fixed ; les en-têtes et les pieds de page restent en haut et en bas de la page, mais également au-dessus du contenu de la page. Il est également légèrement transparent

Utilisez l'attribut data-position pour positionner les en-têtes et les pieds de page :

Position en ligne (par défaut)

<div data-role="header" data-position="inline"</div>
<div data-role="footer" data-position="inline"</div>

Essayez-le vous-même

Position fixe

<div data-role="header" data-position="fixed"</div>
<div data-role="footer" data-position="fixed"</div>

Essayez-le vous-même

Si vous souhaitez activer la position en plein écran, utilisez data-position="fixed" et ajoutez l'attribut data-fullscreen à cet élément :

Position en plein écran

<div data-role="header" data-position="fixed" data-fullscreen="true"</div>
<div data-role="footer" data-position="fixed"} data-fullscreen="true"</div>

Essayez-le vous-même

Astuce :fullscreen est très idéal pour les photos, les images et les vidéos.

Astuce :Pour les positions fixed et fullscreen, le toucher de l'écran masque et affiche les en-têtes et les pieds de page.