如何使用javascript更改我的jQuery Mobile應用程序的主題？

Question

這是我寫的一些JavaScript，試圖更改我的jQuery Mobile應用程序的標題主題。這是在jQuery手機的JavaScript和CSS加載後，在我的網頁的頭元素。

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