Question

大家好我目前正在使用JQuery Mobile创建一个Web应用程序。我目前在页面顶部有一个导航栏，导航栏上的每个按钮内都有一系列图像。我设置了“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 -->

Answer 1

您需要使用包含ui-body和ui-body-b类的div来包装导航栏。

<强> Demo

<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 -->

Answer 2

您的代码没有任何问题。

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如何处理标记增强功能的更多信息，请查看此 ARTICLE ，这是我的个人博客。可能会受到更多限制，本章还讨论了这个主题：

Answer 3

data-role="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 style="background=#000;"><a href="../../index.html" data-ajax="false"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;"></a></li>

                <li syle="background=#000;"><a href="../app/index.html" data-ajax="false"><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>

JQuery Mobile Navbar背景颜色

3 个答案: