Home > jQuery > jQuery Very Simple ContextMenu Plugin

jQuery Very Simple ContextMenu Plugin


jQuery Very Simple ContextMenu

Today i am going to release my own build jquery context menu.

Download : jQuery Very Simple Context Menu Plugin

jQuery Very Simple Context Menu Plugin
Their is 3 important file you need to include in your application

1) vscontext.jquery.js (Context Menu Logic File).
2) vscontext.css (Context Menu CSS File).
3) A file which store your click function written on your menu items href attribute, (here i am using menu_action.js).

How to build context menu

Step 1 : Include files

1) jquery.js
2) vscontext.jquery.js
3) menu_action.js (can use your own file name which have menu items action functions)
4) css/vscontext.css

Step 2 : Create area where you want to build context menu.


<div id="context">This is the testing block.</div>

Step 3 : Build Menu item list with action code


<div class="vs-context-menu">

<ul>

<li class=”cut seprator”><a href=”javascript:cut();” id=”menu_1″>Cut</a></li>

<li class=”copy”><a href=”javascript:copy();” id=”menu_2″>Copy</a></li>

<li class=”paste seprator”><a href=”javascript:paste();” id=”menu_3″>Paste</a></li>

<li class=”edit”><a href=”javascript:edit();” id=”menu_4″>Edit</a></li>

<li class=”delete”><a href=”javascript:del();” id=”menu_5″>Delete</a></li>

</ul>

</div>

Step 4 : Build ContextMenu Code


<script type="text/javascript">

