Question

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

Answer 1

你必须在页面上搜索所有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');

Answer 2

不知道为什么这会有效，但是更改类然后更改主题，然后触发'create'对我有用 - 希望它对某人有帮助。

$("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 3

嗯，这取决于你尝试改变的元素类型。这是你可以切换按钮元素主题的方法：

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 =＆＃34;按钮＆＃34;的锚标记：

$(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 4

我注意到如果你更改“data-theme”属性，jQuery Mobile会在mouseover事件上刷新你的主题。这个解决方案很糟糕，但很简单。

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

很抱歉复活了一个死的问题，但我发现了这个问题Google（SERP上的＃6为“jquery mobile change theme”）并且没有正确答案。

Answer 5

这对我有用。

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

Answer 6

嗯，Corey Docken的答案基本上有效：

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

诀窍在于，当您根据选择的数据主题悬停在元素上时，jQuery mobile始终会更改类。如果更改数据主题，则下一个悬停/鼠标悬停事件将根据新主题更改类。

嗯，它只适用于新主题的字母高于旧主题的字母。旧主题的课程仍然存在。由于字母较低的字母放在字母较低的字母后面，较高的字母会赢。

Answer 7

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

Answer 8

如果您使用主题滚轮（themeroller.jquerymobile.com），那么您可以调整自己的颜色并在css上导出每个主题，然后以编程方式：

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

我认为应该这样做

Answer 9

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

获取具有data-role =＆＃34; page＆＃34;

的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区块结束时尚未抛出警报。

Jquery mobile：点击更改主题

9 个答案: