javascriptを使用してjQuery Mobileアプリケーションのテーマを変更するにはどうすればよいですか？

Question

ここに、私のjQuery Mobileアプリケーションのヘッダーのテーマを変更しようとした、いくつかのJavaScriptがあります。 jQueryのモバイルJavaScriptとCSSが読み込まれた後、私のWebページの先頭にあります。

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

効果がないのはなぜですか？

Answer 1

変更するクラスは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; 
    }); 
});​ 

はデモです：私はあなたがそれを変更するには、任意の要素に data-theme属性を追加することができます知っていることを確認する必要があり推測するすべての後 http://jsfiddle.net/jUgLr/1/

のテーマ：

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