JQuery Mobile default data-theme
Question
Does anyone know how to set a default data-theme for 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 answers
solution1
30 2011-08-16 09:55:52
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
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
solution2
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.
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>
So in "custom-scripting.js" put the following...
$(document).bind("mobileinit", function () {
$.mobile.listview.prototype.options.headerTheme = "a";
});
Where "a" is the theme you want to be applied to nested headers..
Or you can just override it in the jquery mobile source, search for "headerTheme" it will be around line 5020
solution3
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. add the data-theme="z" to your element
<body>
<div data-role="page" id="apply" data-theme="z">
...
</div>
</body>
solution4
1 2011-02-04 14:18:42
据我所知，你必须为页面div设置一个主题，它将在内部继承。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.