2012-04-12 44 views
11

Me gustaría agregar un botón de icono a la derecha de mi encabezado en jQuery móvil. Tengo problemas con el posicionamiento automático a la izquierda.Botón Agregar al lado derecho del encabezado

Aquí es mi cabecera:

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

Respuesta

16

Uso class="ui-btn-right" o añadir una clase ui-btn-right en <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> 
+0

Gracias por la rápida respuesta. –

+1

Yo uso exactamente la misma clase pero el enlace aún está en el lado izquierdo, ¿por qué no? – Malloc

2

Si tiene varios botones que desee alinear a la derecha utilizando el class="ui-btn-right" en <a> se coloque todos los botones uno encima del otro. En su lugar, puede simplemente envolver un div alrededor de él y flotar hacia la derecha.

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

Hay un atributo de datos en jQuery Mobile ver 1.2+, puede utilizar data-iconpos="right".

<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

Cuestiones relacionadas