Использование значков пользовательского интерфейса jQuery

jQuery UI поставляется с удобными значками в изображении спрайтов; см. themeroller.

У меня есть элемент input, для которого я хочу значок часов (с классом .ui-icon-clock) в качестве фонового изображения. Как у меня есть значок фона для input?

Ответы

Ответ 1

просто используйте пустой диапазон и добавьте классы пользовательского интерфейса jQuery.

<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />

Вы должны переопределить стиль отображения, чтобы сделать его встроенным блоком, а не блокировать, иначе вход будет перенесен на следующую строку.

Кроме того, я не уверен, что вы после, когда вы говорите, делают часы фоновым изображением.

Ответ 2

Вы можете сделать это с помощью JQuery UI script.

JS:

$(function() {
   $("input").button({
     icons: {
       primary: ".ui-icon-clock"
     },
     text: false
   })
});

HTML:

<input>some text</input>

См. http://jqueryui.com/button/#icons

Ответ 3

$( "span").css({ 
width: 16px; 
height: 16px; 
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px; 
});