Is it possible to change theme of all pages on the fly?
Example (code below and here) contains:
- Single page template is used (each form is called via Ajax ).
- Each form has back button
After applying chosen theme - all forms have to be updated to new theme. Only current form is updated in my example.
I`ve researched thoroughly before asking the question here but could not find an answer about theme rolling immediately for all forms, i.e.
- Theme can be applied to all pages during "mobileinit" event
- Theme can by applited to element
- and so on
Thanks in advance
Html code:
<div data-role="page" data-theme="a" id="mainpage">
<div data-role="header" data-position="inline">
<h1>Name</h1>
<a href="#settings-page" class="ui-btn-right" data-role="button" data-icon="gear">Settings</a>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<li>
<a href="#date-requirements" class="ui-link-inherit">Requirements</a>
</li>
</ul>
<input type="button" value="Button" />
</div>
</div>
<div data-role="page" data-theme="a" id="date-requirements" data-add-back-btn="true">
<div data-role="header" data-position="inline">
<h1>Requirements</h1>
</div>
</div>
<div data-role="page" data-theme="a" id="settings-page" data-add-back-btn="true">
<div data-role="header" data-position="inline">
<h1>Settings</h1>
</div>
<div data-role="content">
<div data-role="collapsible" id="skin-settings">
<h4>Skin</h4>
<ul data-role="listview">
<li><a href="#">Dark</a></li>
<li><a href="#">Blue</a></li>
<li><a href="#">Grey</a></li>
<li><a href="#">White</a></li>
<li><a href="#">Yellow</a></li>
</ul>
</div>
</div>
</div>
JS code:
$(document).ready(function(){
// configure transition effect
$.mobile.changePage.defaults.allowSamePageTransition = true;
$.mobile.changePage.defaults.transition="slide";
// configure back button
$.mobile.page.prototype.options.addBackBtn = true;
$.mobile.page.prototype.options.backBtnText = "Back";
// set skin
$('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
var currentTextSkin= $.trim($(this).text());
var newTheme;
switch (currentTextSkin)
{
case "Dark":
newTheme="a";
break;
case "Blue":
newTheme="b";
break;
case "Grey":
newTheme="c";
break;
case "White":
newTheme="d";
break;
case "Yellow":
newTheme="e";
break;
default:
newTheme="a";
}
var rmbtnClasses = '';
var rmhfClasses = '';
var rmbdClassess = '';
var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z" ];
$.each(arr,function(index, value){
rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
rmhfClasses = rmhfClasses + " ui-bar-"+value;
rmbdClassess = rmbdClassess + " ui-body-"+value;
});
// reset all the buttons widgets
$.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
// reset the header/footer widgets
$.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
// reset the page widget
$.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
// target the list divider elements, then iterate through them and
// change its theme (this is the jQuery Mobile default for
// list-dividers)
$.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
$(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
});
});
});