Изменение нескольких свойств jquery mobile "данные-тема" из одного места

Я использую jQuery mobile для разработки моего мобильного сайта. Я должен установить свойство "data-theme" из многих мест, чтобы включить определенную тему. Есть ли место, где я могу изменить его один раз (например, в функции javascript или что-то еще), но это приведет к тому, что все мои элементы получат тему? Я попытался поместить его в таблицу стилей, но он не работает.

Мой htmlCode:

<!DOCTYPE html> 
<html>

<head>
    <script src="jquery.mobile-1.0/demos/jquery.js" type="text/javascript"></script>
    <script src="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.js"  type="text/javascript"></script>
    <script src="CodeGeneral.js" type="text/javascript"></script>

    <link rel="stylesheet" href="jquery.mobile-1.0/demos/jquery.mobile-1.0.min.css">
    <link rel="stylesheet" href="StyleMaincss.css">

    <title>Home</title>
</head>

<body onload="GenerateData();" data-role = "page" >
    <div data-role="header" class="HeaderBar">
    <img src="Logos v2/Header.png" alt="" class="HeaderImage">
    </div> 

    //Content on page

    <div data-role="footer" class="NavBar" data-position="fixed">       
    <div data-role="navbar">
           //Navigation button creation
        </div>
    </div>
</body>

Мой javascript:

$(document).delegate("[data-role='page']", 'pagebeforecreate', 
    function () {
         $(this).attr('data-theme', 'a')
    }
 ); 

function GenerateData() {
    //Things carried out during loading
}

Ответы

Ответ 1

Это из мобильных документов jQuery:

Атрибут data-theme может применяться к верхнему и нижнему колонтитулу контейнеры для применения любого из шаблонов цветных букв. В то время как атрибут data-theme может быть добавлен в контейнер содержимого, мы рекомендуем вместо этого добавить его в div или контейнер, который был назначен атрибут data-role = "page", чтобы гарантировать, что цвет фона применяется к полной странице. Когда это будет сделано, все виджеты на странице также наследует тему, указанную в контейнере страницы. Однако, верхние и нижние колонтитулы будут дефолтировать по теме "a". Если вы хотите иметь страница, например, только для темы "b" для всех ее элементов, включая его заголовок и нижний колонтитул, вам нужно будет указать data-theme = "b" на page div, а также разделители заголовка и нижнего колонтитула.

Источник: http://jquerymobile.com/demos/1.0/docs/pages/pages-themes.html

Итак, если вы добавите теги data-theme="a" в теги data-role="page", то все должно наследовать тему a. Вы можете проверить это, возившись с ссылками "изменение образца темы" вверху ссылки выше.

UPDATE

Чтобы программно изменить тему страницы, добавьте этот код на свой сайт:

$(document).delegate('[data-role="page"]', 'pagecreate', function (e) {
    $(this).removeClass('ui-body-a ui-body-b ui-body-c ui-body-d ui-body-e').addClass('ui-body-a').attr('data-theme', 'a');
});

Но это создает накладные расходы для браузера пользователя при рендеринге веб-сайта, поэтому я предлагаю изменить жестко закодированные атрибуты data-theme в тегах data-role="page".

UPDATE

Вы также можете сделать это внутри обработчика события mobileinit, изменив page prototype:

<link rel="stylesheet" href="#" onclick="location.href='http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css'; return false;" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script>
$(document).bind('mobileinit', function () {
    $.mobile.page.prototype.options.theme  = "a";
});
</script>
<script src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>

Это сделает любую страницу без установленного атрибута data-theme по умолчанию темой a.

Вот демонстрационная версия: http://jsfiddle.net/tEbD5/3/