使用jQuery UI图标

Question

jQuery UI在精灵图像中附带方便的图标;请参阅themeroller。

我有一个input元素，我希望时钟图标（类.ui-icon-clock）作为背景图像。如何为input提供背景图标？

Answer 1

只使用空的span并添加jQuery UI类。

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

您必须覆盖显示样式以使其成为内联块而不是阻塞，否则输入将被推送到下一行。

除此之外，当你说让时钟成为背景图像时，我不确定你究竟是在追求什么。

Answer 2

您可以使用JQuery UI脚本执行此操作。

JS：

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

HTML：

<input>some text</input>

请参阅http://jqueryui.com/button/#icons

Answer 3

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