jquery-mobile - Jquery モバイル: すべてのフォームのテーマをすぐに更新する

Question

その場ですべてのページのテーマを変更することは可能ですか?

例 (以下のコードとこちらのコード) には以下が含まれます。

1. 単一ページ テンプレートが使用されます (各フォームは Ajax 経由で呼び出されます)。
2. 各フォームに戻るボタンがあります

選択したテーマを適用した後、すべてのフォームを新しいテーマに更新する必要があります。私の例では、現在のフォームのみが更新されます。

ここで質問する前に徹底的に調査しましたが、すべてのフォームですぐにローリングされるテーマについての答えを見つけることができませんでした。

• 「mobileinit」イベント中にすべてのページにテーマを適用できます
• テーマは要素に適用できます
• 等々

前もって感謝します

HTML コード:

<div data-role="page" data-theme="a" id="mainpage">
    <div data-role="header" data-position="inline">
        <h1>Name</h1>
            <a href="#settings-page" class="ui-btn-right" data-role="button" data-icon="gear">Settings</a>
</div>
<div data-role="content">
        <ul data-role="listview" data-inset="true">
            <li>
                <a href="#date-requirements" class="ui-link-inherit">Requirements</a>
            </li>
        </ul>
        <input type="button" value="Button" />
</div>
</div>
<div data-role="page" data-theme="a" id="date-requirements"  data-add-back-btn="true">
    <div data-role="header" data-position="inline">
        <h1>Requirements</h1>
    </div>
</div>
<div data-role="page" data-theme="a" id="settings-page"  data-add-back-btn="true">
    <div data-role="header" data-position="inline">
        <h1>Settings</h1>
    </div>
    <div data-role="content">
                <div data-role="collapsible" id="skin-settings">
                    <h4>Skin</h4>
                    <ul data-role="listview">
                        <li><a href="#">Dark</a></li>
                        <li><a href="#">Blue</a></li>
                        <li><a href="#">Grey</a></li>
                        <li><a href="#">White</a></li>
                        <li><a href="#">Yellow</a></li>
                    </ul>
                </div>
    </div>
</div>

JS コード:

    $(document).ready(function(){
    // configure transition effect
    $.mobile.changePage.defaults.allowSamePageTransition = true;
    $.mobile.changePage.defaults.transition="slide";
    // configure back button
    $.mobile.page.prototype.options.addBackBtn = true;
    $.mobile.page.prototype.options.backBtnText = "Back";
    // set skin
    $('#skin-settings').find('ul').children('li').bind('touchstart mousedown', function(e) {
        var currentTextSkin= $.trim($(this).text());
        var newTheme;
        switch (currentTextSkin)
        {
            case "Dark":
                newTheme="a";
                break;
            case "Blue":
                newTheme="b";
                break;
            case "Grey":
                newTheme="c";
                break;
            case "White":
                newTheme="d";
                break;
            case "Yellow":
                newTheme="e";
                break;
            default:
                newTheme="a";
        }
        var rmbtnClasses = '';
        var rmhfClasses = '';
        var rmbdClassess = '';
        var arr = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"  ];
        $.each(arr,function(index, value){
            rmbtnClasses = rmbtnClasses + " ui-btn-up-"+value + " ui-btn-hover-"+value;
            rmhfClasses = rmhfClasses + " ui-bar-"+value;
            rmbdClassess = rmbdClassess + " ui-body-"+value;
        });
        // reset all the buttons widgets
        $.mobile.activePage.find('.ui-btn').not('.ui-li-divider').removeClass(rmbtnClasses).addClass('ui-btn-up-' + newTheme).attr('data-theme', newTheme);
        // reset the header/footer widgets
        $.mobile.activePage.find('.ui-header, .ui-footer').removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme', newTheme);
        // reset the page widget
        $.mobile.activePage.removeClass(rmbdClassess).addClass('ui-body-' + newTheme).attr('data-theme', newTheme);
        // target the list divider elements, then iterate through them and
        // change its theme (this is the jQuery Mobile default for
        // list-dividers)
        $.mobile.activePage.find('.ui-li-divider').each(function(index, obj) {
            $(this).removeClass(rmhfClasses).addClass('ui-bar-' + newTheme).attr('data-theme',newTheme);
        });
    });
});