JQuery mobilde temayı dinamik olarak nasıl değiştirebilirim?

Question

jQuery Mobile kullanarak bir mobil web uygulamaları oluşturuyorum.

ben her sayfa için theme-b kullanıyorum ve her sayfa için dinamik bir başka tema değiştirmek istiyorum. Temayı dinamik olarak nasıl değiştirebilirim?

Answer 1

, belirli widget'lar alakalı spesifik sınıfları hedef sınıflarını sıfırlamak ve ardından seçtiğiniz temalı sınıfını ekleyebilirsiniz: hayır tamamen işlevsel kod yolla

//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/

budur snippet'i, temayı değiştirdiğinizde ve yukarıdaki kodlara eklediğinizde güncellemek istediğiniz diğer widget'ları bulmanız gerekecektir. Her bir widget'ın FireBug veya başka bir Developer Console'u kullanarak kolayca hangi sınıfları olduğunu bulabilirsiniz. , http://jsfiddle.net/VNXb2/7/

Answer 2

yukarıdaki cevabı bana çok yardımcı oldu: İşte

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*/ 

bir demo: dikkate data-role="list-divider unsurları aldığımızda

GÜNCELLEME

bu biraz zor olur Tema oynatıcısı kullanıyorum ve 20'den fazla temaya sahip olmayı beklediğim için ihtiyacım için biraz değiştirdim. İşte ben sadece param gibi yeni tema ile bu yöntemi çağırın json aracılığıyla sunucudan yeni Tema bulunca Şimdi

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); 

}) 

yapmış budur.

Selamlar Rajesh J

Answer 3

Rajesh cevabı bana çok yardımcı oldu ... Ama Rajesh, sen '* ui-page-tema-' ---- önemli sınıfını cevapsız, bu yüzden cevap modifiye ve şimdi ben statik değişiyor ama dinamik olarak tek sorun olduğunu değiştirmez benim uygulamada liste bölücü kullanıyorum

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); 
    }); 
};