Search jQuery

jQuery Forum

jQuery Mobile

Tungsteno

Dynamic page theme swatch don't work properly

in jQuery Mobile • 7 years ago

Hello,

first of all I apologize for my bad english.

I'm trying to dinamically change the page theme with the function found in the jquery mobile API documentation.

The function is like that:

$('[data-role="page"]).page( 'option', 'theme', 'b' );

If i run this function several times with different swatch themes, it add the page css class theme for each swatch instead of switch it.

Example:

I load the page with default theme.

It add in the page class:

ui-page-theme-a

Then i execute:

$('[data-role="page"]).page( 'option', 'theme', 'b' );

It add:

ui-page-theme-b

And remove:

ui-page-theme-a

Then i execute:

$('[data-role="page"]).page( 'option', 'theme', 'a' );

It add:

ui-page-theme-a

But do not remove:

ui-page-theme-b

I don't know if this is the normal behavior (or happen only in my case) so I ask for clarification on this and in case this is the normal use, how to "emulate" a switch behavior ( JQuery mobile 1.4.5)

thanks

Replies(6)

Omar

Re: Dynamic page theme swatch don't work properly

7 years ago

This is an old bug, I thought it was fixed. It doesn't remove all theme class however it adds new theme class, but overridden by old one. It can be fixed by extending page widget. If I have time I'll do it for you.

Tungsteno

Re: Dynamic page theme swatch don't work properly

7 years ago

Thanks for your reply. I found just now that this kind of function work well with toolbars (header and footer). So i think this is a Page specific problem.

I also found that this

$('[data-role="panel"]').panel( 'option', 'theme', 'b' );

Do not work at all (No change in the html code).

If you can fix this in jquery code you are great!

p.s: really this is an old bug? Please can link me the bugtrack, i searched for it but I found nothing.

Omar

Re: Dynamic page theme swatch don't work properly

7 years ago

Here is a way to do it, by extending page widget. I had no time to track the issue on jQM master files, but I will definitely do it tomorrow.

(function($, undefined) {
$.widget("mobile.page", $.mobile.page, {
theme: function(c) {
var page = this.element,
currentThemes = this.element.attr("class").match(/\S+-page-theme-\S+/g);
if (currentThemes.length > 1) {
var cTheme = currentThemes[currentThemes.length - 1];
}
currentThemes.forEach(function(theme) {
page.removeClass(theme);
});
page.addClass("ui-page-theme-" + c);
}
});
})(jQuery);

To change theme, just call .page("theme", "swatch") on active page

This will remove any class beings with ui-page-theme- and replace it with desired swatch.

Demo: https://jsfiddle.net/Palestinian/x0ka1Ls9/

Omar