JQuery mobile: изменение темы при нажатии

Ответ 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);

Вместо этого, если это якорный тег с ролью данных = "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 обновит вашу тему в событии mouseover. Это решение вроде хачка, но оно просто.

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

Извините за воскрешение мертвого вопроса, но я нашел этот вопрос Google (# 6 в SERP для темы jQuery mobile change) и не было правильного ответа.

Ответ 5

Это сработало для меня.

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

Ответ 6

Ну, ответ от Corey Docken в основном работает:

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

Трюк заключается в том, что jQuery mobile всегда меняет классы, когда вы наводите курсор на элемент по выбранной теме данных. Если вы измените тему данных, следующее событие hover/mouseover изменит классы в соответствии с новой темой.

Ну, это работает только в том случае, если новая тема имеет более высокую букву, чем старая. Классы из старой темы остаются. Поскольку классы с более высокой буквой помещаются после букв с нижней буквой, выигрывает высшая буква.

Ответ 7

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

Ответ 8

Если вы использовали тематический ролик (themeroller.jquerymobile.com), вы можете настроить собственные цвета и экспортировать каждую тему на css, затем программно:

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

Я думаю, что он должен делать

Ответ 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" ) является идентификатором примерного компонента (это будет идентификатор на основном div внутри тела).

Добавить в тело:

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

Надеюсь, это ответ на то, чего вы пытаетесь достичь. Конечно, вы можете легко заменить "радио" на "button" и немного переделать его.

Ответ 10

В 2018 году это работает для меня, просто настройте свои значения для разных тем, загруженных с ThemeRoller.

Получить div, у которого есть data-role = "page"

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.