Jak zmienić motyw w sposób dynamiczny w jquery mobile?

Question

Tworzę mobilne aplikacje internetowe za pomocą jQuery Mobile.

Używam theme-b dla każdej strony i chciałbym zmienić na inny motyw dynamicznie dla każdej strony. Jak mogę dynamicznie zmieniać motyw?

Answer 1

można kierować do konkretnych klas, które odnoszą się do konkretnych widgetów, zresetować swoje klasy, a następnie dodaj tematycznych klasę swojego wyboru:

//set your new theme letter 
    var theme = 'e'; 

    //reset all the buttons widgets 
    $.mobile.activePage.find('.ui-btn') 
         .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') 
         .addClass('ui-btn-up-' + theme) 
         .attr('data-theme', theme); 

    //reset the header/footer widgets 
    $.mobile.activePage.find('.ui-header, .ui-footer') 
         .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') 
         .addClass('ui-bar-' + theme) 
         .attr('data-theme', theme); 

    //reset the page widget 
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e') 
         .addClass('ui-body-' + theme) 
         .attr('data-theme', theme); 

http://jsfiddle.net/VNXb2/1/

To wcale nie oznacza kod w pełni funkcjonalny Fragment, będziesz musiał znaleźć inne widżety, które chcesz zaktualizować po zmianie motywu i dodać je do kodu powyżej. Możesz znaleźć, jakie klasy ma każdy widget, korzystając z FireBug lub innej Konsoli programisty.

UPDATE

Jeśli wziąć pod uwagę data-role="list-divider elementy to robi się trochę skomplikowane:

var theme = 'c'; 

//the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')` 
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider') 
        .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') 
        .addClass('ui-btn-up-' + theme) 
        .attr('data-theme', theme); 

//target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers) 
$.mobile.activePage.find('.ui-li-divider').each(function (index, obj) { 
    if ($(this).parent().attr('data-divider-theme') == 'undefined') { 
     $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') 
       .addClass('ui-bar-b') 
       .attr('data-theme', 'b'); 
    } 
}) 

/*The rest of this code example is the same as the above example*/ 

Oto demo: http://jsfiddle.net/VNXb2/7/

Answer 2

Powyższa odpowiedź bardzo mi pomogło, Zmodyfiowałem ją trochę na moje potrzeby, ponieważ używam themeroller i oczekuję więcej niż 20 motywów. Oto co mam zrobić

function updateTheme(newTheme) { 
//alert("In refresh"); 
var rmbtnClasses = ''; 
var rmhfClasses = ''; 
var rmbdClassess = ''; 
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ]; 

$.each(arr,function(index, value){ 
    rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value; 
    rmhfClasses = rmhfClasses + " ui-bar-"+value; 
    rmbdClassess = rmbdClassess + " ui-body-"+value; 
}); 

// reset all the buttons widgets 
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme); 

// reset the header/footer widgets 
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme); 

// reset the page widget 
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme); 

// target the list divider elements, then iterate through them and 
// change its theme (this is the jQuery Mobile default for 
// list-dividers) 
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) { 
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme); 

}) 

Teraz, gdy pojawia się nowy motyw z serwerem poprzez json po prostu wywołać tę metodę z nowym tematem jako param.

Pozdrowienia Rajesh J

Answer 3

odpowiedź Rajesh pomogła mi wiele ... Ale Rajesh, Przegapiłeś ważną klasę ---- 'ui-page-theme- *', więc modyfikować swoją odpowiedź, a teraz jest to idealne rozwiązanie jQuery Mobile 1.4.5 (znowu) ...

var updateTheme = function(newTheme) { 
    var rmbtnClasses = ''; 
    var rmhfClasses = ''; 
    var rmbdClassess = ''; 
    var arr = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's']; // I had themes from a to s 

    $.each(arr, function(index, value) { 
     rmbtnClasses = rmbtnClasses + ' ui-btn-up-' + value + ' ui-btn-hover-' + value; 
     rmhfClasses = rmhfClasses + ' ui-bar-' + value; 
     rmbdClassess = rmbdClassess + ' ui-body-' + value + ' ui-page-theme-'+ value; 
    }); 

    // reset all the buttons widgets 
    $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme); 

    // reset the header/footer widgets 
    $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme); 

    // reset the page widget 
    $.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme + ' ui-page-theme-'+ newTheme).attr('data-theme', newTheme); 

    // target the list divider elements, then iterate through them and 
    // change its theme (this is the jQuery Mobile default for 
    // list-dividers) 
    $.mobile.activePage.find('.ui-li-divider').each(function(index, obj) { 
     $(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme); 
    }); 
};