├── LICENSE.txt ├── README.md ├── demo ├── example.html ├── icons │ ├── application-monitor.png │ ├── application-table.png │ ├── bin-metal.png │ ├── book-open-list.png │ ├── cassette.png │ ├── magnifier-zoom-actual-equal.png │ ├── receipt-text.png │ └── shopping-basket.png └── screenshot.png ├── jquery.contextmenu.css ├── jquery.contextmenu.js └── simplecontextmenu.jquery.json /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright (c) 2011, Joe Walnes 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | A Simple Good Looking Context Menu, for jQuery 2 | ============================================== 3 | 4 | Yes, there are [loads](http://plugins.jquery.com/plugin-tags/context-menu) of context menu 5 | plugins already. But they require a fair amount of work to make them look good. 6 | 7 | This one is easy to use, small, and looks good. 8 | 9 | Demo 10 | ---- 11 | 12 | * http://joewalnes.github.com/jquery-simple-context-menu/example.html 13 | 14 | Features 15 | -------- 16 | 17 | * Tiny library. Only dependency is jQuery. 18 | * Simple API. 19 | * Looks good out of the box, with no additional tweaking. 20 | * Designed to look and behave like a standard Windows context menu. 21 | * There's so little code, it should be easy to add your own custom features. 22 | 23 | The menu looks like this: 24 | 25 | ![Screenshot](https://github.com/joewalnes/jquery-simple-context-menu/raw/master/demo/screenshot.png) 26 | 27 | 28 | Installation 29 | ------------ 30 | 31 | Include the files `jquery.contextmenu.css` and `jquery.contextmenu.js` in your page ``. You also need jQuery. It is recommended that you use the [HTML 5 DOCTYPE](http://ejohn.org/blog/html5-doctype/) to ensure rendering consistency. 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | ... rest of your stuff ... 40 | 41 | You can get the files from here: 42 | 43 | * 44 | * 45 | 46 | Usage 47 | ----- 48 | 49 | The plugin introduces a `contextPopup()` method to the jQuery object. 50 | 51 | Assuming you have an element that you'd like to bind a context menu to: 52 | 53 |

hello

54 | 55 | You can wire up a context menu like this: 56 | 57 | $('#mythingy').contextPopup({ 58 | title: 'My Popup Menu', 59 | items: [ 60 | {label:'Some Item', icon:'icons/shopping-basket.png', action:function() { alert('clicked 1') } }, 61 | {label:'Another Thing', icon:'icons/receipt-text.png', action:function() { alert('clicked 2') } }, 62 | null, /* null can be used to add a separator to the menu items */ 63 | {label:'Blah Blah', icon:'icons/book-open-list.png', action:function() { alert('clicked 3') }, isEnabled:function() { return false; } }, 64 | ]}); 65 | 66 | The 'isEnabled' function is optional. By default all items are enabled. 67 | 68 | Icons 69 | ----- 70 | 71 | The icons should be 16x16 pixels. I recommend the [Fugue icon set](http://p.yusukekamiyamane.com/) (shadowless). 72 | 73 | 74 | kthxbye 75 | 76 | -[joe](http://joewalnes.com) 77 | 78 | 79 | [![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/joewalnes/jquery-simple-context-menu/trend.png)](https://bitdeli.com/free "Bitdeli Badge") 80 | 81 | -------------------------------------------------------------------------------- /demo/example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 26 | 27 | 28 | 29 |

30 | right click in this box to show custom context menu 31 |

32 | 33 | right click out of the box to show the standard browser menu (if you're trying to view-source, right click here) 34 | 35 | 36 | -------------------------------------------------------------------------------- /demo/icons/application-monitor.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/application-monitor.png -------------------------------------------------------------------------------- /demo/icons/application-table.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/application-table.png -------------------------------------------------------------------------------- /demo/icons/bin-metal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/bin-metal.png -------------------------------------------------------------------------------- /demo/icons/book-open-list.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/book-open-list.png -------------------------------------------------------------------------------- /demo/icons/cassette.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/cassette.png -------------------------------------------------------------------------------- /demo/icons/magnifier-zoom-actual-equal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/magnifier-zoom-actual-equal.png -------------------------------------------------------------------------------- /demo/icons/receipt-text.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/receipt-text.png -------------------------------------------------------------------------------- /demo/icons/shopping-basket.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/icons/shopping-basket.png -------------------------------------------------------------------------------- /demo/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/joewalnes/jquery-simple-context-menu/3e6caced77e0187025c8582945680e61c17f215b/demo/screenshot.png -------------------------------------------------------------------------------- /jquery.contextmenu.css: -------------------------------------------------------------------------------- 1 | 2 | .contextMenuPlugin { 3 | -webkit-user-select: none; 4 | display: none; 5 | font-family: tahoma, arial, sans-serif; 6 | font-size: 11px; 7 | position: absolute; 8 | left: 100px; 9 | top: 100px; 10 | min-width: 100px; 11 | list-style-type: none; 12 | margin: 0; 13 | padding: 0; 14 | background-color: #f7f3f7; 15 | border: 2px solid #f7f7f7; 16 | outline: 1px solid #949694; 17 | } 18 | 19 | .contextMenuPlugin > li { 20 | margin: 0 0 0 0; 21 | padding: 1px; 22 | background-repeat: no-repeat; 23 | } 24 | 25 | .contextMenuPlugin > li > a { 26 | position: relative; 27 | display: block; 28 | padding: 3px 3px 3px 28px; 29 | color: ButtonText; 30 | text-decoration: none; 31 | margin: 1px; 32 | } 33 | 34 | .contextMenuPlugin > li > a img { 35 | position: absolute; 36 | left: 3px; 37 | margin-top: -2px; 38 | width: 16px; 39 | height: 16px; 40 | } 41 | .contextMenuPlugin > li > a:hover { 42 | border: 1px solid #fffbff; 43 | outline: 1px solid #b5d3ff; 44 | margin: 0; 45 | background: -moz-linear-gradient(top, rgba(239,239,255,0.5) 0%, rgba(223,223,255,0.5) 100%); /* FF3.6+ */ 46 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(239,239,255,0.5)), color-stop(100%,rgba(223,223,255,0.5))); /* Chrome,Safari4+ */ 47 | background: -webkit-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Chrome10+,Safari5.1+ */ 48 | background: -o-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* Opera11.10+ */ 49 | background: -ms-linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* IE10+ */ 50 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80efefff', endColorstr='#80dfdfff',GradientType=0 ); /* IE6-9 */ 51 | background: linear-gradient(top, rgba(239,239,255,0.5) 0%,rgba(223,223,255,0.5) 100%); /* W3C */ 52 | cursor: default; 53 | } 54 | 55 | .contextMenuPlugin > li.disabled { 56 | pointer-events: none; 57 | } 58 | 59 | .contextMenuPlugin > li.disabled a { 60 | color: grey; 61 | } 62 | 63 | .contextMenuPlugin > li.disabled > a:hover { 64 | border: none; 65 | outline: none; 66 | } 67 | 68 | .contextMenuPlugin > li.divider { 69 | border-top: 1px solid #e7e3e7; 70 | border-bottom: 1px solid #ffffff; 71 | height: 0; 72 | padding: 0; 73 | margin: 5px 0 5px 27px; 74 | } 75 | 76 | .contextMenuPlugin > .header { 77 | background: rgb(90,90,90); /* Old browsers */ 78 | background: -moz-linear-gradient(top, rgba(90,90,90,1) 0%, rgba(20,20,20,1) 100%); /* FF3.6+ */ 79 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(90,90,90,1)), color-stop(100%,rgba(20,20,20,1))); /* Chrome,Safari4+ */ 80 | background: -webkit-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Chrome10+,Safari5.1+ */ 81 | background: -o-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* Opera11.10+ */ 82 | background: -ms-linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* IE10+ */ 83 | filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5a5a5a', endColorstr='#141414',GradientType=0 ); /* IE6-9 */ 84 | background: linear-gradient(top, rgba(90,90,90,1) 0%,rgba(20,20,20,1) 100%); /* W3C */ 85 | position: relative; 86 | cursor: default; 87 | padding: 3px 3px 3px 3px; 88 | color: #ffffff; 89 | } 90 | 91 | .contextMenuPlugin > .gutterLine { 92 | position: absolute; 93 | border-left: 1px solid #e7e3e7; 94 | border-right: 1px solid #ffffff; 95 | width: 0; 96 | top: 0; 97 | bottom: 0; 98 | left: 26px; 99 | z-index: 0; 100 | } 101 | 102 | -------------------------------------------------------------------------------- /jquery.contextmenu.js: -------------------------------------------------------------------------------- 1 | /** 2 | * jQuery plugin for Pretty looking right click context menu. 3 | * 4 | * Requires popup.js and popup.css to be included in your page. And jQuery, obviously. 5 | * 6 | * Usage: 7 | * 8 | * $('.something').contextPopup({ 9 | * title: 'Some title', 10 | * items: [ 11 | * {label:'My Item', icon:'/some/icon1.png', action:function() { alert('hi'); }}, 12 | * {label:'Item #2', icon:'/some/icon2.png', action:function() { alert('yo'); }}, 13 | * null, // divider 14 | * {label:'Blahhhh', icon:'/some/icon3.png', action:function() { alert('bye'); }, isEnabled: function() { return false; }}, 15 | * ] 16 | * }); 17 | * 18 | * Icon needs to be 16x16. I recommend the Fugue icon set from: http://p.yusukekamiyamane.com/ 19 | * 20 | * - Joe Walnes, 2011 http://joewalnes.com/ 21 | * https://github.com/joewalnes/jquery-simple-context-menu 22 | * 23 | * MIT License: https://github.com/joewalnes/jquery-simple-context-menu/blob/master/LICENSE.txt 24 | */ 25 | jQuery.fn.contextPopup = function(menuData) { 26 | // Define default settings 27 | var settings = { 28 | contextMenuClass: 'contextMenuPlugin', 29 | linkClickerClass: 'contextMenuLink', 30 | gutterLineClass: 'gutterLine', 31 | headerClass: 'header', 32 | seperatorClass: 'divider', 33 | title: '', 34 | items: [] 35 | }; 36 | 37 | // merge them 38 | $.extend(settings, menuData); 39 | 40 | // Build popup menu HTML 41 | function createMenu(e) { 42 | var menu = $('

') 43 | .appendTo(document.body); 44 | if (settings.title) { 45 | $('

').text(settings.title).appendTo(menu); 46 | } 47 | settings.items.forEach(function(item) { 48 | if (item) { 49 | var rowCode = '

'; 50 | // if(item.icon) 51 | // rowCode += ''; 52 | // rowCode += ''; 53 | var row = $(rowCode).appendTo(menu); 54 | if(item.icon){ 55 | var icon = $(''); 56 | icon.attr('src', item.icon); 57 | icon.insertBefore(row.find('.itemTitle')); 58 | } 59 | row.find('.itemTitle').text(item.label); 60 | 61 | if (item.isEnabled != undefined && !item.isEnabled()) { 62 | row.addClass('disabled'); 63 | } else if (item.action) { 64 | row.find('.'+settings.linkClickerClass).click(function () { item.action(e); }); 65 | } 66 | 67 | } else { 68 | $('

').appendTo(menu); 69 | } 70 | }); 71 | menu.find('.' + settings.headerClass ).text(settings.title); 72 | return menu; 73 | } 74 | 75 | // On contextmenu event (right click) 76 | this.on('contextmenu', function(e) { 77 | var menu = createMenu(e) 78 | .show(); 79 | 80 | var left = e.pageX + 5, /* nudge to the right, so the pointer is covering the title */ 81 | top = e.pageY; 82 | if (top + menu.height() >= $(window).height()) { 83 | top -= menu.height(); 84 | } 85 | if (left + menu.width() >= $(window).width()) { 86 | left -= menu.width(); 87 | } 88 | 89 | // Create and show menu 90 | menu.css({zIndex:1000001, left:left, top:top}) 91 | .on('contextmenu', function() { return false; }); 92 | 93 | // Cover rest of page with invisible div that when clicked will cancel the popup. 94 | var bg = $('

') 95 | .css({left:0, top:0, width:'100%', height:'100%', position:'absolute', zIndex:1000000}) 96 | .appendTo(document.body) 97 | .on('contextmenu click', function() { 98 | // If click or right click anywhere else on page: remove clean up. 99 | bg.remove(); 100 | menu.remove(); 101 | return false; 102 | }); 103 | 104 | // When clicking on a link in menu: clean up (in addition to handlers on link already) 105 | menu.find('a').click(function() { 106 | bg.remove(); 107 | menu.remove(); 108 | }); 109 | 110 | // Cancel event, so real browser popup doesn't appear. 111 | return false; 112 | }); 113 | 114 | return this; 115 | }; 116 | 117 | -------------------------------------------------------------------------------- /simplecontextmenu.jquery.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simplecontextmenu", 3 | "version": "1.3.2", 4 | "title": "Simple Context Menu", 5 | "description": "Very simple to use, good looking right click context menu.", 6 | "author": { 7 | "name": "Joe Walnes", 8 | "email": "joe@walnes.com", 9 | "url": "http://joewalnes.com/" 10 | }, 11 | "keywords": [ 12 | "ui", 13 | "menu", 14 | "contextmenu", 15 | "context-menu", 16 | "rightclick", 17 | "right-click" 18 | ], 19 | "dependencies": { 20 | "jquery": ">=1.3" 21 | }, 22 | "licenses": [ 23 | { 24 | "type": "MIT", 25 | "url": "https://raw.github.com/joewalnes/jquery-simple-context-menu/master/LICENSE.txt" 26 | } 27 | ], 28 | "homepage": "https://github.com/joewalnes/jquery-simple-context-menu", 29 | "docs": "https://github.com/joewalnes/jquery-simple-context-menu", 30 | "demo": "http://joewalnes.github.com/jquery-simple-context-menu/example.html", 31 | "download": "https://github.com/joewalnes/jquery-simple-context-menu/archive/master.zip", 32 | "bugs": "https://github.com/joewalnes/jquery-simple-context-menu/issues" 33 | } 34 | --------------------------------------------------------------------------------