Come cambiare il tema in modo dinamico in jquery mobile?

Sto creando un mobile di applicazioni web utilizzando jQuery Mobile.

Sto usando theme-b per ogni pagina e vorrei passare a un altro tema dinamicamente per ogni pagina. Come posso cambiare il tema in modo dinamico?

 

3 Replies
  1. 21

    Si può avere come bersaglio specifiche classi che si riferiscono a specifici widget, reimpostare le loro classi, e quindi aggiungere il tema della classe scelta:

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

    Questo non è un completamente funzionale frammento di codice, è necessario trovare altri widget che si desidera aggiornare quando si cambia il tema e aggiungere il codice riportato sopra. Si possono trovare ciò che le classi di ogni widget ha facilmente utilizzando FireBug o un’altra Console per gli Sviluppatori.

    AGGIORNAMENTO

    Quando si prende in considerazione il data-role="list-divider elementi è un po ‘ difficile:

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

    Qui è una demo: http://jsfiddle.net/VNXb2/7/

    • I m utilizza la lista divisore nella mia applicazione in modo statico non cambia, ma dinamicamente non cambia che è solo problema.
    • Ho aggiornato la mia risposta, data-role="list-divider"s richiedono un po ‘ di logica per ottenere loro di diritto, ma credo che la mia risposta è abbastanza completo: jsfiddle.net/VNXb2/7
    • Un altro pensiero, se si cambia il tema di un widget, prima che viene inizializzato, quindi sarà inizializzato correttamente in tema di vostra scelta. Se si associa al pageInit evento il widget non deve essere inizializzato e si può cambiare il tema della pagina o qualsiasi elemento all’interno della pagina.
    • jsfiddle.net/wPQ85/3 si prega di controllare questo qui sto usando statici e dinamici, ul, mentre statico elenco divisore tema cambia, ma in dinamica non cambia
    • Sto usando questo codice per un po’, perché ora funziona alla grande, (grazie!) ma ho notato che non sembra modificare la ui corpo, le finestre di dialogo. Io non riesco a capire il perché. Ogni pensiero?
    • I dialoghi sono un po ‘ diverso a causa della semi-trasparente sfondo dietro di loro. Vedere questa demo: jsfiddle.net/vpVDd/1. Devi solo aggiornare il .ui-dialog elemento così come il .ui-content elemento.
    • ok vedo. C’è comunque possibile utilizzare $.mobile.activePage per trovare il ui-classe di finestra di dialogo? Non posso ottenere JQuery per trovare. Aziono il themeswitcher su pagebeforeshow come jsfiddle.net/ashanova/7qYhh/1 . Grazie per il vostro tempo btw, il tuo JQM risposte sono sempre molto utili

  2. 10

    Precedente risposta mi ha aiutato molto, l’ho modificata un po ‘ per il mio bisogno, come io sto usando themeroller e si aspettano di avere più di 20 temi. Qui è che cosa ho fatto

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

    Ora quando mi arriva il nuovo Tema dal server tramite json ho appena chiamato questo metodo con il nuovo tema come param.

    Riguarda
    Rajesh J

    • Come posso cambiare il tema per <input type=”text”/> ? Che classe devo aggiungere qui?
  3. 0

    Rajesh risposta mi ha aiutato molto… Ma Rajesh, avete perso un’importante classe —- ‘ui-pagina-theme-*’, così ho modificato la tua risposta e ora è perfetto per jQuery Mobile 1.4.5 (di nuovo)…

    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);
        });
    };
    • Temi Come sono qui: link

Lascia un commento