JQuery Mobile implémente la barre de navigation et footer_jquery

Une barre de navigation se compose d'un ensemble de liens disposés horizontalement, généralement à l'intérieur de l'en-tête ou du pied de page.

Par défaut, les liens de la barre de navigation sont automatiquement convertis en boutons (pas besoin de data-role="button").

Le code de la barre de navigation est généralement placé dans un div dont le rôle de données est l'en-tête.

<div data-role="header"> 
<a href="#" data-role="button" data-icon="home">首页</a> 
<h1>欢迎访问我的主页</h1> 
<a href="#" data-role="button" data-icon="search">搜索</a> 
</div>

Un code à barres de navigation de base est comme ci-dessus, comprenant deux boutons et une ligne de texte comme titre. data-icon peut définir la petite icône correspondant au bouton. Si vous souhaitez que le bouton soit placé à droite du texte, vous pouvez ajouter le style class="ui-btn-right". Il convient de noter que la section de navigation (à l'intérieur de l'en-tête) dans Jquery Mobile ne peut contenir que deux boutons. (Comme vous pouvez l'imaginer, la navigation générale dans les applications mobiles n'a pas trop de boutons, et ils sont généralement placés dans le pied de page)

En revanche, il n'y a pas de limite sur le nombre de boutons dans le pied de page. Le pied de page est placé dans le pied de page. Le code de base est le suivant :

<div data-role="footer"> 
<a href="#" data-role="button" data-icon="plus">转播到新浪微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到腾讯微博</a> 
<a href="#" data-role="button" data-icon="plus">转播到QQ空间</a> 
</div>

Ceci est conforme au modèle général de conception des applications mobiles. En bas se trouvent des boutons permettant de basculer vers différentes pages. La façon de changer de page est également très simple. Notez que chaque bouton ici est défini avec une balise a. Comme nous l'avons dit la dernière fois, la conversion de page peut être effectuée. c'est-à-dire le div dont le rôle de données est page) peut terminer le saut. Le processus de saut comporte de nombreux effets d'animation intégrés à jquery mobile, qui seront présentés ultérieurement.

Concernant les en-têtes et pieds de page, en plus de ce qui précède, vous pouvez également utiliser l'attribut data-position pour définir leurs attributs de position, y compris les trois valeurs facultatives suivantes (de : w2cschool) :

En ligne - Par défaut. Les en-têtes et pieds de page sont alignés avec le contenu de la page.

Corrigé – L’en-tête et le pied de page resteront en haut et en bas de la page.

Plein écran - Semblable au fixe ; l'en-tête et le pied de page resteront en haut et en bas de la page, mais également sur le contenu de la page. Ils sont également légèrement transparents

C'est ici que je vais vous présenter les connaissances pertinentes sur l'implémentation de la barre de navigation et du pied de page dans jQuery mobile. J'espère que cela vous sera utile !