Comment ajouter le bouton Accueil en utilisant jquery-mobile?
par défaut jquery-mobile ajoute un bouton back sur chaque page après la page principale. Je souhaite savoir comment puis-je ajouter le bouton home aussi ?
Voici un exemple: http://jquerymobile.com/demos/1.0a1/#experiments/api-viewer/index.html
Note: Ce lien n'est bon que pour firefox/chrome
Merci.
4 réponses
Sans modifier le jquery-mobile.js code source, la seule façon que je peux penser à faire est d'ajouter vos propres liens de navigation à l'en-tête. Une fois que vous avez ajouté votre propre lien, le bouton "Back" automatique disparaîtra, donc nous allons créer 2 liens, Un pour back, et un pour home.
vous remarquerez que les pages 2 et 3 ont toutes deux des boutons back et home et que vous pouvez retourner ou sauter directement à la maison. Cela vous oblige à modifier l'en-tête de section pour chaque page, mais ce n'est pas que grand d'une affaire depuis son toujours la même (copier et coller) aucune modification nécessaire par exemple.
La "maison" lien en haut à droite (comme pour le comportement par défaut d'un second lien pour le mettre en haut à droite).
Voici l'exemple:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
</head>
<body>
<div data-role="page" id="firstpage">
<div data-role="header">
<h1>First Page</h1>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page.</p>
<p>View internal page called <a href="#secondpage">second page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="secondpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is secondpage)</p>
<p><a href="#thirdpage">Go to third page</a></p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
<div data-role="page" id="thirdpage">
<div data-role="header">
<a href='#' class='ui-btn-left' data-icon='arrow-l' onclick="history.back(); return false">Back</a><h1>Bar</h1><a href="#firstpage">home</a>
</div>
<div data-role="content">
<p>I'm first in the source order so I'm shown as the page. (this is thirdpage)</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>
si vous voulez le faire faire faire automatiquement, vous pouvez aussi simplement hacker le js...
juste après ce morceau de code (autour de la ligne 1084 du jquery.mobile-1.0a2.js)
$( "<a href='#' class='ui-btn-left' data-icon='arrow-l'>"+ o.backBtnText +"</a>" )
.click(function() {
history.back();
return false;
})
.prependTo( $this );
Ajouter une ligne comme celle-ci, où #firstpage est l'id de votre page d'accueil, je ne pouvais pas trouver un moyen de faire référence à la page d'accueil sans l'appeler par son nom, n'hésitez pas à améliorer.. Je ne voulais pas le faire / ou simplement # ne fonctionne pas... mais cette méthode fonctionne
$( "<a href='#firstpage' class='ui tn-right'>Home</a>" ).appendTo( $this );
il y a une solution plus simple: il suffit d'ajouter un lien à votre en-tête div avec class="ui-btn-right". Ceci est essentiel pour que le bouton de retour Mobile jQuery puisse être automatiquement ajouté à gauche. Il y a aussi quelques autres attributs data-* que vous pouvez utiliser pour que vous puissiez utiliser l'icône du thème intégré, etc, comme indiqué:
<div data-role="page">
<div data-role="header">
<h1>Title</h1>
<a href="/" class="ui-btn-right" data-icon="home" data-iconpos="notext"
data-direction="reverse">Home</a>
</div>
<div data-role="content">
...
(de toute évidence, changez L'URL home href en quelque chose de sensé pour votre environnement, n'utilisez pas "/" car cela limite l'endroit où votre application peut être déployée.)
quand j'ai commencé à utiliser jqm pour développer une application, je voulais à la fois des boutons home et back sur l'en-tête supérieur parce que l'arbre de navigation est profond. En utilisant les classes de boutons de base telles que "ui-btn-right" ou "ui-btn-left" fonctionne très bien-- si vous voulez seulement un bouton de chaque côté.
mais si vous êtes comme moi et que vous voulez deux boutons sur la gauche, vous pouvez utiliser un peu CSS personnalisé et le positionnement pour l'obtenir où vous voulez. J'ai aussi enveloppé les boutons dans une classe d'en-tête personnalisé, ainsi que d'utiliser CSS pour contrôler le titre dans l'en-tête. Vous aurez besoin de placer chaque bouton sur un index z différent, sinon chaque bouton sera en conflit avec l'autre.
C'est l'en-tête:
<div id="home-btn" class="header-btn-left-pos1">
<a href="config.html" data-role="button" data-icon="home" data-rel="home">Home</a>
</div><!-- /home-btn -->
<div id="back-btn" class="header-btn-left-pos2">
<a href="#" data-role="button" data-icon="back" data-rel="back">Back</a>
</div><!-- /back-btn -->
<div class="header-title" align="center">
<h4>Business Locations</h4>
</div><!-- /header-title -->
</div><!-- /custom header -->
.custom-header
{
height:18px;
}
.header-title
{
position:relative;
top:-10px;
}
.header-btn-left-pos1
{
position:absolute;
left:25px;
top:5px;
z-index:1;
}
.header-btn-left-pos2
{
position:absolute;
left:105px;
top:5px;
z-index:2;
}
J'espère que cela vous donnera plus d'options.
<div data-role="footer" class="ui-bar">
<div data-role="controlgroup" data-type="horizontal">
<a href="Main.html" data-role="button" rel=external><img src="/MobileTest/images/Home.png" /> </a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/MyShare.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/SharedWithMe.png" /></a>
<a href="index.html" data-role="button" rel=external><img src="/MobileTest/images/settings.png" /></a>
</div>
</div>
Vous pouvez utiliser rel=external vous href balise. Ceci ouvrira la page d'accueil sans bouton back.