Как сделать JQuery Mobile UI-Icon активными состояниями? - PullRequest
Новая
       22

Как сделать JQuery Mobile UI-Icon активными состояниями?

0 голосов
/ 09 ноября 2011

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

  <div data-role="footer" data-id="foo1" data-position="fixed" class="nav-glyphish-example">
    <div data-role="navbar" class="nav-glyphish-example" data-grid="d">
      <ul>
        <li><a href="#home" id="house" data-icon="custom" class="ui-btn-active ui-state-persist">Home</a></li>
        <li><a href="#catches" id="fishes" data-icon="custom">Catches</a></li>
      </ul>
    </div>

, а вот мой css. 

#map .ui-icon {
    background:  url(http://www.johng.com.au/work/iphone/catchmapp/icons/ico-map.png)     50% 50% no-repeat;
    background-size: 26px 22px;
}
#fishes .ui-icon {
    background:  url(icons/ico-fishes.png) 50% 50% no-repeat;
    background-size: 28px 31px;
}

У меня не было проблем с реализацией состояний кнопки «активный» и «через» через .ui-btn-active иКлассы .ui-btn-hover-a, но здесь проблема с иконками.

Приветствия, ребята!

1 Ответ

2 голосов
/ 09 ноября 2011

Вы должны использовать отдельные значки для состояния наведения (и активного) и использовать CSS, как это: 

#map.ui-btn-hover-a .ui-icon ,#map.ui-btn-active .ui-icon{
    background:  url(icons/ico-map-over.png)     50% 50% no-repeat;
    background-size: 26px 22px;
}
#fishes.ui-btn-hover-a .ui-icon,#fishes.ui-btn-active .ui-icon {
    background:  url(icons/ico-fishes-over.png) 50% 50% no-repeat;
    background-size: 28px 31px;
}
...