jquery-mobile - 如何使用 javascript 更改我的 jQuery Mobile 应用程序的主题？

Question

这是我编写的一些 javascript，它试图更改我的 jQuery Mobile 应用程序标题的主题。在 jQuery mobile javascript 和 CSS 加载后，它位于我网页的 head 元素中。

$(function() {
    $("[data-role='header']").attr('data-theme', 'b'); 
});

为什么没有效果？

Answer 1

事实证明，动态更改标题的主题很容易，因为只有一个类可以更改，按钮也是如此（如果标题中有按钮）。

//store all the classes to remove from elements when swapping their theme
var removeClasses = 'ui-bar-a ui-bar-b ui-bar-c ui-bar-d ui-bar-e ui-btn-up-a ui-btn-up-b ui-btn-up-c ui-btn-up-d ui-btn-up-e';

//when a specific page initializes, find links in the body and add an event
//handler to the click event for them to update the header's theme
$(document).delegate('#my-page', 'pageinit', function () {
    $(this).find('a').bind('click', function (event) {

        //get the new theme letter, stored in the HREF attribute of the link
        var newTheme = $(this).attr('href');

        //change the header's class/attr to relfect the new theme letter
        $.mobile.activePage.children('.ui-header').attr('data-theme', newTheme).removeClass(removeClasses).addClass('ui-bar-' + newTheme).children('h1').text('My Header (' + newTheme + ')');

        //change the header button's classes/attr to reflect the new theme letter
        $.mobile.activePage.children('.ui-header').children('a').removeClass(removeClasses).addClass('ui-btn-up-' + newTheme);
        return false;
    });
});​

这是一个演示：http: //jsfiddle.net/jUgLr/1/

毕竟我想我应该确保你知道你可以data-theme为任何元素添加一个属性来改变它的主题：

<div data-role="page">
    <div data-role="header" data-theme="e">
        ...
    </div>
    <div data-role="content" data-theme="d">
        ...
    </div>
</div>

Answer 2

这会起作用

$(document).delegate('[data-role=page]','pageinit',function(){
    $('[data-role=header]').attr('data-theme','b').removeClass().addClass('ui-header ui-bar-b');                
});