如何在jquery mobile中动态改变主题？
如何在jquery mobile中动态改变主题？
提问于 2011-12-28 21:54:13
我正在使用jQuery移动创建一个移动web应用程序。
我使用theme-b为每一页，我想改变到另一个动态为每一页的主题。如何动态更改主题？
回答 2
Stack Overflow用户
发布于 2013-01-11 20:50:38
上面的答案对我帮助很大，我根据我的需要做了一点修改，因为我正在使用更多的主题，并期望有20多个主题。以下是我所做的
function updateTheme(newTheme) {
//alert("In refresh");
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);
})现在，当我通过json从服务器获得新的主题时，我只是调用这个方法，并将新的主题作为param。
向Rajesh J致敬
Stack Overflow用户
发布于 2015-09-18 20:47:31
拉杰什的回答对我帮助很大。但是Rajesh，你错过了一个重要的类-‘ui-page-theme*’，所以我修改了你的答案，现在它非常适合jQuery 1.4.5 (再次)……
var updateTheme = function(newTheme) {
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']; // I had themes from a to s
$.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 + ' ui-page-theme-'+ 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 + ' ui-page-theme-'+ 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);
});
};页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8656801
复制相关文章
相似问题