jquery手机：点击更改主题

Question

我有一个基本的主题列表a。我试图找到一种方法来改变主题，当点击一个按钮。尝试$('a li').attr('data-theme','a');结合列表刷新没有运气。在那里取得成功？

Answer 1

$('a li').data('theme', 'a'); 
          //<-- use the data() function to change data attributes 

Answer 2

我注意到如果你改变了“data-theme”属性，jQuery Mobile会刷新mouseover事件的主题。这个解决方案有点破解，但很简单。

$("a li").attr("data-theme", "a").trigger("mouseout") 

对不起，复活一个死的问题，但我发现这个问题，谷歌（在SERP的“jQuery Mobile的变化主题”＃6），也没有正确的答案。

Answer 3

您将不得不搜索页面中所有的ui-body-，ui-button-up，ui-button-down，ui-button-hover和ui-bar-classes，在结尾处查找字母其中每个类都删除这些类，然后在每个类的末尾添加所需的主题字母。我正在研究一个插件来做到这一点。

下面将改变页面设置为主题D的酒吧主题B：

var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]"); 

$(pageThemeClasses).removeClass('ui-bar-b'); 
$(pageThemeClasses).addClass('ui-bar-b'); 

Answer 4

这为我工作。

$("a li").removeClass("ui-body-b"); //remove old theme 
$("a li").addClass("ui-body-a"); //add new theme 

Answer 5

不知道为什么这个工程，但改变类然后主题，然后触发'创造'适用于我 - 希望它可以帮助某人。

$("div[data-role='collapsible']").bind('expand', function() { 
$(this).find("a[data-theme='c']").removeClass('ui-btn-up-c').addClass('ui-btn-up-b').attr('data-theme', 'b').trigger('create'); 
}); 

$("div[data-role='collapsible']").bind('collapse', function() { 
$(this).find("a[data-theme='b']").removeClass('ui-btn-up-b').addClass('ui-btn-up-c').attr('data-theme', 'c').trigger('create'); 
}); 

Answer 6

那么，这取决于你试图改变什么样的元素。 这是你如何能拨动按钮元素主题：

var oT = $(this).attr('data-theme'); // old theme 
var nT = (oT == 'a' ? 'e' : 'a'); // new theme 

$(this).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 
$(this).parent('div').removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

相反，如果它与数据角色的锚标记=“按钮”：

$(this).removeClass('ui-btn-hover-' + oT).addClass('ui-btn-hover-' + nT).removeClass('ui-btn-up-' + oT).addClass('ui-btn-up-' + nT).attr('data-theme', nT); 

简单，使用浏览器控制台检查元素（和父/子元素）数据主题属性和类定义在哪里。

Answer 7

那么从科瑞Docken得到的答案基本工作原理：

$("a li").attr("data-theme", "a").trigger("mouseout") 

诀窍是，当你根据已选定的数据主题将鼠标悬停在一个元素jQuery Mobile的总是变化的类。 如果更改数据主题，则下一个悬停/ mouseover事件将根据新主题更改类。

那么，它只适用于新的主题比旧的主题有更高的字母。旧主题中的课程依然存在。由于具有较高字母的类放在具有较低字母的类之后，较高的字母会胜出。

Answer 8

如果您使用主题滚筒（themeroller.jquerymobile。COM），那么你可以调整自己的颜色和导出每个主题一个CSS，然后以编程方式：

$("#idoflink").attr("href", "theotherstyle.css"); 

，我认为它应该做的

Answer 9

将这个代码放到头：

<link rel="stylesheet" href="../css/themes/default/jquery.mobile-1.4.5.min.css"> 
<script> 
    $(document).on("pagecreate", function() { 
     $("#theme-selector input").on("change", function(event) { 
      var themeClass = $("#theme-selector input:checked").attr("id"); 

      $("#testpage").removeClass("ui-page-theme-a ui-page-theme-b").addClass("ui-page-theme-" + themeClass); 
     }); 
    }); 
</script> 

$ （“#testpage”）是示例组件的id（这将是body内部主div上的id）。

添加到身体：

<div class="ui-field-contain" id="theme-selector"> 
      <fieldset data-role="controlgroup" data-type="horizontal"> 
       <legend>Theme:</legend> 
       <label for="a">A</label> 
       <input type="radio" name="theme" id="a" checked> 
       <label for="b">B</label> 
       <input type="radio" name="theme" id="b">  
      </fieldset> 
     </div> 

我希望这是回答你想达到的目标。当然，您可以轻松地用“按钮”替换“收音机”并稍微修改一下。

Answer 10

在2018年这对我有用，只需调整您从ThemeRoller下载的不同主题的值。

获取谁拥有数据的作用在div =“页”

var lastTheme = 'a'; 
function ThemeSwap() { 
    var rootDiv = $('#IdOfDivMarkedAsDataRolePage'); 

    if (lastTheme === 'a') { 
     rootDiv.removeClass('ui-page-theme-a'); 
     rootDiv.addClass('ui-page-theme-b'); 
     lastTheme = 'b'; 
    } 
    else if (lastTheme === 'b') { 
     rootDiv.removeClass('ui-page-theme-b'); 
     rootDiv.addClass('ui-page-theme-c'); 
     lastTheme = 'c'; 
    } 
    else if (lastTheme === 'c') { 
     rootDiv.removeClass('ui-page-theme-c'); 
     rootDiv.addClass('ui-page-theme-a'); 
     lastTheme = 'a'; 
    } 
    else 
     alert('bad theme swapping. last theme = ' + lastTheme); 

    rootDiv.trigger('create'); 
    return true; 
} 

警报尚未在ifelse块的末尾还没有抛出。