Как использовать изображение в качестве кнопки в jQuery Mobile? - PullRequest
Новая
       10

Как использовать изображение в качестве кнопки в jQuery Mobile?

4 голосов
/ 19 октября 2011

Я просмотрел вопрос о том, как кнопки по умолчанию в jQuery Mobile можно заменить пользовательскими изображениями, так как я реализую код для создания приложения PhoneGap. Я нашел эту одну полезную ссылку .

У меня есть такой код: 

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom">Custom Icon</a>

И CSS это: 

.ui-icon-myapp-settings {
  background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Тем не менее он показывает значок +, а не мой значок. 

css directory -- ../css/style.css
image directory  ../css/images/settings.png

И я получаю вид как:

Что не так с кодом или местоположением изображения?

Ответы [ 5 ]

12 голосов
/ 29 марта 2012

Если вам нужно нечто большее, чем значок, чтобы использовать изображение в качестве кнопки, просто используйте следующее:

<a href="venta.html" data-theme="" id="ventaOption"> <img src="css/images/standard/shoppingcart.png" width="26" height="26"> <br/> Ventas </a>

2 голосов
/ 21 июня 2013

Попробуйте это: 

<a data-role="button" href="#" data-shadow="false" data-theme="none">
  <img src="images/imagefile.png" border="0"/>
</a>

установите для кнопки «data-theme» значение «none» и добавьте «data-shadow =« false ».

1 голос
/ 19 октября 2011

EDIT:

После просмотра некоторых ваших комментариев мне понравилось, что вы захотели создать собственное изображение кнопки. Будет ли что-то вроде этой работы?

Я бы посмотрел в пользовательский заголовок или панель навигации, вот документы:

Оригинальный ответ ниже:

Вам необходимо добавить ui-icon- к вам значение атрибута data-icon, которое в вашем примере равно myapp-custom

Итак, ваш класс CSS должен быть таким: 

.ui-icon-myapp-custom {
    background: url("settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

HTML 

<a href="#user_info" data-role="button" data-theme="b" data-iconpos="right" data-icon="myapp-custom" >
Custom Icon
</a>

jQM Документы:

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

Пример: (выглядит не очень хорошо, но имеет пользовательский значок)

1 голос
/ 19 октября 2011 
.ui-icon-myapp-settings {
    background: url("images/settings.png") no-repeat rgba(0, 0, 0, 0.4) !important;
}

Попробуйте это.

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

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

0 голосов
/ 29 марта 2013

Измените 

 data-icon="myapp-custom"

на 

 data-icon="myapp-settings"

, если для css задано значение ui-icon-myapp-settings

...