Изменение нескольких jquery mobile "data-theme" свойство из одного места - PullRequest
Новая
       13

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

10 голосов
/ 12 декабря 2011

Я использую 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 Ответ

6 голосов
/ 12 декабря 2011

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

Атрибут data-theme может быть применен к верхнему и нижнему колонтитулам контейнеры для применения любых образцов цвета, обозначенных буквами. В то время как атрибут data-theme может быть добавлен в контейнер содержимого, мы рекомендуем добавить его вместо div или контейнера, который был назначен Атрибут data-role = "page" гарантирует, что цвет фона применяется к полной странице. Когда это будет сделано, все виджеты на странице также унаследует тему, указанную в контейнере страницы. Тем не мение, верхние и нижние колонтитулы будут по умолчанию для темы "а". Если вы хотите иметь страница с, например, только темой "b" для всех ее элементов, включая его верхний и нижний колонтитулы, вам нужно будет указать data-theme = "b" div страницы, а также 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="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
<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/

...