Schaltfläche auf der rechten Seite der Kopfzeile hinzufügen

Question

Ich möchte eine Schaltfläche auf der rechten Seite meiner Kopfzeile in jQuery Mobile hinzufügen. Ich habe Probleme mit der automatischen linken Positionierung.

Hier ist mein Kopf:

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext">home</a> 
</div> 

Answer 1

Verwenden class="ui-btn-right" oder eine Klasse ui-btn-right in <a>

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">home</a> 
</div> 

Answer 2

hinzufügen Wenn Sie mehrere Tasten, die Sie nach rechts ausrichten möchten die class="ui-btn-right" in <a> verwendet, wird Platziere alle Knöpfe übereinander. Stattdessen können Sie einfach ein div um es wickeln und nach rechts schweben.

<div data-role="header" data-position="inline"> 
    <h1>Resultaten</h1> 
    <div style="float:right;"> 
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">btn 1</a> 
     <a href="#Home" data-role="button" data-icon="home" data-iconshadow="false" 
     data-direction="reverse" onclick="empty()" data-transition="slide" 
     data-iconpos="notext" class="ui-btn-right">btn 2</a> 
    </div> 
</div> 

Answer 3

Es ist ein Datenattribut in jQuery Mobile Version 1.2+, können Sie data-iconpos="right" verwenden.

<a href="#Home" data-role="button" data-icon="home" data-iconpos="right" data-iconshadow="false" 
    data-direction="reverse" onclick="empty()" data-transition="slide" 
    data-iconpos="notext">home</a> 

Official Documentation