JQuery Mobile默认数据主题
[英]JQuery Mobile default data-theme
问题描述
Does anyone know how to set a default data-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? 我错过了手册的某些页面吗？
4 个解决方案
解决方案1
30 2011-08-16 09:55:52
Like Joel said, you have to overwrite the default values. 像Joel说的那样，你必须覆盖默认值。 At the moment it seems like there is no other way. 目前似乎没有别的办法。
Take Joel's sample code: 以Joel的示例代码为例：
<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
解决方案2
9 2011-08-02 01:54:11
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 loading和jquery.mobile.js loading之间添加以下内容即可。
example: 例：
Because the mobileinit event is triggered immediately upon execution, you'll need to bind your event handler before jQuery Mobile is loaded.
<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移动源中覆盖它，搜索“headerTheme”它将在5020行附近
解决方案3
7 2011-03-08 15:47:13
Themes a,b,c,d and e are all in the css file, if you want a custom theme you can use fz, copy a and change it to your theme letter. 主题a，b，c，d和e都在css文件中，如果你想要一个自定义主题你可以使用fz，复制并将其更改为你的主题字母。 add the data-theme="z" to your element 将data-theme =“z”添加到元素中
<body>
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>
解决方案4
1 2011-02-04 14:18:42
据我所知，你必须为页面div设置一个主题，它将在内部继承。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.