Defining icons in jQuery context plugin
So far I have managed to create a contextMenu that binds to the right mouse cilck including javascript in the html file:
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);
How will the icon appear next to the options?
The plugin documentation ( http://medialize.github.io/jQuery-contextMenu/ ) mentions to define icons in CSS using specific selectors.
How can I use CSS using contextMenu in this case?
+3
source to share
2 answers
Have you checked out the source code for the demo on Github?
It looks like you just added a CSS class:
.context-menu-item.icon-<NAME-OF-ICON> {
background-image: url(images/<NAME-OF-ICON>.png);
}
The documents also indicate:
(string) icon
Specifies the icon class for the element.Icons must be defined in CSS using selectors like .context-menu-item.icon-edit, where edit is the icon class.
The create () function is responsible for attaching a class to icons to elements. This code appears at line 1077 of the current source code .
// add icons
if (item.icon) {
$t.addClass("icon icon-" + item.icon);
}
From the demo:
/* 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
I removed the "edit", "delete" and "add" menu items from and added "Share to Google+", "Share to Facebook" and "Save" to the menu.
Just click "Run Code Snippet" below to see it in action.
$(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>
Update
I suggest you use a font icon library like FontAwesome. This is the simplest solution.
$(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>
It looks like FontAwesome is supported by this plugin, so you don't need to customize your 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>
+6
source to share
It's been a while since you asked for help ... Anyway, try adapting the following code (it just sums it up to Mr. Polywhirl in one file for easier understanding). As you can see, the menu of the first three items contains custom icons, and the last one uses one of the inline .svg images.
If you are using external resources, as I do in this example, make sure you have access to them (Open Chrome Dev-Tools by pressing Strg + i and watch for error messages in the console) and, as always, make sure that you can use them.
<!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>
Hope it helped.
+2
source to share