JQuery Mobile: значок данных заменяет ui-listview и другие значки панели навигации.

Я немного новичок в JQuery Mobile, и я пытался найти ответ на этот вопрос, но безрезультатно. Я создал пользовательский интерфейс с пятью пользовательскими значками данных. Проблема в том, что когда я выбираю одну из пяти ссылок, кнопки слева от выбранной ссылки принимают выбранный значок. Кроме того, то, что должно быть правой стрелкой в ​​элементе ul-listview, также принимает выбранный значок, хотя его трудно увидеть. Пришлось использовать Firebug, чтобы расширить это, чтобы увидеть, выбран ли значок данных.

Вот код, который я использую для панели навигации в нижнем колонтитуле:

<div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="#more" id="more" data-icon="custom">More</a></li>
        </ul>
        </div> 
</div>

И немного CSS:

.nav .ui-btn .ui-btn-inner {
padding-top: 40px !important;
}
.nav .ui-btn .ui-icon {
width: 45px!important;
height: 35px!important;
margin-left: -24px !important;
box-shadow: none!important;
-moz-box-shadow: none!important;
-webkit-box-shadow: none!important;
-webkit-border-radius: none !important;
border-radius: none !important;
}
#programas .ui-icon {
background-image: url(images/nav.png);
background-position: 0 0;
background-repeat: no-repeat;
}

Любая идея, почему это может происходить? Думаю, это должно быть что-то с моим стилем.


jquery-mobile
person Adam Bell    schedule 27.10.2012    source источник

Ответы (1)


arrow_upward
1
arrow_downward

не используйте только имя ui-icon, вместо этого используйте ui-icon-something, см. также документ о пользовательские значки

Пользовательские значки

Чтобы использовать пользовательские значки, укажите значение data-icon с уникальным именем, например myapp-email, и подключаемый модуль кнопки сгенерирует класс, добавив префикс ui-icon- к значению data-icon и применив его к кнопке: ui-icon -myapp-электронная почта.

Затем вы можете написать правило CSS в своей таблице стилей, которое нацелено на класс ui-icon-myapp-email, чтобы указать источник фона значка. Чтобы сохранить визуальную согласованность с остальными значками, создайте белый значок 18x18 пикселей, сохраненный в формате PNG-8 с альфа-прозрачностью.

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

.ui-icon-myapp-email {
    background-image: url("app-icon-email.png");
}

пример

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
 <script src="jquery-1.8.0.min.js"></script>
 <script src="jquery.mobile-1.2.0.min.js"></script>

 <style>
  .ui-icon-taifun {
    background-image: url("taifun.png");
  }

  .nav .ui-btn .ui-btn-inner {
    padding-top: 40px !important;
  }

  .nav .ui-btn .ui-icon-taifun {
    width: 45px!important;
    height: 35px!important;
    margin-left: -24px !important;
    box-shadow: none!important;
    -moz-box-shadow: none!important;
    -webkit-box-shadow: none!important;
    -webkit-border-radius: none !important;
    border-radius: none !important;
  }

  #programas .ui-icon-taifun {
    background-image: url(taifun.png);
    background-position: 0 0;
    background-repeat: no-repeat;
  }
 </style>

 <title>Test</title>
</head>

<body>
  <div data-role="page">
    <div data-role="content">
      <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
        <h2><img src="favicon.ico"> Pets</h2>
        <ul data-role="listview">
          <li><a href="index.html">Canary</a></li>
          <li><a href="index.html">Cat</a></li>
          <li><a href="index.html">Dog</a></li>
        </ul>
       </div><!-- /collapsible -->
       <div data-role="collapsible" data-collapsed-icon="taifun" data-expanded-icon="taifun" data-inset="false">
         <h2><img src="favicon.ico"> Farm animals</h2>
         <ul data-role="listview">
           <li><a href="index.html">Chicken</a></li>
           <li><a href="index.html">Cow</a></li>
           <li><a href="index.html">Duck</a></li>
         </ul>
      </div><!-- /collapsible -->
    </div>

  <div data-role="footer">
    <div data-role="navbar" class="nav" data-grid="d">
        <ul>
            <li><a href="#programas" id="programas" data-icon="custom">Programas</a></li>
            <li><a href="#noticias" id="noticias" data-icon="custom">Noticias</a></li>
            <li><a href="#radio" id="radio" data-icon="custom">Radio</a></li>
            <li><a href="#eventos" id="eventos" data-icon="custom">Eventos</a></li>
            <li><a href="#more" id="more" data-icon="custom">More</a></li>
        </ul>
    </div>
  </div>

  </div>

</body>
</html>

скриншот
screenshot

person Taifun    schedule 28.10.2012
comment
Спасибо, вроде сработало. Я устранил проблему с отсутствием стрелок вправо, но это не решило проблему полностью. Для начала, я должен упомянуть в примере Taifun, вы должны установить data-icon= на то, что вы установили для нового класса значков. Так что в его примере это должно быть data-icon=taifun. Тем не менее, все еще существует проблема, из-за которой, когда я нажимаю, чтобы перейти на одну из других страниц в моем HTML, значки слева от того, что выбрано, получают стиль выбранного значка. Допустим, я выбираю Радио. Вот какие значки я получаю на этой странице: Radio, Radio Radio, Eventos, More. - person Adam Bell; 28.10.2012
comment
However, there's still an issue where when I click to go to one of the other pages in my HTML, the icons to the left of whatever is selected get the style of the icon selected. Let's say I select Radio. Here's what icons I get on that page: Radio, Radio Radio, Eventos, More. это другой вопрос. Вы можете предоставить больше своего кода? - person Taifun; 28.10.2012
comment
Тайфун... извините за задержку. Вместо того, чтобы публиковать здесь много кода, на данный момент, вероятно, лучше увидеть его в действии. Перейдите по ссылке на страницу и нажмите кнопки внизу, чтобы посмотрите, о чем я говорю. - person Adam Bell; 31.10.2012
comment
Я предлагаю вам подготовить небольшой пример с использованием jsfiddle.net. Возможно, вы захотите открыть для этого другой вопрос и закрыть этот. - person Taifun; 31.10.2012