Changing multiple jquery mobile "data-theme" property from one place

javascript html jquery-mobile

12,499

This is from the jQuery Mobile Docs:

The data-theme attribute can be applied to the header and footer containers to apply any of the lettered theme color swatches. While the data-theme attribute could be added to the content container, we recommend adding it instead to div or container that has been assigned the data-role="page" attribute to ensure that the background color is applied to the full page. When this is done, all widgets on the page will also inherit the theme specified in the page container. However, headers and footers will default to theme "a". If you want to have a page with, for example, only theme "b" for all its elements, including its header and footer, you will need to specify data-theme="b" to the page div as well as the header and footer divs.

Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html

So basically if you add data-theme="a" to the data-role="page" tags then everything should inherit the a theme. You can test that by messing with the "theme swatch change" links at the top of the link above.

UPDATE

To programmatically change the theme of a page add this code to your site:

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
    $(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});

But this creates overhead for the user's browser while rendering the website so I suggest altering the hard-coded data-theme attributes on the data-role="page" tags.

UPDATE

You can also do this inside the mobileinit event handler by changing the page prototype:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.theme  = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

This will make any page without a set data-theme attribute default to the a theme.

Here is a demo: http://jsfiddle.net/tEbD5/3/

12,499

Author by

theNoobProgrammer

Updated on September 16, 2022

Comments

theNoobProgrammer over 1 year

I am using JQuery Mobile to develop my mobile website. Currently, I have to set the 'data-theme' property several times throughout my HTML document to be able to incorporate a particular theme. Is it possible to set the 'data-theme' property once, maybe in a javascript function, or something to that effect? The solution would need the theme to style all my elements. I attempted to solve the issue using CSS style-sheets, but it failed to work as a solution.

My Webpage's HTML:

<!DOCTYPE html> 
<html>

<head>
    <script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="CodeGeneral.js" type="text/javascript"></script>

    <link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
    <link rel="stylesheet" href="StyleMaincss.css">

    <title>Home</title>
</head>

<body onload="GenerateData();" data-role = "page" >
    <div data-role="header" class="HeaderBar">
    <img src="Logos v2/Header.png" alt="" class="HeaderImage">
    </div> 

    //Content on page

    <div data-role="footer" class="NavBar" data-position="fixed">       
    <div data-role="navbar">
           //Navigation button creation
        </div>
    </div>
</body>

My javascript:

$(document).delegate("[data-role='page']", 'pagebeforecreate', 
    function () {
         $(this).attr('data-theme', 'a')
    }
 ); 

function GenerateData() {
    //Things carried out during loading
}

theNoobProgrammer over 12 years

so is there a way to call a function to change the theme of all my pages at once? It's hard to go into every pages html and change it manually
Jasper over 12 years

$(document).delegate('[data-role="page"]', 'pagebeforecreate', function () {$(this).attr('data-theme', 'a')});
Jasper over 12 years

@theNewbProgrammer The block of code I posted should be placed in the global context to make sure it has already been parsed when the pagebeforecreate event fires.
Jasper over 12 years

@theNewbProgrammer I tested the code and it needed a tweak, here is what I found to work: $(document).delegate('[data-role="page"]', 'pagecreate', function (e) {$(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');});. Here is a demo: jsfiddle.net/tEbD5 (notice that I set the data-theme for the page to be e but then programmatically change it to a)
Jasper over 12 years

@theNewbProgrammer check-out the two updates in my answer. The first one has been changed so it is now different than your code. Both of these updates have demos to show they work.
theNoobProgrammer over 12 years

sorry about that, i made the comment before i saw the change
theNoobProgrammer over 12 years

let us continue this discussion in chat
Josh Mouch about 11 years

This works for simple cases, but from what I can tell, when you apply a data-theme, that data-theme also gets applied to nested jquery mobile widgets. All of these nested widgets will also need to have their data-theme attribute and their classes updated. To complicate things further, it looks like some widgets apply parent data-theme's to particular nested widgets.
Jasper about 11 years

@Josh You are correct, I've got another answer that does more than this, finding different types of widgets and updating their classes and data-attributes. I can't find it right now but if you care to take a look it's under my jQuery Mobile answers. Although I'm sure it won't work in all situations without expanding on the code.