Изменить data-theme в jQuery mobile

Question

Я хотел бы предоставить своему пользователю постоянную обратную связь после нажатия кнопки (например, с отступом или что-то в этом роде). Я попробовал:

$(this).data('theme','b');

Но это не работает.

В: Есть ли способ показать кнопку с отступом или изменить ее data-theme на лету?

Answer 1

Я знаю, что это старый вопрос, но я сам недавно столкнулся с этим препятствием.

Правильный способ сделать это будет следующим:

$(this).buttonMarkup({theme: 'b'});

Answer 2

Я искал способ динамического изменения темы в jQuery Mobile (например, при нажатии кнопки). Оказалось, что это сложнее, чем я себе представлял. В любом случае, вот мое мнение, вдохновленное различными решениями на SO и других сайтах:

// Dynamically changes the theme of all UI elements on all pages,
// also pages not yet rendered (enhanced) by jQuery Mobile.
$.mobile.changeGlobalTheme = function(theme)
{
    // These themes will be cleared, add more
    // swatch letters as needed.
    var themes = " a b c d e";

    // Updates the theme for all elements that match the
    // CSS selector with the specified theme class.
    function setTheme(cssSelector, themeClass, theme)
    {
        $(cssSelector)
            .removeClass(themes.split(" ").join(" " + themeClass + "-"))
            .addClass(themeClass + "-" + theme)
            .attr("data-theme", theme);
    }

    // Add more selectors/theme classes as needed.
    setTheme(".ui-mobile-viewport", "ui-overlay", theme);
    setTheme("[data-role='page']", "ui-body", theme);
    setTheme("[data-role='header']", "ui-bar", theme);
    setTheme("[data-role='listview'] > li", "ui-bar", theme);
    setTheme(".ui-btn", "ui-btn-up", theme);
    setTheme(".ui-btn", "ui-btn-hover", theme);
};

Существует некоторая дополнительная сложность, потому что я также хотел обновить тему страниц, еще не показанных JQM. Структурирование кода в парах селекторов и классов тем помогло мне сделать это более понятным.

Вы можете вызвать эту функцию для динамического обновления темы для всех элементов пользовательского интерфейса, например:

$.mobile.changeGlobalTheme("b");

Мне также нравятся решения, которые я видел, которые используют регулярные выражения, но в этом случае я предпочитаю подход, чтобы явно указывать селекторы и классы тем из-за ясности и простоты добавления новых элементов. Я выяснил пары селектор / класс, изучив дерево DOM.

Должен сказать, что я ценю Lisp-подобный вкус современного кода JavaScript.

Answer 3

Может быть, это полезно для вас: динамическое изменение цветового образца jquery

Я думаю, что это можно сделать с помощью кнопок таким же образом.

Answer 4

Для кнопки отправки внутри формы это работало для меня, используя jQuery Mobile 1.2.0:

$(this).buttonMarkup({theme: 'b'});
$(this).parent().buttonMarkup({ theme: "b" });