Implémentation mobile de la barre de navigation et du pied de page (avec code)

Cette fois je vais vous présenter la mise en place de la barre de navigation et du pied de page dans Mobile (avec code). Quelles sont les précautions pour mettre en place la barre de navigation et le pied de page dans Mobile. Voici un cas pratique, jetons un coup d'oeil.

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 p dont le rôle de données est l'en-tête.

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

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 des 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 au nombre de boutons dans le pied de page, et le le nombre de boutons dans le pied de page est Dans le pied de page, le code de base est le suivant :

<p 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> 
</p>

Ceci est conforme au modèle de conception général de l'application mobile En bas se trouvent des boutons pour 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 p 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 introduits plus tard.

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

Je vous crois. Je lirai le cas dans cet article. Vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser les composants de formulaire dans le framework Mobile

Quelles sont les différences entre l'utilisation de jQuery Mobile et l'interface utilisateur Kendo

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!