Jquery mobile：点击更改主题答案

【问题标题】：Jquery mobile: Change theme on clickJquery mobile：点击更改主题
【发布时间】：2011-11-01 19:58:31
【问题描述】：

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

【问题讨论】：

【解决方案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');

【讨论】：

【解决方案2】：

不知道为什么会这样，但是改变类然后是主题，然后触发“创建”对我有用 - 希望它对某人有所帮助。

$("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');
});

【讨论】：

【解决方案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="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);

只需使用浏览器控制台检查元素（和父/子元素）数据主题属性和类的定义位置。

【讨论】：

【解决方案4】：

我注意到如果您更改“data-theme”属性，jQuery Mobile 会在鼠标悬停事件时刷新您的主题。这个解决方案有点像 hack，但很简单。

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

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

【讨论】：

抱歉，这似乎只在“pagebeforeshow”活动期间有效。

【解决方案5】：

好吧，Corey Docken 的回答基本上是有效的：

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

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

嗯，它只有在新主题的字母比旧主题高的情况下才有效。旧主题的课程仍然存在。由于字母较高的类被放置在字母较低的类之后，因此较高的字母获胜。

【讨论】：

【解决方案6】：

这对我有用。

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

【讨论】：

【解决方案7】：

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

【讨论】：

你确定吗？那不是jquery数据方法吗？ api.jquery.com/jQuery.data

【解决方案8】：

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

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

我认为应该这样做

【讨论】：

【解决方案9】：

把这段代码放到head里：

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

我希望这是您想要实现的目标的答案。当然，您可以轻松地将“收音机”替换为“按钮”并稍微重新设置样式。

【讨论】：

【解决方案10】：

在 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 块的末尾还没有抛出警报。

【讨论】：