Как изменить тему моего приложения jQuery Mobile с помощью javascript?

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