Цвет фона JQuery Mobile Navbar

Привет всем. В настоящее время я использую JQuery Mobile для создания веб-приложения. В настоящее время у меня есть навигационная панель в верхней части моей страницы с серией изображений, центрированных внутри каждой кнопки на навигационной панели. Я установил «data-theme = b», но это не дает мне желаемого цвета. Я попытался удалить это и установить цвет фона с помощью css, но мне не повезло.

Мне просто интересно, можно ли изменить цвет навигационной панели, используя только css или jquery.

Мой код для панели навигации:

<div data-role="navbar"><!-- navbar -->
  <ul>
    <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"></a></li>
    <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>
    <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"></a></li>
    <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"></a></li>
   </ul>
 </div><!-- /navbar -->

jquery navbar jquery-mobile jquery-mobile-navbar
person Adam.13    schedule 20.06.2013    source источник
comment
Я хочу знать, можно ли настроить цвет фона панели навигации с помощью ThemeRoller?   -  person Bagusflyer    schedule 11.10.2013

Ответы (2)


arrow_upward
3
arrow_downward

В вашем коде нет ничего плохого.

Цветовая тема Navbar по умолчанию синяя, а data-theme="b" — это синий цвет. Измените его на a, чтобы увидеть разницу.

Рабочий пример jsFiddle: http://jsfiddle.net/Gajotres/vTBGa/

<div data-role="navbar"><!-- navbar -->
    <ul>
        <li><a href="index.html" data-ajax="false" data-transition="flip" ><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../../index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"/></a></li>
        <li><a href="../app/index.html" data-ajax="false" data-theme="b"><img src="../../images/icons/App3.png" height="30px;" width="30px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="b"><img src="../../images/icons/View.png" height="30px;" width="10px;"/></a></li>
        <li><a href="#" data-ajax="false" data-theme="a"><img src="../../images/icons/Last2.png" height="30px;" width="30px;"/></a></li>
    </ul>
</div><!-- /navbar -->

Если вы вручную меняете цвет фона, это должно быть сделано с переопределением !important, поскольку в любом другом случае ваш пользовательский CSS будет удален.

#other-color {
    background: red !important;
}

Если вы хотите узнать больше о том, как jQuery Mobile обрабатывает улучшения разметки, взгляните на этот СТАТЬЯ, это мой личный блог. Тут можно привязать гораздо больше, чем это, также эта тема обсуждается в главе:

person Gajotres    schedule 20.06.2013

arrow_upward
3
arrow_downward

Вам нужно обернуть навигационную панель div с классами ui-body и ui-body-b.

Демо

<div class="ui-body-b ui-body">
  <div data-role="navbar">
    <ul>
        <li><a href="#" data-icon="grid">A</a></li>
        <li><a href="#" data-icon="star">B</a></li>
        <li><a href="#" data-icon="gear">C</a></li>
        <li><a href="#" data-icon="arrow-l">D</a></li>
        <li><a href="#" data-icon="arrow-r">E</a></li>
    </ul>
  </div><!-- /navbar -->
</div><!-- /container -->
person Omar    schedule 20.06.2013