jquery-mobile - jQuerymobileのデータテーマを変更する

Question

ユーザーがボタンを押した後（インデントされているなど）、永続的なフィードバックをユーザーに提供したいと思います。私は試した：

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

しかし、それはうまくいきません。

Q：インデントされたボタンを表示したり、data-themeその場で変更したりする方法はありますか？

Answer 1

これは古い質問ですが、最近、このハードルに遭遇しました。

これを行う正しい方法は次のとおりです。

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

Answer 2

私はjQueryMobileでテーマをグローバルに動的に変更する方法を探していました（ボタンのクリックなど）。私がこれを行うと想像したよりも複雑であることが判明しました。とにかく、これは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でまだ表示されていないページのテーマも更新したかったので、さらに複雑になりました。セレクターとテーマクラスのペアでコードを構造化することで、これがより明確になりました。

この関数を呼び出して、すべてのUI要素のテーマを動的に更新できます。次に例を示します。

$.mobile.changeGlobalTheme("b");

正規表現を使用するソリューションも気に入っていますが、この場合、新しいアイテムを明確かつ簡単に追加できるため、セレクターとテーマクラスを明示的に指定するアプローチを好みます。DOMツリーを調べて、セレクターとクラスのペアを見つけました。

私は現代のJavaScriptコードのLispのようなフレーバーに感謝していると言わなければなりません。

Answer 3

多分これはあなたに役立つでしょう： jqueryモバイルカラー見本を動的に変更する

ボタンでも同じようにできると思います。

Answer 4

フォーム内の送信ボタンの場合、これはjQueryMobile1.2.0を使用して機能しました。

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