如何在jquery mobile中动态更改主题？ [英] How to change theme dynamically in jquery mobile?

问题描述

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

解决方案

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

  //设置您的新主题字母
 var theme ='e'; 
 
 //重置所有按钮部件
 $ .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-'+主题）
 .attr（'data-theme'，theme）; 
 
 //重置页眉/页脚小部件
 $ .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主题，主题）; 
 
 //重置页面部件
 $ .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/

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

$ b 更新

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

  var theme ='c'; 
 
 //这段代码和上面相同代码之间的唯一区别是它没有定位（'。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）; 
 
 //定位列表divider元素，然后遍历它们来检查它们是否有主题集，如果设置了主题什么都不做，否则改变它的主题是`b`（这是列表分隔符的jQuery Mobile默认值）
 $ .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 ）; 
} 
}）
 
 / *此代码示例的其余部分与上面的示例相同* / 
  

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

I am creating a mobile web applications using jQuery Mobile.

I am using theme-b for every page and I would like to change to another theme dynamically for every page. How can I change the theme dynamically?

解决方案

You can target specific classes that relate to specific widgets, reset their classes, and then add the themed class of your choosing:

    //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/

This is by no means a fully functional code snippet, you will need to find any other widgets that you want updated when you switch the theme and add them to the code above. You can find what classes each widget has easily by using FireBug or another Developer Console.

UPDATE

When you take into account the data-role="list-divider elements this gets a little tricky:

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*/

Here is a demo: http://jsfiddle.net/VNXb2/7/

这篇关于如何在jquery mobile中动态更改主题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！