$(document).ready(function(){

$(‘#context’).vscontext({menuBlock: ‘vs-context-menu’});

});

</script>

Where #context is the id of div from step – 2.
AND vs-context-menu is the class name from step – 3.

Advertisements
  1. March 25, 2010 at 2:31 am

    Hello intekhabrizvi, First thanks for this code, I’m using it in an OpenSource project I’m working (you can see it working here: http://foravatars.com/devi/ I’ve changed a few lines and re-done the CSS code to get this working with $(document) so the whole document will use the custom context-menu and changed to single tags, If you want the code I can give you a copy, just mail me. Again thanks

    • intekhabrizvi
      March 25, 2010 at 9:57 am

      Hi Jose,
      Thanks for sharing your project with us, i checked the update code from your projects source code.
      Best of luck & Happy coding.

  2. marzieh
    August 22, 2010 at 4:34 pm

    Hello intekhabrizvi
    Thanks for sharing your project with us.i had some question 😛
    i want use this context menu in tree view,but i don’t know how can i get node information like ID, when i click on each menu item?
    please help me

    • intekhabrizvi
      August 30, 2010 at 6:17 pm

      hello, can you show me how you are building your tree, so that i can help you their, sorry for late reply thanks

  3. RationalRabbit
    November 3, 2010 at 11:20 am

    Your testbox does not work in FireFox 3.6. All I get is a regular context menu.

  4. MemeDeveloper
    November 25, 2010 at 6:01 am

    Hi there intekhabrizvi,

    Firstly thank you very much for releasing this plug-in, very concise, excellent work, much appreciated.

    Disclaimer :

    I did this very very quickly, and would bet money that its nowhere near perfect, but still may help someone out…

    I needed two little modifications :

    1) The ability to remove the menu from elements.

    I wanted to be able remove the menu under certain circumstances, and also to swap out one menu for another under certain circumstances.

    So I very very quickly added a target variable to the call, and when its passed as “destroy” it seems to be correctly removing the menu.

    This means you can remove it entirely or swap it out for a different menu.

    2) The ability to pass in non-class based selectors for the

    options.menuBlock

    e.g. I need / wanted to pass in an ID instead of a className e.g. “#ctxmenu4”

    So I am wondering if you are interested in my updated source. If so pls drop me an email and I’ll pop it over to you.

    Like I say, literally just did this now in a number of minutes but seems to be working well.

    Thanks. Great work.

    MemeDeveloper

  5. January 10, 2011 at 12:31 pm

    very good work… Thanks

  6. March 24, 2011 at 10:56 pm

    I’ve just started using your script, and it’s one of the cleanest pieces of code for a contextmenu I’ve found to date.

    Thank You.

    I thought I’d let you know a couple of changes I’ve made.

    I’ve changed the line:
    var menu_item = ‘.’ + options.menuBlock;
    to
    var menu_item = options.menuBlock;

    and then invoke the context menu using:
    $(‘#context’).vscontext({menuBlock: ‘.vs-context-menu’});

    This will allow you to have better control over which menu pops up.

    Also I’ve added left/right click options.

    Change defaults to:

    var defaults = {
    menuBlock: null,
    leftButton: false,
    rightButton: true,
    offsetX : 8,
    offsetY : 8,
    speed : ‘slow’
    };

    then locate the line:
    if(e.button == “2”){

    and change to

    if(
    (e.button == 2 && options.rightButton == true)
    ||
    ($.browser.msie && e.button == 1 && options.leftButton == true)
    ||
    (!$.browser.msie && e.button == 0 && options.leftButton == true)
    ){

    The beauty of this is your scripts by default works the same way, but you can set options to change which button opens the menu.

  7. Stefano
    May 25, 2011 at 12:39 pm

    Hi,

    Just to inform you or inform anybody else about Macintosh and your plug in … because the Mac right-click is usually ctrl+click (I mean click and ctrl key on keyboard) but your plugin doesn’t work in this way (neither using the trackpad and the same ctrl+click).
    It works only if there is an explicit “right-click” command on the mouse set. I don’t know if you could add this specific Mac “ctrl+click” …

    • intekhabrizvi
      June 1, 2011 at 2:05 pm

      Thanks for your feedback, the problem is that i don’t have Mac machine, i normally use Linux for development and done a test on both Microsoft & Linux machine.

  8. Snake
    July 22, 2011 at 1:20 am

    How do you actually use this menu? I got it to work just like yours, but let’s say that I want to cut something out, how does that work?

  9. Suganthar
    July 22, 2011 at 10:09 am

    This is the testing block.

    I want to implement this inside the table row… How can i reform this coding in order to do so.

    Urgent help

  10. Seb
    June 14, 2012 at 2:03 pm

    Hello,
    Nice menu!
    I want to display a different menu following condition:

    $(‘#context’).vscontext({menuBlock: function(){
    if(varcheck == ‘true’) {
    return ‘vs-context-menu_1’
    } else {
    return ‘vs-context-menu’
    }
    }
    });

    This does not work. do you have a tip??
    Thank you.

  11. fachhoch
    December 7, 2012 at 4:43 am

    I want the context menu for a div whihc is created with ajax request, when page initially loads there is no context div when a link is clicked context div is added and the right click is not poping up menu . Please advice will it work for div created with ajax ?

  12. Ajay Sharma
    March 20, 2013 at 6:02 pm

    Hi,
    This script is great. thanks for sharing.

    I am having a small issue, hope you can help with this.
    After the right click if I move my mouse to any other control on the screen then the menu is not hiding (because it hides only after the moue over then Out of menu).

    Please guide how can I hide the menu without hover/out of menu.

    Thanks

  13. John Immanuel P
    April 10, 2013 at 10:56 am

    I want the context menu in tree view. When I right click the country then context menu should display Add Country, Edit.. and When I right click City it should display Add City etc. Please let me have some reference.

  14. November 12, 2013 at 6:33 am

    “jQuery Very Simple ContextMenu Plugin | Web 2.
    0 Programming Tips” was in fact a good article. If solely there was
    way more weblogs such as this particular one on
    the web. Anyhow, thanks a lot for your personal precious time, Novella

  1. January 31, 2010 at 12:20 am
  2. June 24, 2010 at 2:25 pm
  3. September 11, 2010 at 3:22 pm
  4. October 18, 2010 at 9:31 pm
  5. October 18, 2010 at 9:41 pm

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: