Question

我有一个上下文菜单，我在其中即时添加内容。我还想使用jquery ui图标样式在菜单上显示图标，因为它可以在jquery菜单上很好地调整自己。我目前添加了一个时钟图标。但我想用自己的图像替换它，同时仍然使用jquery ui图标样式。我怎样才能做到这一点？这是我将图标和其他文本添加到菜单中的代码：

var getMenuItem = function (itemData) {
        var attr = $("<a>", {"class": "textStyle",
            title : itemData.name,
            html : itemData.name
        }) 
        var item = $("<li>")
            .append(attr);
        if (itemData.name=='concepts') {
            attr.append($("<i>", {"class":"ui-icon ui-icon-clock"}))}
        if (itemData.children) {
            var subList = $("<ul>");
            $.each(itemData.children, function () {
                subList.append(getMenuItem(this));
            });
            item.append(subList);
        }
        return item;
    };

Answer 1

在Jquery Ui icons.css cdn link

中

使用此课程：

.ui-icon-clock:before {
content: "\e023";!important
}

用内容替换您的图片。您可以尝试添加背景以及其他适当的样式。

======更新========：

自己定义一种风格，如下所示：

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

然后在替换

时使用.ui-icon-custom

这假设您的自定义图标位于CSS下方的图像文件夹中...与jQuery UI图标地图通常所在的位置相同。当创建图标时，它会得到如下类：class="ui-icon ui-icon-custom"，而ui-icon类看起来像这样（可能是不同的图像，具体取决于主题）：

.ui-icon { 
  width: 16px; 
  height: 16px; 
  background-image: url(images/ui-icons_222222_256x240.png); 
}

所以在你的风格中你只是覆盖背景图像，如果需要改变宽度，高度等。

用本地图像替换jquery ui-icon

1 个答案: