Jquery Mobile Navbar контур/цвет границы

Я работаю над мобильным приложением JQuery и перепробовал все, чтобы изменить это. В моем приложении есть панель навигации, в которой я установил цвет фона и использовал пользовательские изображения для значков. Я пытаюсь сделать контур вокруг каждой кнопки навигационной панели белым, но в настоящее время он черный.

Я создал пример здесь http://jsfiddle.net/HuHNK/

Мой код для моего заголовка:

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

Я был бы очень признателен за любую помощь в этом. Я пробовал несколько разных методов, как видно выше.


javascript jquery border navbar jquery-mobile
person Adam.13    schedule 21.06.2013    source источник
comment
Это цвет фона (заголовка). если вы измените добавить data-theme="e" в заголовок, цвет изменится на желтый/золотой.   -  person Omar    schedule 21.06.2013

Ответы (2)


arrow_upward
1
arrow_downward

Нам разрешено редактировать неминифицированную версию jquery mobile css с целью отладки. Вы можете попробовать следующий код. Для индивидуального стиля панели навигации. Дайте им свои собственные классы 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;

}

Это может помочь.

person Nagama Inamdar    schedule 21.06.2013

arrow_upward
1
arrow_downward

Поместите id="testing" на панель навигации, а затем в своем коде CSS используйте:

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

Это работает для меня, хорошего дня!

person David Ignacio Coloma Cárdenas    schedule 08.11.2013