javascript 从一处更改多个 jquery 移动“数据主题”属性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8477411/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing multiple jquery mobile "data-theme" property from one place
提问by theNoobProgrammer
I am using jquery mobile to develop my mobile website. I have to set the "data-theme" property from many places to incorporate a particular theme. Is there a place where I can change it once (like in a javascript function or something) but it would result in all my elements getting the theme? I have tried putting it into the style sheet but it doesnt work.
我正在使用 jquery mobile 开发我的移动网站。我必须从许多地方设置“数据主题”属性以合并特定主题。有没有我可以更改一次的地方（比如在 javascript 函数或其他东西中），但它会导致我的所有元素都获得主题？我试过把它放到样式表中，但它不起作用。
My htmlCode:
我的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:
我的javascript：
$(document).delegate("[data-role='page']", 'pagebeforecreate',
function () {
$(this).attr('data-theme', 'a')
}
);
function GenerateData() {
//Things carried out during loading
}
采纳答案by Jasper
This is from the jQuery Mobile Docs:
这是来自 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.
data-theme 属性可以应用于页眉和页脚容器以应用任何字母主题色板。虽然可以将 data-theme 属性添加到内容容器中，但我们建议将其添加到已分配 data-role="page" 属性的 div 或容器中，以确保将背景颜色应用于整个页面。完成后，页面上的所有小部件也将继承页面容器中指定的主题。但是，页眉和页脚将默认为主题“a”。例如，如果您希望页面的所有元素（包括页眉和页脚）都只有主题“b”，则需要为页面 div 以及页眉和页脚指定 data-theme="b"页脚 div。
Source: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html
来源：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 atheme. You can test that by messing with the "theme swatch change" links at the top of the link above.
所以基本上如果你添加data-theme="a"到data-role="page"标签，那么一切都应该继承a主题。您可以通过弄乱上面链接顶部的“主题色板更改”链接来测试。
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-themeattributes on the data-role="page"tags.
但这会在呈现网站时为用户的浏览器带来开销，因此我建议更改标签data-theme上的硬编码属性data-role="page"。
UPDATE
更新
You can also do this inside the mobileinitevent handler by changing the page prototype:
您还可以mobileinit通过更改以下内容在事件处理程序中执行此操作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-themeattribute default to the atheme.
这将使没有设置data-theme属性的任何页面默认为a主题。
Here is a demo: http://jsfiddle.net/tEbD5/3/
这是一个演示：http: //jsfiddle.net/tEbD5/3/
