如何在jquery mobile中动态更改主题？

我正在使用jQuery Mobile创建移动Web应用程序。

我在每个页面都使用theme-b ，我想为每个页面动态更改为另一个主题。 如何动态更改主题？

Answer 1

您可以定位与特定小部件相关的特定类，重置其类，然后添加您选择的主题类：

  //set your new theme letter var theme = 'e'; //reset all the buttons widgets $.mobile.activePage.find('.ui-btn') .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') .addClass('ui-btn-up-' + theme) .attr('data-theme', theme); //reset the header/footer widgets $.mobile.activePage.find('.ui-header, .ui-footer') .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-' + theme) .attr('data-theme', theme); //reset the page widget $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e') .addClass('ui-body-' + theme) .attr('data-theme', theme); 

http://jsfiddle.net/VNXb2/1/

这绝不是一个function齐全的代码片段，当您切换主题并将其添加到上面的代码时，您需要找到要更新的任何其他小部件。 您可以使用FireBug或其他开发者控制台轻松找到每个窗口小部件的类。

UPDATE

当你考虑data-role="list-divider元素时，这有点棘手：

 var theme = 'c'; //the only difference between this block of code and the same code above is that it doesn't target list-dividers by calling: `.not('.ui-li-divider')` $.mobile.activePage.find('.ui-btn').not('.ui-li-divider') .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e') .addClass('ui-btn-up-' + theme) .attr('data-theme', theme); //target the list divider elements, then iterate through them to check if they have a theme set, if a theme is set then do nothing, otherwise change its theme to `b` (this is the jQuery Mobile default for list-dividers) $.mobile.activePage.find('.ui-li-divider').each(function (index, obj) { if ($(this).parent().attr('data-divider-theme') == 'undefined') { $(this).removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e') .addClass('ui-bar-b') .attr('data-theme', 'b'); } }) /*The rest of this code example is the same as the above example*/ 

这是一个演示： http ： //jsfiddle.net/VNXb2/7/

Answer 2

上面的回答对我有很大帮助，我根据自己的需要对其进行了一些修改，因为我使用的是themeroller，并期望有超过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从服务器获取新主题时，我只使用新主题作为参数调用此方法。

关心Rajesh J.

Answer 3

Rajesh的答案对我帮助很大……但Rajesh，你错过了一个重要的课程 – ‘ui-page-theme- *’，所以我修改了你的答案，现在它非常适合jQuery Mobile 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); }); };