Jquery mobile: changer le thème en cliquant sur

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

J'ai remarqué que si vous modifiez l'attribut "Thème de données", JQuery Mobile rafraîchrait votre thème sur l'événement de la Mousever. Cette solution est une sorte de hack, mais c'est simple.

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

Vous devriez rechercher la page pour tous les boutons UI-Body- Button-up, UI-Bouton-Bouton-Bouton, UI-Button-Hover et UI-Bar-Bar, trouvez la lettre à la fin de chaque De ces classes, supprimez-les ensuite avec la lettre thème souhaitée à la fin de chaque classe. Je travaille sur un plugin pour faire juste que pour le moment.

Le ci-dessous changerait une page définie sur les barres de Theme D au thème B: p>

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

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

Cela a fonctionné pour moi.

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

Je ne sais pas pourquoi cela fonctionne, mais changer les classes puis le thème, puis déclencher "Créer" fonctionne pour moi - espérons que cela aide quelqu'un.

$("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');
});

Eh bien, cela dépend du type d'élément que vous essayez de changer. C'est ainsi que vous pouvez basculer sur un thème d'éléments de bouton: xxx

à la place, s'il s'agit d'une balise d'ancrage avec le rôle de données-role = "bouton": xxx

Simplement, utilisez les consoles de navigateur pour inspecter l'emplacement des attributs de thème des données (et des parents / enfants) et des classes de données sont définis.

Eh bien, la réponse de Corey Docken fonctionne essentiellement:

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

Si vous utilisiez un rouleau de thème (themeroller.jquerymobile.com), vous pouvez ajuster vos propres couleurs et exporter chaque thème sur un CSS, puis programmatiquement:

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

Mettez ce code dans la tête:

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

En 2018, cela fonctionne pour moi, il suffit d'ajuster vos valeurs pour les différents thèmes que vous avez téléchargés à partir de themeroller.

Obtenez la DIV qui a un rôle de données = "Page" P>

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