使用jQuery UI图标

Question

jQuery UI带有一个雪碧图中的便利图标；请参见themeroller。

我有一个input元素，我想将时钟图标（类为.ui-icon-clock）设置为背景图片。我如何将一个背景图标添加到input中？

- Randomblue

Answer 1

只需使用一个空的元素，并添加jQuery UI类。

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

你需要覆盖显示样式，使其成为inline-block而不是block，否则输入框将被推到下一行。

除此之外，当你说让时钟成为背景图像时，我不确定你想要的确切效果。

- BZink

---

这真的是正确的答案吗？我认为在HTML中明确定义样式是不被鼓励的，因为它会混淆“内容”和“显示”的问题。 - Jeremy Holovacs

你说得没错，但是CSS最佳实践需要读者自己去练习。这个答案识别了展示jQuery图标所需的要素：ui-icon和ui-icon-clock类以及让你的HTML元素占据空间。 - BZink

最佳实践适用于每个人。没有理由不在这里提供最佳答案。 - Mark E. Haase

或许在这里需要一个注释或附注，但是我认为添加额外的类名和附带的css将使这个答案变得过于冗长。 - lc.

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。

- Joe Valeriana

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; 
});

- Alon Eitan

---

你应该从http://jqueryui.com/themeroller/下载一个jQueryUI主题。在ThemeRoller的“Gallery”标签中选择你喜欢的主题。 - Alon Eitan