Javascript JQuery Mobile 默认数据主题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4891906/
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
JQuery Mobile default data-theme
提问by Renato Aquino
Does anyone know how to set a defaultdata-theme for jquery-mobile?
有谁知道如何为 jquery-mobile设置默认数据主题？
It looks like it′s necessary to set the data-theme for every component.
看起来有必要为每个组件设置数据主题。
Even when you set the data-theme for the page data-role it is not respected by loaded lists and other components.
即使您为页面数据角色设置了数据主题，加载的列表和其他组件也不会遵守它。
Am I missing some page of the manual?
我错过了手册的某些页面吗？
回答by Smamatti
Like Joel said, you have to overwrite the default values. At the moment it seems like there is no other way.
就像乔尔说的，你必须覆盖默认值。目前看来，没有其他办法。
Take Joel's sample code:
以乔尔的示例代码为例：
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
Customize your custom-scripting.js
自定义您的 custom-scripting.js
This is a sample code with a few more options you can configure:
这是一个示例代码，您可以配置更多选项：
$(document).bind("mobileinit", function () {
// Navigation
$.mobile.page.prototype.options.backBtnText = "Go back";
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnTheme = "d";
// Page
$.mobile.page.prototype.options.headerTheme = "a"; // Page header only
$.mobile.page.prototype.options.contentTheme = "c";
$.mobile.page.prototype.options.footerTheme = "a";
// Listviews
$.mobile.listview.prototype.options.headerTheme = "a"; // Header for nested lists
$.mobile.listview.prototype.options.theme = "c"; // List items / content
$.mobile.listview.prototype.options.dividerTheme = "d"; // List divider
$.mobile.listview.prototype.options.splitTheme = "c";
$.mobile.listview.prototype.options.countTheme = "c";
$.mobile.listview.prototype.options.filterTheme = "c";
$.mobile.listview.prototype.options.filterPlaceholder = "Filter data...";
});
There should be also other options like:
还应该有其他选项，例如：
$.mobile.dialog.prototype.options.theme
$.mobile.selectmenu.prototype.options.menuPageTheme
$.mobile.selectmenu.prototype.options.overlayTheme
You might be able to find more settings here: http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js
您可以在此处找到更多设置：http: //code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.js
回答by jBeas
For nested list views, to control the header theme you need to override the default option that is setting the nested header theme to blue.
对于嵌套列表视图，要控制标题主题，您需要覆盖将嵌套标题主题设置为蓝色的默认选项。
To do this you simply add the following in between jquery loading and jquery.mobile.js loading.
为此，您只需在 jquery 加载和 jquery.mobile.js 加载之间添加以下内容。
example:
例子：
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded. Thus, we recommend linking to your JavaScript files in the following order:
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
因为 mobileinit 事件在执行时立即触发，所以您需要在加载 jQuery Mobile 之前绑定您的事件处理程序。因此，我们建议按以下顺序链接到您的 JavaScript 文件：
<script src="jquery.js"></script> <script src="custom-scripting.js"></script> <script src="jquery-mobile.js"></script>
So in "custom-scripting.js" put the following...
所以在“custom-scripting.js”中输入以下内容...
$(document).bind("mobileinit", function () {
$.mobile.listview.prototype.options.headerTheme = "a";
});
Where "a" is the theme you want to be applied to nested headers..
其中“a”是您要应用于嵌套标题的主题。
Or you can just override it in the jquery mobile source, search for "headerTheme" it will be around line 5020
或者您可以在 jquery mobile 源中覆盖它，搜索“headerTheme”它将在第 5020 行附近
回答by Phill Pafford
Themes a,b,c,d and e are all in the css file, if you want a custom theme you can use f-z, copy a and change it to your theme letter. add the data-theme="z" to your element
主题 a、b、c、d 和 e 都在 css 文件中，如果您想要自定义主题，可以使用 fz，复制 a 并将其更改为您的主题字母。将 data-theme="z" 添加到您的元素中
<body>
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>
回答by naugtur
As far as I've seen you have to set a theme for a page div and it will be inherited inside.
就我所见，您必须为页面 div 设置一个主题，它将在内部继承。
