Tengo una lista básica con el tema a. Estoy tratando de encontrar una manera de cambiar el tema al hacer clic en un botón. He intentado $('a li').attr('data-theme','a'); combinado con la actualización de la lista sin suerte. Un éxito por ahí?Jquery móvil: Cambiar tema al hacer clic
$('a li').data('theme', 'a');
//<-- use the data() function to change data attributes
¿Estás seguro? ¿No es ese el método de datos jquery? http://api.jquery.com/jQuery.data/ –
Me di cuenta de que si cambia el atributo "data-theme", jQuery Mobile actualizará su tema en el evento mouseover. Esta solución es una especie de truco, pero es simple.
$("a li").attr("data-theme", "a").trigger("mouseout")
Lo siento por resucitar una pregunta muerto, pero me encontré con esta pregunta Google (# 6 en la SERP para un "cambio móvil tema de jQuery") y no hubo respuesta correcta.
Lo sentimos, esto solo parece funcionar durante el evento "pagebeforeshow". –
Tendría que buscar en la página todas las clases de ui-body, ui-button-up, ui-button-down, ui-button-hover y ui-bar-, busque la letra al final de cada uno de ellos, elimine esas clases y luego agréguelas nuevamente con la letra del tema deseada al final de cada clase. Estoy trabajando en un complemento para hacer eso en este momento.
La continuación cambiaría un conjunto de páginas con el tema D's bares con el tema B:
var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]");
$(pageThemeClasses).removeClass('ui-bar-b');
$(pageThemeClasses).addClass('ui-bar-b');
Esto funcionó para mí.
No estoy seguro de por qué funciona, pero cambiar las clases y luego el tema, y luego activar 'crear' funciona para mí, espero que ayude a alguien.
$("div[data-role='collapsible']").bind('expand', function() {
$(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create');
});
$("div[data-role='collapsible']").bind('collapse', function() {
$(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create');
});
Bueno, depende del tipo de elemento que intentes cambiar. Se trata de cómo se puede cambiar un tema Elementos del botón:
var oT = $(this).attr('data-theme'); // old theme
var nT = (oT == 'a' ? 'e' : 'a'); // new theme
$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
En cambio, si se trata de una etiqueta de ancla con data-role = "botón":
$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT);
Simplemente, utilice las consolas navegador para inspeccionar donde se definen los atributos y las clases del elemento de datos elemento (y elementos padres/hijos).
Bueno, la respuesta de Corey Docken básicamente funciona:
$("a li").attr("data-theme", "a").trigger("mouseout")
El truco es que jQuery móvil siempre cambia las clases cuando se pasa sobre un elemento de acuerdo con la técnica de tema elegido. Si cambia el tema de datos, el siguiente evento de desplazamiento/desplazamiento cambiará las clases de acuerdo con el nuevo tema.
Bueno, solo funciona si el nuevo tema tiene una letra más alta que la anterior. Las clases del viejo tema permanecen. Como las clases con una letra más alta se colocan después de las que tienen una letra más baja, la letra más alta gana.
Si estaba utilizando el rodillo de temas (themeroller.jquerymobile.com) entonces se podría ajustar sus propios colores y exportar cada tema en un css, a continuación, mediante programación:
$("#idoflink").attr("href", "theotherstyle.css");
creo que debería hacer
poner este código en la cabeza:
<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css">
<script>
$(document).on("pagecreate", function() {
$("#theme-selector input").on("change", function(event) {
var themeClass = $("#theme-selector input:checked").attr("id");
$("#testpage").removeClass("ui-page-theme-a ui-page-theme-b").addClass("ui-page-theme-" + themeClass);
});
});
</script>
$ ("#testpage") es una identificación del componente de ejemplo (esta sería la identificación en el div principal dentro del cuerpo).
Agregar al cuerpo:
<div class="ui-field-contain" id="theme-selector">
<fieldset data-role="controlgroup" data-type="horizontal">
<legend>Theme:</legend>
<label for="a">A</label>
<input type="radio" name="theme" id="a" checked>
<label for="b">B</label>
<input type="radio" name="theme" id="b">
</fieldset>
</div>
espero que esta es la respuesta a lo que está tratando de lograr. Por supuesto, puede reemplazar fácilmente "radio" por "botón" y cambiarlo un poco.
En 2018 esto funciona para mí, simplemente ajuste sus valores para los diferentes temas que descargó de ThemeRoller.
Consigue el div que tiene un data-role = "página"
var lastTheme = 'a';
function ThemeSwap() {
var rootDiv = $('#IdOfDivMarkedAsDataRolePage');
if (lastTheme === 'a') {
rootDiv.removeClass('ui-page-theme-a');
rootDiv.addClass('ui-page-theme-b');
lastTheme = 'b';
}
else if (lastTheme === 'b') {
rootDiv.removeClass('ui-page-theme-b');
rootDiv.addClass('ui-page-theme-c');
lastTheme = 'c';
}
else if (lastTheme === 'c') {
rootDiv.removeClass('ui-page-theme-c');
rootDiv.addClass('ui-page-theme-a');
lastTheme = 'a';
}
else
alert('bad theme swapping. last theme = ' + lastTheme);
rootDiv.trigger('create');
return true;
}
La alerta no se ha lanzado sin embargo, al final del bloque ifelse.
¿Encontró un sln? – Larsi