jQuery UI поставляется с удобными значками в изображении спрайта; см. themeroller.Использование значков пользовательского интерфейса jQuery
У меня есть элемент input, для которого я хочу значок часов (с классом .ui-icon-clock) в качестве фонового изображения. Как у меня есть значок фона для input?
просто используйте пустой диапазон и добавьте классы пользовательского интерфейса jQuery.
<span class="ui-icon ui-icon-clock" style="display:inline-block"></span><input type="text" />
Вы должны переопределить стиль отображения, чтобы сделать его встроенный блок, а не блок в противном случае вход будет оттеснен на следующую строку.
Кроме этого, я не уверен, что вы после этого, когда говорите, делают часы фоновым изображением.
$("span").css({
width: 16px;
height: 16px;
background-image: url(images/ui-icons_222222_256x240.png); // change to correct location
background-position: -80px -112px;
});
вы должны загрузить тему jqueryui из http://jqueryui.com/themeroller/ Нажмите на вкладку Галерея на ThemeRoller и выберите тот, который вам нравится –
Вы можете сделать это с помощью сценария пользовательского интерфейса JQuery.
JS:
$(function() {
$("input").button({
icons: {
primary: ".ui-icon-clock"
},
text: false
})
});
HTML:
<input>some text</input>
Является ли это действительно правильный ответ? Я думал, что явное определение стилей в html было сильно обескуражено, так как слияние проблем «содержимого» и «отображения». –
Вы правы, но лучшие практики CSS - это упражнение для читателя. Ответ определяет, что нужно для отображения значка jQuery. Классы 'ui-icon' и' ui-icon-clock' и создание элемента html занимают место. – BZink
-1 Лучшие практики для всех. Нет причин не давать здесь наилучшего ответа. –