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

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

Ну, это зависит от того, какой элемент вы пытаетесь изменить. Вот как можно переключать тему элементов кнопки:

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

Просто используйте консоли браузера, чтобы проверить, где определены атрибуты и классы элемента (и родительских / дочерних элементов) темы данных.

Answer 3

Не знаю, почему это работает, но меняю классы, затем тему, затем запускаю «создать», и я надеюсь, что это кому-нибудь поможет.

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

Ну, ответ от Кори Доккена в основном работает:

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

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

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

Answer 5

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

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

Answer 6

Я заметил, что если вы измените атрибут data-theme, jQuery Mobile обновит вашу тему при наведении курсора мыши. Это решение взломано, но просто.

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

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

Answer 7

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

Answer 8

Поместите этот код в голову:

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

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

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

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

Answer 10

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