Barre d'outils mobile jQuery
Les éléments de la barre d'outils sont généralement situés dans l'en-tête et le pied de page, ce qui rend la navigation facilement accessible :
Barre d'en-tête
La barre d'en-tête contient généralement le titre de la page. /logo ou un bouton ou deux (généralement Accueil, Options ou Recherche).
Vous pouvez ajouter des boutons sur le côté gauche ou droit de l'en-tête.
Le code suivant ajoutera un bouton à gauche du texte du titre de l'en-tête et un bouton à droite du texte du titre de l'en-tête :
Exemple
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Le code suivant ajoutera un bouton au titre de l'en-tête À gauche du texte :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <a href="#" class="ui-btn ui-btn-left ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> </div> </body> </html>
Exécuter l'instance»
Cliquez sur " Exécuter l'instance" "Exemple d'affichage du bouton en ligne
Cependant, si vous placez le lien du bouton après l'élément <h1> Pour ajouter un bouton à droite du titre de l'entête, précisez la classe "ui-btn-right" :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="header"> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-btn-right ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">搜索</a> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
| La tête peut contenir un ou deux boutons, tandis que la queue n'a pas de limite. |
|---|
Barre de queue
Les barres de queue sont plus flexibles que les barres d'en-tête - elles sont plus fonctionnelles et modifiables tout au long de la page, elles peuvent donc contenir autant de boutons que possible :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left ">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left ">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> <p>注意我们在头部按钮上添加了 "ui-corner-all" 和 "ui-shadow" 类，使他看起来更美观点。</p> </div> <div data-role="footer"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque : La queue est stylisée différemment de la tête (pas de rembourrage ni d'espace, et le bouton n'est pas centré). Nous pouvons résoudre ce problème en utilisant un style simple :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram关注我</a> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Vous pouvez également combiner les boutons dans la queue horizontalement ou verticalement :
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-home ui-btn-icon-left">主页</a> <h1>欢迎访问我的主页</h1> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-search ui-btn-icon-left">搜索</a> </div> <div data-role="main" class="ui-content"> <p>该按钮仅用于演示，不会有任何效果。</p> </div> <div data-role="footer" style="text-align:center;"> <div data-role="controlgroup" data-type="horizontal"> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Facebook上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Twitter上关注我</a> <a href="#" class="ui-btn ui-corner-all ui-shadow ui-icon-plus ui-btn-icon-left">在Instagram上关注我</a> </div> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Positionnement des barres d'en-tête et de remorque
L'en-tête et la remorque peuvent être positionnés de trois manières :
En ligne - Par défaut. Les colonnes d'en-tête et de pied de page sont alignées sur le contenu de la page.
Corrigé - Les barres d'en-tête et de pied de page sont fixes en haut et en bas de la page.
Plein écran - Fondamentalement identique au mode de positionnement fixe, les barres d'en-tête et de pied de page sont fixes en haut et en bas de la page. Cependant, lorsque la barre d'outils sort de l'écran, elle ne réapparaîtra pas automatiquement à moins que vous cliquiez sur l'écran. Ceci est très utile pour les applications telles que les images ou les vidéos qui améliorent le sentiment de substitution. Notez que dans ce mode, la barre d'outils couvrira le contenu de la page, il est donc préférable de l'utiliser dans des situations particulières.
Utilisez l'attribut data-position pour positionner les colonnes d'en-tête et de pied de page :
Positionnement en ligne (par défaut)
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="inline"> <h1>行内页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b> 如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="inline"> <h1>行内页脚</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Positionnement fixe
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed"> <h1>Fixed 页眉</h1> </div> <div data-role="main" class="ui-content"> <p><b>提示：</b>如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示：</b> 如果滚动条可用，那么敲击屏幕将隐藏或显示页眉/页脚。效果会根据您在页面上的位置而变化。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed"> <h1>Fixed 页脚</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur " Bouton "Exécuter l'instance" pour afficher des exemples en ligne
Pour activer le positionnement plein écran, utilisez data-position="fixed" et ajoutez l'attribut data-fullscreen à l'élément :
Positionnement plein écran
Instance
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css"> <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div data-role="page"> <div data-role="header" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页眉</h1> </div> <div data-role="main" class="ui-content"><br><br> <p><b>提示:</b> T如果要看到效果，则需要调整窗口大小使滚动条可用。</p> <p><b>提示:</b> 敲击屏幕会隐藏或显示页眉和页脚。</p> <p>可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.可滚动的文本.</p> </div> <div data-role="footer" data-position="fixed" data-fullscreen="true"> <h1>Fixed 和 Fullscreen 页脚</h1> </div> </div> </body> </html>
Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Conseil : Le positionnement plein écran fonctionne avec les photos, les images et les vidéos.
Conseils : En positionnement fixe et en positionnement plein écran, la barre d'en-tête et la barre de queue seront masquées et affichées en cliquant sur l'écran.
Plus d'exemples
Afficher uniquement les icônes sur la barre d'outils
Pour afficher uniquement les icônes sur la barre d'outils, vous pouvez utiliser ui-btn- icon -classe notext.
