2
Можно ли изменить тему все страниц на лету?JQuery mobile: обновить тему для всех форм сразу
Пример (ниже код и here) содержит: используется
- шаблона одной страницы (каждая форма называется с помощью Ajax).
- Каждая форма имеет кнопку назад
После применения выбранной темы - все формы должны быть обновлены до новой темы. В моем примере обновляется только текущая форма.
I`ve тщательно изучены, прежде чем задать вопрос здесь, но не смогли найти ответ на вопрос о теме немедленно прокатки для всех форм, т.е.
- Тема может быть применена ко всем страницам во время "mobileinit" event
- Тема может по applited to element
- и так далее
заранее спасибо
Html код:
<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 код:
$(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);
});
});
});
+1 для приятного вопроса. как это? http://jsfiddle.net/Palestinian/7DfkU/7/ ** Примечание **: не используйте '.ready()' в jQM. Используйте события jQM. – Omar
@ Омар, спасибо за ваш ответ. Можете ли вы разместить свой ответ отдельно, я буду принимать его –
Я рад, что это сработало для вас. Вы сделали 99% работы, я сделал остальные;) Кстати, для кнопок вы можете использовать '$ ('. Selector'). ButtonMarkup ('theme', 'a');' проще, чем добавлять/удаление классов. Остальные должны иметь сходные методы; Мне нужно сначала попробовать их и сообщить. – Omar