Question

我的主题没有在我在下面的代码中创建的动态页面上执行。它在第一个菜单页面上工作，然后所有其他页面的默认主题都不是我在siteData.theme中设置的主题。

我该如何设置？

    var siteData = build;
    $(this).find('[data-role="header"] h3').html(siteData.name);
    $.mobile.activePage.find('[data-role=header] h3').html(siteData.name);
    $('div[data-theme]', '#index').data('theme', siteData.theme);

    //reset all the buttons widgets
    $.mobile.activePage.find('.ui-btn')
        .removeClass('ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e ui-btn-hover-a ui-btn-hover-b ui-btn-hover-c ui-btn-hover-d ui-btn-hover-e')
        .addClass('ui-btn-up-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));

    //reset the header/footer widgets
    $.mobile.activePage.find('.ui-header, .ui-footer')
        .removeClass('ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e')
        .addClass('ui-bar-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));


    //reset the page widget
    $.mobile.activePage.removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e')
        .addClass('ui-body-' + $('div[data-theme]', '#index').data('theme'))
        .attr('data-theme', $('div[data-theme]', '#index').data('theme'));


    $.each(siteData["pages"], function (i, v) {



        if (!$('#' + v["id"]).length) {


            // Build nav.
            $.mobile.activePage.find('[data-role=content]').append('' +
                '<a href="#' + v["id"] +
                '" data-role="button">' + v["name"] +
                '</a>').trigger('create');


            var components = {};




            var newPage = $("<div data-role='page' id='" + v["id"] +
                "'><div data-role=header><a data-iconpos='left' data-icon='back' href='#' data-role='button' " +
                "data-rel='back'>Back</a>" +
                "<h1>" + v["name"] + "</h1>" +
                "</div>" +
                "<div data-role=content>" + pagecontent +
                "</div>" +
                "<div data-role='footer'>" +
                "<h4>" + v["name"] + "</h4>" +
                " </div>" +
                "</div>");

            newPage.appendTo($.mobile.pageContainer);



        }

    });


});

Answer 1

从您的代码中看起来siteData.theme包含主题名称，即'b'，因此您只需添加：

$('[data-role=page]').page({
        theme: siteData.theme
    });

到你的剧本。

但是，这不会更改默认主题的页眉和页脚。您可以在newPage创建中添加data-theme=siteData.theme，具体取决于siteData.theme中的内容。

动态页面上的Jquery移动主题

1 个答案: