Question

这是我写的一些javascript，试图改变我的jQuery Mobile应用程序的标题的主题。 jQuery移动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');                
});

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

2 个答案: