使用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" />

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

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

你是对的,但CSS最佳实践对读者来说是一种练习.答案标识了显示jQuery图标所需的内容.`ui-icon`和`ui-icon-clock`类使你的html元素占用空间. (6认同)
@mehasse也许这里有一个评论或旁注,但添加一个额外的类名和附加的css将使这个答案过于冗长恕我直言. (4认同)
-1最佳实践适用于所有人.没有理由不在这里提出最好的答案. (2认同)

Answer 2

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

JS:

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

HTML:

<input>some text</input>