tengo estado buscando una forma de cambiar dinámicamente el tema globalmente en jQuery Mobile (por ejemplo, haciendo clic en un botón). Resultó ser más complejo de lo que imaginaba para hacer esto. De todos modos, aquí está mi opinión sobre esto, inspirado en diversas soluciones de SO y otros sitios:
// Dynamically changes the theme of all UI elements on all pages,
// also pages not yet rendered (enhanced) by jQuery Mobile.
$.mobile.changeGlobalTheme = function(theme)
{
// These themes will be cleared, add more
// swatch letters as needed.
var themes = " a b c d e";
// Updates the theme for all elements that match the
// CSS selector with the specified theme class.
function setTheme(cssSelector, themeClass, theme)
{
$(cssSelector)
.removeClass(themes.split(" ").join(" " + themeClass + "-"))
.addClass(themeClass + "-" + theme)
.attr("data-theme", theme);
}
// Add more selectors/theme classes as needed.
setTheme(".ui-mobile-viewport", "ui-overlay", theme);
setTheme("[data-role='page']", "ui-body", theme);
setTheme("[data-role='header']", "ui-bar", theme);
setTheme("[data-role='listview'] > li", "ui-bar", theme);
setTheme(".ui-btn", "ui-btn-up", theme);
setTheme(".ui-btn", "ui-btn-hover", theme);
};
Hay una cierta complejidad adicional implicado porque yo también quería actualizar el tema de las páginas no se muestran por JQM. Estructurar el código en pares de selectores y clases de tema me ayudó a aclarar esto.
Puede llamar a esta función para actualizar la variable para todos los elementos de la interfaz de forma dinámica, por ejemplo:
$.mobile.changeGlobalTheme("b");
también me gustan las soluciones que he visto que el uso de expresiones regulares, pero en este caso yo prefiero el enfoque para indicar explícitamente selectores y clases de tema debido a la claridad y facilidad de agregar nuevos elementos. Calculé los pares selector/clase inspeccionando el árbol DOM.
Debo decir que aprecio el sabor Lisp del código JavaScript moderno.
Oh, solo puedo agregar y eliminar la clase = "ui-btn-up-a, ui-btn-up-b, ui-btn-up-c, ui-btn-up-d, ui-btn- up-e " –
Eso casi funciona pero jQuery regresa y reasigna el ui-btn correspondiente después. –