使用 jQuery UI 图标答案

【问题标题】：Using jQuery UI icons使用 jQuery UI 图标
【发布时间】：2011-09-03 02:54:56
【问题描述】：

jQuery UI 在精灵图像中带有方便的图标；见themeroller。

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

【问题讨论】：

【解决方案1】：

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

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

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

除此之外，当您说将时钟作为背景图像时，我不确定您到底在追求什么。

【讨论】：

这真的是正确的答案吗？我认为在合并“内容”和“显示”问题时强烈建议不要在 html 中明确定义样式。
你是对的，但是 CSS 最佳实践是给读者的练习。答案确定了显示 jQuery 图标需要什么。 ui-icon 和 ui-icon-clock 类并使您的 html 元素占用空间。
-1 最佳实践适用于所有人。没有理由不在这里给出最好的答案。
@mehasse 也许在这里需要评论或旁注，但添加一个额外的类名和附加的 css 会使这个答案过于冗长恕我直言。

【解决方案2】：

您可以使用 JQuery UI 脚本来做到这一点。

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

【讨论】：

你应该从jqueryui.com/themeroller下载一个jqueryui主题点击ThemeRoller上的Gallery标签并选择你喜欢的