0

これは、jQuery Mobile アプリケーションのヘッダーのテーマを変更しようとする、私が作成した JavaScript です。jQuery モバイル JavaScript と CSS がロードされた後、私の Web ページの head 要素にあります。

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

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

4

2 に答える 2

3

結局のところ、変更するクラスは 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>
于 2012-04-06T18:50:22.627 に答える
1

これはうまくいくでしょう 

$(document).delegate('[data-role=page]','pageinit',function(){
    $('[data-role=header]').attr('data-theme','b').removeClass().addClass('ui-header ui-bar-b');                
});
于 2012-04-06T18:56:49.287 に答える