Jquery Mobile: Seleccione el cuadro en el encabezado

¿Hay alguna forma de agregar un cuadro de selección dentro del encabezado?Jquery Mobile: Seleccione el cuadro en el encabezado

he probado con este código

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
</div>

pero no funciona

Editar:

lo siento porque la cuestión no es tan clara. Con el código anterior, tengo un cuadro de selección en el encabezado, pero el cuadro de selección está centrado (debajo del título de la página). Lo que quiero es que, el seleccionado se coloque a la derecha (como un botón dentro del encabezado).

| [volver] --------- Título ----------- [seleccionar recuadro] |

Fuente

2011-07-04 Peacemoon

¿Qué ves/no ves exactamente? Puse tu código en una página de jQuery Mobile, y obtuve un campo de selección como se esperaba en el encabezado de la página. He aquí el fragmento de código que usé, que comprueba salir bien en Desktop y Mobile Safari (IPAD):

<body> 
    <div data-role="page" id="somepage" data-theme="c"> 
    <div data-role="header" data-position="inline" data-theme="b"> 
     <h1>My Page</h1> 
     <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
     </select> 
    </div> 
    <!-- rest of page --> 
    </div> 
<body>

EDITAR Creo que el problema se encuentra con es que h1 es un elemento de bloque, por supuesto, y así es el campo select una vez que jQM ha ejecutado su código. Si inspecciona el campo una vez que la página se representa en un navegador WebKit, verá que jQM aplica divs adicionales y similares, lo que significa que el campo de selección no puede residir fácilmente en la misma línea que su encabezado.

De acuerdo con los documentos, debe experimentar con el marcado personalizado en el encabezado colocándolo en su propio div (para que jQM no intente manipularlo) y luego diseñarlo usted mismo. El tipo de apariencia que desea lograr se realiza mejor cuando se construye una barra de encabezado con dos enlaces, pero obviamente eso no se aplica a usted porque el segundo "botón" no es un enlace, es un campo select:

El complemento de encabezado busca hijos inmediatos del contenedor de encabezado y establece automáticamente el primer enlace en la ranura del botón izquierdo y el segundo enlace en la derecha. En este ejemplo, el botón 'Cancelar' aparecerá en la ranura izquierda y 'Guardar' aparecerá en la ranura correcta en función de su secuencia en el orden de la fuente.

Puede intentar hacer algo como esto para fudgearlo, pero debe probar los dispositivos que admite en su aplicación (y obviamente poner los estilos en una clase, solo lo he hecho así por ejemplo los propósitos):

<div data-role="header" data-position="inline" data-theme="b"> 
    <h1>My Page</h1> 
    <div data-role="fieldcontain" style="position: absolute; top: 0; right: 0; margin: 0; padding: 0"> 
    <select> 
     <option>Option 1</option> 
     <option>option 2</option> 
    </select> 
    </div> 
</div> 
...

Fuente

2011-07-04 09:18:39 Ben

he editado mi post para hacer más clara la cuestión – Peacemoon

He añadido algunas modificaciones a la respuesta, con un dulce de azúcar-y solución – Ben

Gran Probé el emulador de Android y el dispositivo Android y se ve como yo quiero. Gracias – Peacemoon

Si desea utilizar un elemento Seleccionar real, encapsulado en una etiqueta de ancla con data-role="none" trabajó para mí.

p. Ej.

<div data-role="header"> 
    <a data-role="none"> 
     <select> 
      <option value="1">Option One</option> 
      <option value="2">Option Two</option> 
     </select> 
    </a> 
</div>

Fuente

2014-01-03 20:06:14 kappamaki

Rahhhhhhh, esto no me ayudó para el seleccionado, pero me hizo descubrir el data-role = "none". ¡Estaba tan furioso que jquerymobile estaba tratando de adaptar mi código sin que yo pidiera nada agregando clases en todas partes! Gracias hombre !! – Yahel

Jquery Mobile: Seleccione el cuadro en el encabezado

Respuesta

Cuestiones relacionadas