Bouton d'activation du pied de page dans JQuery mobile

Question

Je dois ajouter le bouton sur le côté droit du pied de page. J'ajoute comme ça

<div data-role="footer" id="ftrMain" name="ftrMain" data-position="fixed"> 
<h4>Copyright 2011</h4> 
<a class="ui-btn-right" data-theme="a" data-ajax="false" href="/login.php?mode=logout">Logout</a> 
</div> 

Je reçois le bouton, mais il vient au début de la ligne suivante. Si je change le rôle en en-tête, le bouton se positionne parfaitement. Même si j'ajoute class = "ui-header" dans le pied de page div, ça se passe bien, mais il n'a tout simplement pas sa position fixée. ('coz il a maintenant à la fois le style ui-footer et ui-header)

Comment puis-je mettre le bouton sur le pied de page à l'extrême droite sans sacrifier la position des données? (J'ai besoin de la position de données fixe aussi)

Answer 1

le pied de page a une marge de droite réglée sur 90px par défaut. Vous devez le surcharger et faire flotter les deux contrôles, comme ceci:

<div data-role="footer" id="ftrMain" style="text-align:center" name="ftrMain" 
    data-position="fixed"> 
    <h4 style="display: inline-block; margin-left: 65px; margin-right: 0"> 
     Copyright 2011</h4> 
    <a class="ui-btn-right" style="margin: 0.4em; float: right" data-theme="a" 
     data-ajax="false" href="/login.php?mode=logout"> 
     Logout</a> 
</div> 

P.S. Du point de vue de l'utilisabilité, j'aurais placé le bouton "Déconnexion" dans le coin supérieur droit de la page plutôt que dans un pied de page.

Answer 2

J'ai trouvé la réponse de Tsar utile, bien qu'il ne semble pas que la majeure partie de ce balisage soit nécessaire. Je reçois le même effet avec

<div data-theme="a" data-role="footer" data-position="fixed" data-id="footer"> 
    <a class="ui-btn-right" href="/login.php?mode=logout">Logout</a> 
    <h3>Copyright 2011</h3> 
</div> 

(je n'ai testé dans mon navigateur de bureau jusqu'à présent.) On dirait que la magie est dans la classe ui-btn-right. Il y a aussi un ui-btn-left.