Cambiar el tema de datos en jQuery mobile

Question

Me gustaría proporcionar a mi usuario algunos comentarios persistentes después de que hayan presionado un botón (como si estuviera sangrado o algo así). Intenté:

$(this).data('theme','b'); 

Pero eso no funciona.

P: ¿Hay alguna manera de mostrar un botón con sangría o cambiar data-theme sobre la marcha?

Answer 1

Sé que esta es una vieja pregunta, pero acabo de toparme con este obstáculo.

La forma correcta de hacer esto sería la siguiente:

$(this).buttonMarkup({theme: 'b'}); 

Answer 2

Tal vez esto es útil para usted: change jquery mobile color swatch dynamically

creo que se puede hacer con los botones de la misma manera.

Answer 3

Para un botón de envío dentro de un formulario, esto funcionó para mí usando jQuery Mobile 1.2.0:

$(this).buttonMarkup({theme: 'b'}); 
$(this).parent().buttonMarkup({ theme: "b" }); 

Answer 4

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.