我的htmlCode：
<!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>
我的javascript：
$(document).delegate("[data-role='page']",'pagebeforecreate',function () {
$(this).attr('data-theme','a')
}
);
function GenerateData() {
//Things carried out during loading
}
解决方法
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.
资料来源：http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
所以基本上如果你添加data-theme =“a”到data-role =“page”标签,那么所有的东西都应该继承一个主题.您可以通过在上面链接顶部的“主题样本更改”链接进行测试.
UPDATE
$(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');
});
但是,这会在渲染网站时为用户的浏览器创造开销,因此我建议更改data-role =“page”标签上的硬编码数据主题属性.
UPDATE
您也可以通过更改页面原型来在mobileinit事件处理程序中执行此操作：
<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>
这是一个演示：http://jsfiddle.net/tEbD5/3/
