JQuery UI 按钮图标不显示答案

【问题标题】：JQuery UI Button Icons not displayingJQuery UI 按钮图标不显示
【发布时间】：2010-08-05 09:08:07
【问题描述】：

我正在尝试将图标应用于我的 Rails 应用程序中的 jquery UI 样式按钮。该按钮的样式正确，但我无法显示图标！谁能给我任何建议-我正在拔头发！

我做了以下事情：
1) 将 javascript 文件（jquery-1.4.2.min.js 和 jquery-ui-1.8.2.custom.min.js）复制到 public/javascripts
2）将整个smoothness主题目录复制到public/css下
3) 将以下代码添加到我的布局文件中以包含相关文件：

<%=stylesheet_link_tag 'smoothness/jquery-ui-1.8.2.custom', :media => 'screen, projection'%>
<%=javascript_include_tag 'jquery-1.4.2.min', 'jquery-ui-1.8.2.custom.min', 'application'%>

4) 为我想要样式的按钮添加了一个“保存”类：

<%= submit_tag 'Save Changes', :class => 'save' %>

5) 在 application.js 文件中添加以下内容：

$(document).ready(function() {
    $(".save").button( { icons: {primary:'ui-icon-gear',secondary:'ui-icon-triangle-1-s'} } );
});

（在我让它工作之前，步骤 5 中的代码是从文档中复制和粘贴的 - 我刚刚更改了选择器）

按钮选择了主题的风格 - 但我没有运气让图标显示 - 我错过了一步吗？

非常感谢，
灰

【问题讨论】：

您的.css ui 文件中有images 文件夹吗？
我在 smoothness 目录中有 images 文件夹 - 所以 css 中图像的相对路径应该是正确的（理论上！）
如果有帮助 - 以下是浏览器中显示的生成源：

标签： jquery ruby-on-rails jquery-ui

【解决方案1】：

我不知道 jQuery UI 中是否存在将 input type="submit" 元素转换为 jQuery UI 按钮的错误，但是当我将标记更改为呈现 <button> 元素而不是 <input type="submit" .../> 时，它起作用了：

<button type="submit" class="save">Save Changes</button>

当然，我只是用静态 HTML 做的，而不是 Ruby on Rails。老实说，我是一名 C# / ASP.NET MVC 开发人员，所以我不确定您是否可以使用 RoR 呈现按钮元素。如果可以的话，也许这就是现在要采取的方向，以防它是一个 jQuery UI 错误。

我能够使用输入提交元素重新创建静态 HTML 的问题。一旦我切换到 HTML <button> 控件，它就起作用了。

希望这会有所帮助！

【讨论】：

非常感谢 - 我以为我做错了。我更详细地查看了 JQuery UI 文档并发现：“当使用按钮、提交或重置类型的输入时，支持仅限于没有图标的纯文本标签。”。所以，请注意自己 - 阅读整个文档 - 而不仅仅是代码！
HTML input 元素不能包含图标，所以是的，您应该改用 button 元素。

【解决方案2】：

我在使用 JQuery UI 的 JSF/Facelets 项目中遇到了类似的问题。事实证明，我需要将 JQuery UI CSS 引用的所有图像文件复制到一个名为“images”的目录中，作为我放置 JQuery UI CSS 文件的目录的子目录。

图像文件： http://code.google.com/p/jquery-ui/source/browse/branches/labs/assets/theme/images

【讨论】：