Jquery Mobile Navbar大纲/边框颜色

我一直在研究JQuery移动应用程序，并试图改变这一切。我的应用程序有一个导航栏，我在其中设置了背景色并使用图标的自定义图像。我试图让每个导航栏按钮的轮廓都是白色的，但它目前是黑色的。Jquery Mobile Navbar大纲/边框颜色

我的代码为我的头是：

<div data-role="page" id="demo-page" data-theme="c"> 
    <div data-role="header"> 
     <img border="0" src="../../images/logo.png" height="28px" alt="ISOSEC" style="float:left;display:inline; padding-left:25px; padding-top: 5px; padding-right: 5px; max-height:28px max-width:1422px; heigh:auto; width:auto;" /> 
     <h1>Patient: Daniel Jones - SD65432 - ACU <br>SMF - ASS - 409 825 6334</h1> 
<span class="ui-btn-right"> 
      <img src="../../images/image.jpg?height=100&amp;width=443" style="border:none;margin-right:5px;margin-top:0px;height:2.4vw;width:12.3vw; padding-right:25px;" onclick="showDlgPIN();"></img> 
     </span> 

     <div data-role="navbar"> 
      <!-- navbar --> 
      <ul> 
       <li><a href="index.html" data-ajax="false" data-transition="flip" id="other-color"><div class="navbar-padding"><img src="../../images/icons/SearchLarge.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a> 

       </li> 
       <li><a href="../../index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/ApplicationL.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a> 
       </li> 
       <li><a href="../App/index.html" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/applogo.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a> 
       </li> 
       <li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/View.png" height="30px;" width="10px;" style="vertical-align:middle"></div></a> 
       </li> 
       <li><a href="#" data-ajax="false" id="other-color"><div class="navbar-padding"><img src="../../images/icons/LastValue2.png" height="30px;" width="30px;" style="vertical-align:middle"></div></a> 
       </li> 
      </ul> 
     </div> 
     <!-- /navbar --> 
    </div> 
    <!-- /header -->

我已经设置了主自定义CSS是：

#other-color { 
    background: rgba(115, 189, 226, 0.9); 
} 

.ui-btn-inner{ 
    background: rgba(115, 189, 226, 0.9); 
} 

.ui-body-c { 
    background-image: url(../../images/BackgroundDot2.png); 
    border: #FFFFFF; 
} 

.navbar-padding 
{ 
    padding-top: 6px; 
    padding-bottom: 6px; 

} 

.listItemNoIcon .ui-icon 
{ 

display: none; 

} 

.navbar 
{ 
    outline-color: #FFFFFF !important; 
    border-color: #FFFFFF !important; 
}

我真的感谢任何帮助，我已经尝试了一些不同的技术，如上所述。

来源

2013-06-21 Adam.13

这是背景（标题）的颜色。如果您将标题添加'data-theme =“e”'，颜色将变为黄色/金色。 – Omar

我们被允许编辑jquery mobile css unminified版本以进行调试。您可以尝试以下代码。对于自定义导航栏风格。给他们自己的css类。

<div data-role="header" data-position="fixed"> 
    <div data-role="navbar" class="footer-tab"> 
     <ul> 
      <li class="head-foot-color-active"><a href="sample1.html" data-transition="none" class="ui-btn-active"><img src="pqr.png" height="20" width="30"/></a></li> 
      <li class="head-foot-color"><a href="sample2.html" data-transition="none"><img src="xyz.png" height="20" width="30" /></a></li> 
      <li class="head-foot-color"><a href="sample3.html" data-transition="none"><img src="abc.png" height="20" width="35" /></a></li> 
     </ul> 
    </div><!-- /navbar --> 
</div> <!---header--->

定制的CSS如下。

.head-foot-color-active a 
{ 

background: #709630; 
border-style:groove; 


} 
.head-foot-color a{ 


background: #99ce3e ; 

} 
.footer-tab 
{ 

bottom: 0px; 
background: #6aaedb; 

}

这可能有帮助。

来源

2013-06-21 13:39:07 Daenarys

把一个id =“测试”你的导航栏，然后你的CSS代码的使用：

#testing ul li a{ 
    border-color:"white"; 
}

这个工作对我来说，有一个愉快的一天！

来源

2013-11-08 00:31:29

Jquery Mobile Navbar大纲/边框颜色

回答

相关问题