Question

是否有一种简单的方法可以为JQuery UI使用外部图标？

说我在按钮上有以下图标：

  <script type="text/javascript">
    $(document).ready(function () {
        $('#aButton').button({
            icons: 
            {
                primary: "ui-icon-newicon"
            }
        });
    });
</script>

<button id="aButton">hello</button>

是否可以显示外部jpeg或png？如果不编辑现有的JQuery UI png文件，最简单的方法是什么？

我之前通过手动编辑和替换我在ui-icons_xxxxxx_256x240.png文件中没有使用的图标来实现这一目标，这些图标效果很好，直到我使用nuget和png文件升级到新版本的JQuery UI被替换。

修改：

在我的Site.css（它是一个ASP.NET MVC3应用程序）中创建了这个类，需要添加！important标志。状态没有任何问题（突出显示按钮时，悬停等）。

.ui-icon-newicon
{
    background-image: url(images/delete.png) !important;
    background-position: 0 0;
}

Answer 1

当然，只需添加自己的文件并为该特定按钮提供CSS类，例如：

#aButton.ui-icon-custom {
    background-image: url(...);
    background-position: 0 0;
}

Answer 2

您可以通过在css中为该类定义自己的样式来实现：

.ui-icon-locked { background-image: url(images/custom.png); }

使用JQueryUI的外部图标

2 个答案: