Question

是否可以动态更改所有页面的主题？

示例（下面的代码和here）包含：

使用单页模板（每个表单通过Ajax调用）。
每个表单都有后退按钮

应用所选主题后 - 所有表格都必须更新为新主题。在我的示例中仅更新当前表单。

我在这里提出问题之前已经彻底研究过但是找不到关于所有表格的主题滚动的答案，即

主题可以在"mobileinit" event
主题可以通过applited to element
等

提前致谢

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

Answer 1

@Omar提供的解决方案大多是正确的，但新创建的对象（按需）继承默认主题，因此下面的代码更改已创建的默认样式和即将到来的对象

    $(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);
        });


// change default theme
    // Page
    $.mobile.page.prototype.options.headerTheme = newTheme;  // Page header only
    $.mobile.page.prototype.options.contentTheme    = newTheme;
    $.mobile.page.prototype.options.footerTheme = newTheme;

    // Navigation
    $.mobile.page.prototype.options.backBtnTheme    = newTheme;

    // Listviews
    $.mobile.listview.prototype.options.headerTheme = newTheme;  // Header for nested lists
    $.mobile.listview.prototype.options.theme           = newTheme;  // List items / content
    $.mobile.listview.prototype.options.dividerTheme    = newTheme;  // List divider

    $.mobile.listview.prototype.options.splitTheme   = newTheme;
    $.mobile.listview.prototype.options.countTheme   = newTheme;
    $.mobile.listview.prototype.options.filterTheme = newTheme;

    // dateboxes
    $.mobile.datebox.prototype.options.theme=newTheme;
    $.mobile.datebox.prototype.options.themeHeader=newTheme;
    // timemode
    $.mobile.datebox.prototype.options.themeButton=newTheme;
    $.mobile.datebox.prototype.options.themeInput=newTheme;
    // calendar mode
    $.mobile.datebox.prototype.options.themeDateToday=newTheme;
    $.mobile.datebox.prototype.options.themeDayHigh=newTheme;
    $.mobile.datebox.prototype.options.themeDatePick=newTheme;
    $.mobile.datebox.prototype.options.themeDateHighAlt=newTheme;
    $.mobile.datebox.prototype.options.themeDate=newTheme;
    });

});

Jquery mobile：立即更新所有表单的主题

1 个答案: