A Simple Good Looking Context Menu, for jQuery

Yes, there are loads of context menu plugins already. But they require a fair amount of work to make them look good.

This one is easy to use, small, and looks good.

Demo

Features

  • Tiny library. Only dependency is jQuery.
  • Simple API.
  • Looks good out of the box, with no additional tweaking.
  • Designed to look and behave like a standard Windows context menu.
  • There’s so little code, it should be easy to add your own custom features.

The menu looks like this:

Installation

Include the files jquery.contextmenu.css and jquery.contextmenu.js in your page <head>. You also need jQuery. It is recommended that you use the HTML 5 DOCTYPE to ensure rendering consistency.

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery-1.6.2.min.js"></script>
    <script src="jquery.contextmenu.js"></script>
    <link rel="stylesheet" href="jquery.contextmenu.css">
    ... rest of your stuff ...

You can get the files from here:

Usage

The plugin introduces a contextPopup() method to the jQuery object.

Assuming you have an element that you’d like to bind a context menu to:

<div id="mythingy">hello</div>

You can wire up a context menu like this:

$('#mythingy').contextPopup({
  title: 'My Popup Menu', 
  items: [ 
    { label:'Some Item',
      icon:'icons/shopping-basket.png',
      action:function() { alert('clicked 1') } }, 
    { label:'Another Thing', 
      icon:'icons/receipt-text.png', 
      action:function() { alert('clicked 2') } },
    // null can be used to add a separator to the menu items
    null,
    { label:'Blah Blah', 
      icon:'icons/book-open-list.png', 
      action:function() { alert('clicked 3') } }
  ]});

Icons

The icons should be 16×16 pixels. I recommend the Fugue icon set (shadowless).

Go get it

It’s over on GitHub:

2011
07/22
CATEGORY
Software
TAGS



Write comment
  • Trackback are closed
  • Comments (5)
    • Michael
    • September 23rd, 2011

    Hi Jow,

    This doesn’t seem to work in IE 8 (Looks great in FireFox – no surprises here then…);

    Webpage error details

    User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; SOE200; .NET CLR 1.1.4322; .NET CLR 2.0.50727; InfoPath.2; MS-RTC LM 8; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
    Timestamp: Fri, 23 Sep 2011 04:02:16 UTC

    Message: Object doesn’t support this property or method
    Line: 34
    Char: 5
    Code: 0
    URI: http://joewalnes.github.com/jquery-simple-context-menu/jquery.contextmenu.js

    Thoughts?

    • Michael
    • September 23rd, 2011

    @Michael
    It’s the .forEach method; it is only supported in IE9.

    • Matheus
    • October 10th, 2011

    I could see this problem too. The IE Debuger show the erro in this line:
    settings.items.forEach(function(item) {
    it’s seems that the forEach don’t exists.
    When I have a time i’ll try to fix it.

    • Michael
    • October 11th, 2011

    Hi Matheus,

    I fixed it by adding the following prototype;
    if(!(‘forEach’ in Array.prototype)) {
    Array.prototype.forEach= function(action, that) {
    for (var i=0, n= this.length; i<n; i )
    if (i in this)
    action.call(that, this[i], i, this);
    };
    }

    IE also doesn't support pageX/Y properly, so I needed to run jQuery's event fixer;
    e= jQuery.event.fix(e)

    • Matheus
    • October 11th, 2011

    Michael,

    Thanks!

    I could fix it in another way changing the code below:

    settings.items.forEach(function(item){

    for

    $.each( settings.items, function(i,item){

    from jquery

    But i’m using the code:

    e= jQuery.event.fix(e)

Comments are closed.
%d bloggers like this: