javascript - Change the default data-theme from jQuery Mobile - Stack Overflow

admin管理员组

文章数量:1290978

With jQuery Mobile I can create a page using a custom theme

<div data-role="page" data-theme="s" id="home">...

Now this works, but requires that I add this line in each of my pages and every-time I add a new page. I tried adding data-theme="s" to the body tag but this has no affect. Is there any way to do this other then setting it manually per page?

With jQuery Mobile I can create a page using a custom theme

<div data-role="page" data-theme="s" id="home">...

Now this works, but requires that I add this line in each of my pages and every-time I add a new page. I tried adding data-theme="s" to the body tag but this has no affect. Is there any way to do this other then setting it manually per page?

• javascript
• image
• cordova
• offlineapps

Share Improve this question Follow asked Oct 28, 2011 at 2:58 MoakMoak 12.9k2727 gold badges116116 silver badges168168 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

You would have to do it programmatically, AFAIK.

Something along the lines of:

$(document).bind( "mobileinit", function () 
{
    ...
    $.mobile.page.prototype.options.contentTheme = "z"; //your theme
    ...
});

Now, since there is no centralized hook - you will have to do the similar line for all theme options there are:

$.mobile.page.prototype.options.headerTheme
$.mobile.page.prototype.options.footerTheme

and so on.

I don't have a list of all of them, but a quick look through the jquery.mobile-1.0rc1.js searching for .prototype.options. reveals these:

$.mobile.page.prototype.options.backBtnTheme
$.mobile.page.prototype.options.headerTheme
$.mobile.page.prototype.options.footerTheme
$.mobile.page.prototype.options.contentTheme
$.mobile.listview.prototype.options.filterTheme

so it seems to me that you can go with these and discover more as you go. Note that not all of them are created like that - some are constructed dynamically in the code. Look for Theme string to see what I mean.

Update

$.mobile.page.prototype.options.theme should be updated as well - based on Moak's ment below.

The following worked for me. Just make sure it's called after JQM is initialized.

$.mobile.page.prototype.options.theme = "b";

本文标签： javascriptChange the default datatheme from jQuery MobileStack Overflow