JQuery Mobile Navbar背景颜色

大家好我正在使用JQuery Mobile创建一个web应用程序。目前，我的页面顶部有一个导航栏，导航栏上每个按钮的中心都有一系列图片。我已经设置了“data-theme = b”，但是这不会给我想要的颜色。我试图删除这个和使用CSS设置背景颜色，但我没有很多运气。JQuery Mobile Navbar背景颜色

我只是想知道是否有可能使用只是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 -->

来源

2013-06-20 Adam.13

我想知道是否可以通过ThemeRoller自定义导航栏背景颜色？ –

没有什么错与您的代码。

Navbar主题颜色是蓝色的默认和data-theme="b"是蓝色。将其更改为a以查看差异。

工作jsFiddle例如：因为在任何其他情况下，您的自定义CSShttp://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覆盖完成将被丢弃。

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

在您想了解更多关于jQuery Mobile的如何处理标记增强的情况下，再看看这个ARTICLE，这是我的个人博客。这里可以有更多的限制，这个主题在本章讨论：

来源

2013-06-20 09:56:57 Gajotres

这工作辉煌。非常感谢。 –

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>

来源

2013-06-20 09:51:24

你需要用类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 -->

来源

2013-06-20 09:56:12 Omar

JQuery Mobile Navbar背景颜色

回答

相关问题