Я собираюсь предложить вам следовать предложению jQM, чтобы получить желаемые результаты, но не 100%, так как размер будет другим.
Пользовательские значки
Чтобы использовать пользовательские значки, укажите значение значка данных, которое имеет уникальное имя, например myapp-email, и плагин кнопки будет
создать класс, добавив префикс ui-icon- к значению data-icon и
примените его к кнопке: ui-icon-myapp-email.
Затем вы можете написать правило CSS в вашей таблице стилей, которое предназначено для
ui-icon-myapp-email класс для указания источника фона значка. к
сохранить визуальную согласованность с остальными значками, создать белый
значок 18x18 пикселей сохранен в формате PNG-8 с альфа-прозрачностью .
В этом примере мы просто указываем на отдельное изображение значка, но
Вы можете так же легко использовать значок спрайта и указать
позиционирование вместо, так же, как значок спрайта, который мы используем в
основа.
.ui-icon-myapp-email {
background-image: url("app-icon-email.png");
}
Это создаст значок стандартного разрешения, но многие устройства сейчас
имеют дисплеи с очень высоким разрешением, такие как дисплей сетчатки на
iPhone 4. Чтобы добавить значок HD, создайте значок размером 36x36 пикселей.
(точно удвоить размер 18 пикселей) и добавить второе правило, которое использует
-webkit-min-device-pixel-ratio: 2 медиазапрос, предназначенный только для правила
дисплеям с высоким разрешением. Укажите фоновое изображение для HD
файл значка и установите размер фона 18x18 пикселей, который будет соответствовать
значок 36 пикселей в том же пространстве 18 пикселей. Блок медиазапроса
Можно обернуть несколько правил значков:
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.ui-icon-myapp-email {
background-image: url("app-icon-email-highres.png");
background-size: 18px 18px;
}
...more HD icon rules go here...
}
Важной частью является сохранение изображения в формате PNG-8 с альфа-прозрачностью. Тогда у вас должна получиться тема, а также эффект клика.
Например, я только что нашел прозрачное изображение на eBay (используя одно и то же изображение для обеих кнопок):
JS
$('#buttonColor').mousedown(function() {
$(this).toggleClass('ui-btn-up-e').toggleClass('ui-btn-down-e');
});
$('#buttonColor').mouseup(function() {
$(this).toggleClass('ui-btn-up-e').toggleClass('ui-btn-down-e');
});
HTML
<div data-role="page" class="type-home">
<div data-role="content">
<button data-role="none" type="button">
<img src="http://www.virtuescience.com/images/statusicon/ebay/forum_old-48.png" alt="eBay button"/>
</button>
<br />
<button data-role="none" type="button" class="ui-btn-up-e" id="buttonColor">
<img src="http://www.virtuescience.com/images/statusicon/ebay/forum_old-48.png" alt="eBay button"/>
</button>
</div>
</div>
Первая кнопка просто нормальная, вторая я применил тему jQM с мышью вниз / вверх
Связанный: