jqueryUI自定义按钮未显示

Question

我正在尝试创建一些自定义 jqueryui 按钮，依赖于 How do I add a custom icon to a standard jQuery UI theme? 的答案，尤其是 Matthew/Panayiotis 的答案，在这里创建一些自定义 jqueryUI 按钮：

http://nie-wieder.net/metronom/test.html

如您所见，该按钮未显示，并且...简而言之，我不知道出了什么问题。

我在此处创建了一个按钮：http://nie-wieder.net/metronom/img/plus-normal.png（还有 2 个其他文件，plus-hover.png 和 plus-active.png）并考虑到 firebug 没有乱来，文件已加载，但是...可以看到，按钮不存在:(

css 文件在这里：http://nie-wieder.net/metronom/css/style.css（向下滚动，phil-plus-classes）

我没有想法，如果你能帮助我，那就太好了！

最好的问候， 多米尼克

Answer 1

我认为在使用带有 jQ​​uery UI 按钮的自定义图标时要理解的关键是图标，无论是否自定义，都添加到ui-button。

因此，您的带有加号的蓝色正方形图标显示在银色矩形上，因为您可能使用默认的 jQuery UI 主题，这使得按钮背景为银灰色。

为了解决你想在这里做的事情，我想你会想拥抱Theme Roller来帮助你。

在该页面上，将 Clickable：默认状态、Clickable：悬停状态和 Clickable：活动状态的背景颜色更改为与您的图像非常匹配的颜色（是的，我意识到它们比纯色更漂亮，但请耐心等待）。

颜色更改将确保添加图标的按钮使用您选择的颜色，而不是默认颜色。

从那里，您需要决定如何最好地执行自定义图标。

请记住，根据我们已经看到的情况，如果将 30x30 图标添加到 ui-button，则默认情况下，该按钮的任一侧都会有额外的填充。

如果您想深入挖掘，请打开您的 jquery-ui CSS 文件（默认或自定义，任一），然后搜索 Interaction states。

此标题下有七行类，这是声明 ui-state-default 类的背景和其他颜色的地方。

同样在那个 CSS 文件中，搜索 button text element。

该标题下的第三行以.ui-button-icon-only 开头，与该行元素关联的样式包括padding: .4em; 这是导致按钮比预期宽的原因！

[旁注：在看下面的两行时，有名为ui-button-icon-primary 和ui-button-icon-secondary 的类，所以ui-button-icon-only 不是为了声明按钮只包含一个图标，而是声明按钮使用only按钮样式，而不是声明一个按钮是primary，另一个是secondary。]

希望这足以让您创建满意的按钮，但如果您有任何问题，请告诉我。

Answer 2

不确定您说的是哪个按钮，但您的 <button> 元素中没有任何文本。您的spans 为您的背景图像设置了宽度和高度，但spans 是不能指定宽度或高度（或填充或边距）的内联元素。在 ui-icon 跨度上将显示值设置为 inline-block 会使您的图像显示出来。