Jquery mobile: Change theme on click

Question

I have got a basic list with the theme a. I am trying to find a way to change the theme when clicking on a button. Have tried $('a li').attr('data-theme','a'); combined with list refresh with no luck. An success out there?

Answer 1

You would have to search the page for all ui-body-, ui-button-up, ui-button-down, ui-button-hover, and ui-bar- classes, find the letter at the end of each of those, remove those classes then add them back with the desired theme letter at the end of each class. I am working on a plugin to do just that at the moment.

The below would change a page set to theme D's bars to theme B:

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

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

Answer 2

Not sure why this works but changing the classes then the theme, then triggering 'create' works for me - hope it helps someone.

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