gpt4 book ai didi

jquery - CSS 和 jQuery contextMenu 插件

转载 作者:行者123 更新时间:2023-11-28 09:03:53 24 4
gpt4 key购买 nike

这是 previous post 的延续,在那里我询问了如何在选项旁边定义图标:它没有解决。

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

而且我认为问题在于使用 jQuery 包含 css 文件。例如,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/

最佳答案

在 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");
}

关于jquery - CSS 和 jQuery contextMenu 插件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26803313/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com