Jquery mobile: Cambia tema al clic

Question

Ho una lista base con il tema a. Sto cercando di trovare un modo per cambiare il tema quando si fa clic su un pulsante. Ho provato $('a li').attr('data-theme','a'); in combinazione con l'aggiornamento della lista senza fortuna. Un successo là fuori?

Answer 1

$('a li').data('theme', 'a'); 
          //<-- use the data() function to change data attributes 

Answer 2

Ho notato che se si modifica l'attributo "tema-dati", jQuery Mobile aggiornerà il tema sull'evento mouseover. Questa soluzione è una specie di trucco, ma è semplice.

$("a li").attr("data-theme", "a").trigger("mouseout") 

Scusate per resuscitare una domanda morto, ma ho trovato questa domanda Google (# 6 sulla SERP per "jquery cambiamento cellulare tema") e non c'era risposta corretta.

Answer 3

Dovresti cercare nella pagina tutti i pulsanti ui-body-, ui-button-up, ui-button-down, ui-button-hover e ui-bar-, trovare la lettera alla fine di ognuno di questi, rimuovere quelle classi e quindi aggiungerle nuovamente con la lettera tematica desiderata alla fine di ogni lezione. Sto lavorando su un plugin per farlo proprio al momento.

Il sotto cambierebbe una pagina impostato sul tema D's bar a tema B:

var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]"); 

$(pageThemeClasses).removeClass('ui-bar-b'); 
$(pageThemeClasses).addClass('ui-bar-b'); 

Answer 4

Questo ha funzionato per me.

$("a li").removeClass("ui-body-b"); //remove old theme 
$("a li").addClass("ui-body-a"); //add new theme 

Answer 5

Non capisco perché questo funziona, ma cambiando le classi poi il tema, quindi innescando 'creare' funziona per me - spero che aiuta qualcuno.

$("div[data-role='collapsible']").bind('expand', function() { 
$(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create'); 
}); 

$("div[data-role='collapsible']").bind('collapse', function() { 
$(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create'); 
}); 

Answer 6

Bene, dipende dal tipo di elemento che si sta tentando di modificare. Questo è come si potrebbe passare da un tema elementi pulsante:

var oT = $(this).attr('data-theme'); // old theme 
var nT = (oT == 'a' ? 'e' : 'a'); // new theme 

$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

Invece, se si tratta di un tag di ancoraggio con i dati-role = "button":

$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

Semplicemente, utilizzare le console del browser per ispezionare dove sono definiti gli attributi di elemento (e genitore/figlio) di tema dati e classi.

Answer 7

Bene, la risposta da Corey Docken fondamentalmente funziona:

$("a li").attr("data-theme", "a").trigger("mouseout") 

Il trucco è che jQuery Mobile cambia sempre le classi quando si passa sopra un elemento secondo il prescelto dei dati-tema. Se si modifica il tema dei dati, il successivo evento di passaggio del mouse/passaggio del mouse modificherà le classi in base al nuovo tema.

Bene, funziona solo se il nuovo tema ha una lettera più alta di quella vecchia. Le classi del vecchio tema rimangono. Poiché le classi con una lettera più alta sono poste dopo quelle con la lettera più bassa, la lettera più alta vince.

Answer 8

Se si utilizza Theme Roller (themeroller.jquerymobile.com) allora si potrebbe regolare i propri colori ed esportare ogni tema su un css, quindi a livello di codice:

$("#idoflink").attr("href", "theotherstyle.css"); 

Penso che dovrebbe fare

Answer 9

inserire questo codice nella testa:

<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css"> 
<script> 
    $(document).on("pagecreate", function() { 
     $("#theme-selector input").on("change", function(event) { 
      var themeClass = $("#theme-selector input:checked").attr("id"); 

      $("#testpage").removeClass("ui-page-theme-a ui-page-theme-b").addClass("ui-page-theme-" + themeClass); 
     }); 
    }); 
</script> 

$ ("#testpage") è un id del componente di esempio (questo sarebbe l'id sul div principale all'interno del corpo).

aggiungere al corpo:

<div class="ui-field-contain" id="theme-selector"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <legend>Theme:</legend> 
       <label for="a">A</label> 
       <input type="radio" name="theme" id="a" checked> 
       <label for="b">B</label> 
       <input type="radio" name="theme" id="b">  
      </fieldset> 
     </div> 

Spero che questa è la risposta a ciò che si sta cercando di ottenere. Ovviamente puoi facilmente sostituire "radio" con "pulsante" e ridimensionarlo un po '.

Answer 10

Nel 2018 questo funziona per me, basta regolare i valori per i diversi temi scaricati da ThemeRoller.

Prendi il div che ha un ruolo-data = "pagina"

var lastTheme = 'a'; 
function ThemeSwap() { 
    var rootDiv = $('#IdOfDivMarkedAsDataRolePage'); 

    if (lastTheme === 'a') { 
     rootDiv.removeClass('ui-page-theme-a'); 
     rootDiv.addClass('ui-page-theme-b'); 
     lastTheme = 'b'; 
    } 
    else if (lastTheme === 'b') { 
     rootDiv.removeClass('ui-page-theme-b'); 
     rootDiv.addClass('ui-page-theme-c'); 
     lastTheme = 'c'; 
    } 
    else if (lastTheme === 'c') { 
     rootDiv.removeClass('ui-page-theme-c'); 
     rootDiv.addClass('ui-page-theme-a'); 
     lastTheme = 'a'; 
    } 
    else 
     alert('bad theme swapping. last theme = ' + lastTheme); 

    rootDiv.trigger('create'); 
    return true; 
} 

L'allarme non è ancora stato lanciato alla fine del blocco IfElse.