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
}
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
}
1 Answer
Reset to default 6This 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 remend 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./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./mobile/1.0/jquery.mobile-1.0.min.css" />
<script src="http://code.jquery./jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
$.mobile.page.prototype.options.theme = "a";
});
</script>
<script src="http://code.jquery./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/tEbD5/3/