CSS 和 jQuery contextMenu 插件答案

【问题标题】：CSS and the jQuery contextMenu pluginCSS 和 jQuery contextMenu 插件
【发布时间】：2014-11-07 14:22:01
【问题描述】：

这是previous post 的延续，我在其中询问了如何在选项旁边定义图标：它没有解决。

我无法在选项旁边显示图标。

我认为问题在于将 css 文件包含在 jQuery 中。例如，this resembling example 确实有效。唯一的区别是样式表引用了网络上的外部图标。

最小的工作示例，带有单独的 html、css 和 javascript 文件（jQuery 包括样式表文件）：

html:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">       
<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>
    <script src="./markFeature.js" type="text/javascript"></script    
</head>
<body>
    <strong>right click me</strong>       
</body>
</html>

javascript/jQuery:

var Feature = {
    register_contextMenu: function(){
    Feature.addCSS();
    $.contextMenu({
        selector: '*',
        //title : "Priotiteit",
        callback: function(key, options) {
        var m = "clicked: " + key;
        window.console && console.log(m) || alert(m); 
        },
        items: {
        "item_one": {name: "item-one", 
            icon: "green"},
        "item_two": {name: "item-two", 
            icon: "blue"},
        }
    });
    },

    addCSS: function(){
    $('head').append(
    '<link rel="stylesheet" href="Feature.css" type="text/css" />');
    }    
};
$(document).ready(markFeature.register_contextMenu);

CSS 文件：

.context-menu-item.icon {
  min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px;
  }
.context-menu-item.icon-green {
    background-image: url("<absolutepath>/green.png");
    }
.context-menu-item.icon-blue {
    background-image: url("<absolutepath>/blue.png");
    }

我似乎无法在选项旁边显示图标。

下面的例子和我的情况很像，不同的是css文件引用了网络上的外部图标：

http://jsfiddle.net/x55Lr2wL/1/

【问题讨论】：

标签： jquery html css jquery-plugins contextmenu

【解决方案1】：

在 CSS 文件中，只能使用相对路径。

以下作品：

.context-menu-item.icon {
  min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px;
  }
.context-menu-item.icon-green {
    background-image: url("<relativepath>/green.png");
    }
.context-menu-item.icon-blue {
    background-image: url("<relativepath>/blue.png");
    }

【讨论】：