在jQuery的contextMenu插件中定义图标
Defining icons in the contextMenu plugin of jQuery
到目前为止，我已经能够通过在html文件中包含javascript来创建一个绑定到鼠标右键cick的contextMenu：
var Feature = {
register_contextMenu: function() {
$.contextMenu({
selector: '*',
items: {
"item_one": { name: "Item_one", icon: "./path1" },
"item_two": { name: "item_two", icon: "./path2" }
}
});
}
};
$(document).ready(Feature.register_contextMenu);
如何在选项旁边显示图标？
插件的文档(http://medialize.github.io/jQuery-contextMenu/)提到必须用某些选择器在CSS中定义图标。
在这种情况下，如何将CSS与contextMenu结合使用？
你在Github上查看了演示的源代码吗？
看起来你只是添加了一个CSS类：
.context-menu-item.icon-<NAME-OF-ICON> {
background-image: url(images/<NAME-OF-ICON>.png);
}
文件还指出：
（string）图标
指定要为项目设置的图标类。图标必须在CSS中使用选择器定义，如.context-menu-item.icon-edit，其中edit是图标类。
create（）函数负责将图标的类附加到项上。此代码出现在当前源代码的第1077行。
// add icons
if (item.icon) {
$t.addClass("icon icon-" + item.icon);
}
来自演示：
/* icons
#protip:
In case you want to use sprites for icons (which I would suggest you do) have a look at
http://css-tricks.com/13224-pseudo-spriting/ to get an idea of how to implement
.context-menu-item.icon:before {}
*/
.context-menu-item.icon { min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px; }
.context-menu-item.icon-edit { background-image: url(images/page_white_edit.png); }
.context-menu-item.icon-cut { background-image: url(images/cut.png); }
.context-menu-item.icon-copy { background-image: url(images/page_white_copy.png); }
.context-menu-item.icon-paste { background-image: url(images/page_white_paste.png); }
.context-menu-item.icon-delete { background-image: url(images/page_white_delete.png); }
.context-menu-item.icon-add { background-image: url(images/page_white_add.png); }
.context-menu-item.icon-quit { background-image: url(images/door.png); }
Demo
我删除了"；编辑"删除"；，以及"；添加"；菜单项，并添加了"；在Google+上共享"在Facebook上分享"；，以及"；保存"；选项。
只需按"；运行代码片段"；下面查看它的运行情况。
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var m = "clicked: " + key;
window.console && console.log(m) || alert(m);
},
items: {
"cut" : { name: "Cut", icon: "cut" },
"copy" : { name: "Copy", icon: "copy" },
"paste" : { name: "Paste", icon: "paste" },
"sep1" : "---------",
"google" : { name: "Share on Google+", icon: "google-plus" },
"facebook" : { name: "Share on Facebook", icon: "facebook" },
"sep2" : "---------",
"save" : { name: "Save", icon: "save" },
"quit" : { name: "Quit", icon: "quit" }
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});.context-menu-icon {
min-height: 18px; background-repeat: no-repeat; background-position: 4px 2px;
}
.context-menu-icon-save {
/* Source: http://www.famfamfam.com/lab/icons/silk/icons/disk.png */
background-image: url("http://i.imgur.com/4LyeGi1.png");
}
.context-menu-icon-facebook {
/* Source: http://icons.iconarchive.com/icons/yootheme/social-bookmark/16/social-facebook-box-blue-icon.png */
background-image: url("http://i.imgur.com/EVcCwyZ.png");
}
.context-menu-icon-google-plus {
/* Source: https://cdn1.iconfinder.com/data/icons/professional-toolbar-icons-2/16/Google_plus_google.png */
background-image: url("http://i.imgur.com/Zg0UFmq.png");
}<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>
<div class="context-menu-one box menu-1">
<strong>Right-Click ME!</strong>
</div>更新
我建议您使用字体图标库，如FontAwesome。这是最简单的解决方案。
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var msg = "clicked: " + key;
window.console && console.log(msg) || alert(msg);
},
items: {
"cut" : { name: "Cut", icon: "cut" },
"copy" : { name: "Copy", icon: "copy" },
"paste" : { name: "Paste", icon: "paste" },
"sep1" : "---------",
"google" : { name: "Share on Google+", icon: "google-plus" },
"facebook" : { name: "Share on Facebook", icon: "facebook" },
"sep2" : "---------",
"save" : { name: "Save", icon: "save" },
"quit" : { name: "Quit", icon: "quit" }
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});.context-menu-icon.context-menu-icon-save:before,
.context-menu-icon.context-menu-icon-facebook:before,
.context-menu-icon.context-menu-icon-google-plus:before {
font-family: FontAwesome !important;
}
.context-menu-icon.context-menu-icon-save:before {
content: "'f0c7"; /* fa-floppy-o */
}
.context-menu-icon.context-menu-icon-facebook:before {
content: "'f230"; /* fa-facebook-official */
}
.context-menu-icon.context-menu-icon-google-plus:before {
content: "'f0d4"; /* fa-google-plus-square */
}<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>
<div class="context-menu-one box menu-1">
<strong>Right-Click ME!</strong>
</div>看起来这个插件支持FontAwesome，所以你不需要自定义任何CSS。
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
var msg = "clicked: " + key;
window.console && console.log(msg) || alert(msg);
},
items: {
"cut" : { name: "Cut", icon: "cut" },
"copy" : { name: "Copy", icon: "copy" },
"paste" : { name: "Paste", icon: "paste" },
"sep1" : "---------",
"google" : { name: "Share on Google+", icon: "fa-google-plus-square" },
"facebook" : { name: "Share on Facebook", icon: "fa-facebook-official" },
"sep2" : "---------",
"save" : { name: "Save", icon: "fa-floppy-o" },
"quit" : { name: "Quit", icon: "quit" }
}
});
$('.context-menu-one').on('click', function(e){
console.log('clicked', this);
})
});<link href="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.rawgit.com/swisnl/jQuery-contextMenu/master/dist/jquery.contextMenu.js"></script>
<div class="context-menu-one box menu-1">
<strong>Right-Click ME!</strong>
</div>您已经有一段时间没有寻求帮助了。。。无论如何，试着改编以下代码（它只是将Polyhury先生的答案总结成一个文件，以便于理解）。正如您所看到的，菜单的前三个项目包含自定义图标，而最后一个项目使用了一个内置的.svg图片。
如果你像我在本例中那样使用外部资源，请确保你能够访问它们（按Strg+I打开Chrome的开发工具，并注意控制台中的错误消息），并一如既往地确保你被允许使用它们。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<!-- include the context-menu from cdnjs -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.css" />
<style>
.context-menu-abc {
border: 1px solid gray;
padding: 5px;
}
/* used for all items */
.context-menu-item {
min-height: 18px;
background-repeat: no-repeat;
background-position: 4px 4px;
}
/* all custom icons */
.context-menu-item.context-menu-icon-firstOpt {
background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Boss.png");
}
.context-menu-item.context-menu-icon-secondOpt {
background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/Save.png");
}
.context-menu-item.context-menu-icon-thirdOpt {
background-image: url("https://cdn4.iconfinder.com/data/icons/6x16-free-application-icons/16/OK.png");
}
</style>
</head>
<body>
<div><span class="context-menu-abc">right-click this box</span></div>
<!-- try to include scripts at the end so the DOM can be created faster -->
<script src="js/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-contextmenu/2.0.1/jquery.contextMenu.min.js"></script>
<script>
$(function() {
"use strict";
$.contextMenu({
selector: '.context-menu-abc',
callback: function(key, options) {
if (key === 'firstOpt') {
// specific code for your first option
} else if (key === 'secondOpt') {
// specific code for your second option
} else if (key === 'thirdOpt') {
// specific code for your third option
}
},
items: {
'firstOpt': {
name: "First option",
icon: "firstOpt"
},
'secondOpt': {
name: "Second choice",
icon: "secondOpt"
},
'thirdOpt': {
name: "Third option",
icon: "thirdOpt"
},
'copy': {
name: "Fourth option",
icon: "copy"
}
}
});
});
</script>
</body>
</html>希望能有所帮助。
使用上面的Mr PolyWhirls示例，我仍然无法使其正常工作。FontAwesome图标没有正确对齐等。我想插件的更新已经破坏了对FA 4的支持。（当FA 5问世时，FA 4发生了变化）。我的解决方案是回到使用自定义CSS。。。
<style type="text/css">
.context-menu-icon.context-menu-icon-file-alt:before {
font-family: FontAwesome !important;
color: #2980B9;
font-style: normal;
font-weight: normal;
font-size: 16px;
left: 0;
line-height: 1;
position: absolute;
text-align: center;
top: 50%;
transform: translateY(-50%);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 28px;
}
.context-menu-icon.context-menu-icon-file-alt:before{
content: ''f15c';
}
</style>
相关文章：
- 在标记mapbox.js上添加自定义图标
- 如何将自定义图标添加到 JqGrid 顶级工具栏按钮
- 如何在 Electron for OSX 中打包自定义图标
- 如何使用传单为传单实时插件设置自定义图标
- 传单错误:对象函数没有方法'createIcon'在LayerGroup中创建自定义图标标记时
- 带有Markercluster自定义图标样式的角形传单
- 如何在 ng 映射标记(角度）中使用自定义图标
- 我如何使谷歌地图不更改标记的自定义图标大小
- 自定义图标行为是否在JQueryMobile 1.4(Alpha / Beta / RC-1）中发生了变化
- 谷歌地图V3 - 如何将每个位置的标记更改为自定义图标
- 如何使用地图地点创建自定义图标.js
- 在视网膜显示中使用谷歌地图的自定义图标
- 使用缩放更改谷歌地图自定义图标
- 路线末端的自定义图标
- 在jQuery的contextMenu插件中定义图标
- 带有自定义图标的谷歌地图标记定位
- 基于Openlayers 3中提取的数据应用自定义图标
- 如何在iPad上创建一个自定义图标'它基本上只是一个URL
- 单个集群图标的自定义图标
- 无法在手册中使用自定义图标
