¿Cómo "desactivar" el estilo de jQuery Mobile de las listas desplegables <select>?

Necesito desactivar el estilo de jQuery Mobile de las listas desplegables <select>. En última instancia, me gustaría que el dispositivo en sí (iPhone, Android, Blackberry, etc.) determine cómo se ve el menú desplegable <select>.¿Cómo "desactivar" el estilo de jQuery Mobile de las listas desplegables <select>?

Actualmente mi margen de beneficio es (cantidad reducida opción para fines de visualización):

<div data-role="fieldcontain"> 
    <label for="state">State:</label> 
    <select name="state" id="state" data-role="none"> 
     <option value="MA">Massachusetts</option> 
     <option value="MI">Michigan</option> 
     <option value="MN" selected="selected">Minnesota</option> 
     <option value="MS">Mississippi</option> 
    </select> 
</div>

He intentado utilizar data-role="none" en el <select> pero nada cambió.

¿Hay alguna manera de "desactivar" jQuery Mobile solo para el menú desplegable de selección?

Fuente

2010-12-03 thorn100

has hecho para solucionar esto de alguna manera? –

Esto se ha solucionado en una versión más reciente. http://jquerymobile.com/test/docs/#/test/docs/forms/forms-selects.html – thorn100

acuerdo con http://jquerymobile.com/test/docs/forms/docs-forms.html

Si Preferiría que jQuery Mobile no tocara un control de formulario en particular, simplemente le daría a ese elemento el atributo data-role = "none". Por ejemplo:

<label for="foo"> 
<select name="foo" id="foo" data-role="none"> 
<option value="a" >A</option> 
<option value="b" >B</option> 
<option value="c" >C</option> 
</select>

Fuente

2011-09-28 16:48:25 user418775

Esto no funcionó cuando originalmente había publicado mi pregunta, pero el equipo de jQuery Mobile ya lo ha agregado. – thorn100

Funcionó como un encanto para mí :) – Asbar

Sí, debe ingresar al archivo CSS que controla el estilo de la lista desplegable de IU de JQuery Mobile y eliminar cualquier estilo que no desee que aparezca.

Fuente

2010-12-03 19:42:55 Jack

Puede hacer esto con la herramienta de personalización de jQuery: http://jqueryui.com/download – DwB

Cualquiera forma en que tendrá que ir al archivo CSS para sobrescribir el estilo de selección, a menos que no desee sobrescribir ninguna otra personalización de JQuery UI que haya hecho :-P – Jack

Todavía están trabajando en ello, trabaja en último código git pero yo no lo recomiendo: https://github.com/jquery/jquery-mobile/issuesearch?state=closed&q=select#issue/350

Fuente

2010-12-14 16:02:34 Mark

Sí, pensé que era mucho más complicado que solo jugueteando con el CSS. He encontrado un par de pistas, pero nada que haya resuelto el problema hasta el momento. Parece que agregar data-role = "none" o data-native = "true" a la selección se supone que elimina la mejora de jQuery, pero hasta ahora, no me ha funcionado. https://github.com/jquery/jquery-mobile/issues/issue/529 http://jquerymobile.com/test/#docs/forms/docs-forms.html – thorn100

Utilizando esta propiedad debería ayudar

$.mobile.selectmenu.prototype.options.nativeMenu = true; // in your override file...

Fuente

2011-09-07 14:19:07

Dentro mobileinit, fije el selector de JQM a comportarse como se esperaba:

$.mobile.selectmenu.prototype.options.initSelector = 'select:not(:jqmData(role="none"), :jqmData(role="slider"))';

Fuente

2012-10-16 17:11:05

Desde la versión 1.1 de la manera correcta de hacerlo es: data-enhance="false"

También necesitará añadir esta línea a config:

$.mobile.ignoreContentEnabled = true;

http://jquerymobile.com/test/docs/forms/forms-all-native.html

Fuente

2012-12-16 21:22:00

Esto no es correcto para la pregunta que se hace. Ese atributo desactiva la mejora de los elementos secundarios del elemento al que lo agrega, no el elemento en sí. –

Aunque esta pregunta ya se considera respondida, me gustaría agregar algunas líneas más, ya que la respuesta no funcionó "out-of-the-box" para mí, y esto podría ahorrar algo de tiempo para otros.

En mi caso, estoy deshabilitando los menús desplegables nativos para una aplicación de teléfono inteligente cuando se ejecuta en Android (ya que tiene algunos problemas desagradables al abrir menús desplegables nativos, informados ya en otro hilo). La "fórmula mágica" que resolvió el problema para mí es sólo las siguientes líneas:

$(document).bind('mobileinit',function(){ 
    if (/iPhone|iPad|iPod/i.test(navigator.userAgent)) { 
     $("select").attr("data-native-menu","true"); 
    } else { 
     $("select").attr("data-native-menu","false"); 
     $.mobile.selectmenu.prototype.options.nativeMenu = false; 
    }    
});

Estas líneas están en un script de personalización cargado justo después de jQuery y justo antes de jQuery-Mobile. Es importante mantener el orden, de lo contrario, los controles ya están inicializados y no tiene ningún efecto.

¡Espero que este consejo pueda ahorrarle algo de tiempo a alguien!

Fuente

2013-07-24 10:34:24 opalenzuela

Esto resolvió un problema años más tarde para mí. iOS9, que acaba de lanzarse en septiembre de 2015, provocó que mis selecciones nativas de iOS Jquery para dispositivos móviles se mostraran, pero no se puede hacer clic en ellas. Usé esto en el encabezado de mi aplicación para cambiar todos los menús a usar las selecciones de jquery y el problema está resuelto. ¡Gracias! –

sólo trato data-native-menu="true"

de doc: Al añadir el menú de datos nativo = "true" atributo a la selección, el marco utilizará menú de selección nativo del navegador cuando se hace clic en el botón de selección. Debido a que esta opción no utiliza el análisis de menú personalizado y la lógica de generación de menú, es significativamente más rápido que la versión de menú personalizado. Los menús de selección personalizada añaden la capacidad de seleccionar el tema y proporcionar consistencia visual en las plataformas. Además, soluciona algunas funcionalidades faltantes en ciertas plataformas: compatibilidad con grupos opcionales en Android, capacidad de selección múltiple en WebOS, y agrega una manera elegante de manejar valores de marcador de posición

for more info

Fuente

2014-03-25 04:40:55 bCliks

¿Cómo "desactivar" el estilo de jQuery Mobile de las listas desplegables <select>?

Respuesta

Cuestiones relacionadas