我有一个主题a的基本列表。我试图找到一种方法来点击按钮时更改主题。试过 $('a li').attr('data-theme','a'); 结合列表刷新没有运气。那里有成功吗？
我有一个主题a的基本列表。我试图找到一种方法来点击按钮时更改主题。试过 $('a li').attr('data-theme','a'); 结合列表刷新没有运气。那里有成功吗？
您必须在页面中搜索所有ui-body-，ui-button-up，ui-button-down，ui-button-hover和ui-bar-类，在每个类的末尾找到字母，删除这些类，然后在每个类的末尾添加所需的主题字母。我正在制作一个插件来做到这一点。
下面会将主题D的页面设置更改为主题B：
var pages = $("div[data-role='page']"), pageThemeClasses = $(pages+"[class$=d]");
$(pageThemeClasses).removeClass('ui-bar-b');
$(pageThemeClasses).addClass('ui-bar-b');
不知道为什么这有效，但改变了主题，然后触发'创建'对我有用 - 希望它对某人有所帮助。
$("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');
});
嗯，这取决于你想改变什么样的元素。 这是你可以切换按钮元素主题的方法：
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);
相反，如果它是一个带有data-role =“button”的锚标签：
$(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);
简单地说，使用浏览器控制台来检查元素（和父/子元素）数据主题属性和类的定义位置。
我注意到，如果您更改“data-theme”属性，jQuery Mobile将在mouseover事件上刷新您的主题。这个解决方案有点像黑客，但它很简单。
$("a li").attr("data-theme", "a").trigger("mouseout")
很抱歉复活了一个死的问题，但我发现了这个问题Google（SERP上的＃6为“jquery mobile change theme”）并且没有正确答案。
好吧，Corey Docken的答案基本上有效：
$("a li").attr("data-theme", "a").trigger("mouseout")
诀窍在于，当您根据选择的数据主题悬停在元素上时，jQuery mobile始终会更改类。 如果更改数据主题，则下一个悬停/鼠标悬停事件将根据新主题更改类。
嗯，它只适用于新主题的字母高于旧主题的字母。旧主题的课程仍然存在。由于具有较高字母的类放置在具有较低字母的字母之后，较高的字母获胜。
这对我有用。
$("a li").removeClass("ui-body-b"); //remove old theme
$("a li").addClass("ui-body-a"); //add new theme
$('a li').data('theme', 'a');
//<-- use the data() function to change data attributes
如果您使用主题滚轮（themeroller.jquerymobile.com），那么您可以调整自己的颜色并在css上导出每个主题，然后以编程方式：
$("#idoflink").attr("href", "theotherstyle.css");
我认为应该这样做
将此代码置于头部：
<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>
我希望这是你想要实现的目标的答案。当然，您可以轻松地用“按钮”替换“无线电”并稍微重新设置它。
在2018年，这适用于我，只需调整您从ThemeRoller下载的不同主题的值。
获取具有data-role =“page”的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块结束时尚未抛出警报。