Context menu jquery plugin: jjmenu.

Current version: 1.1.2 (2010-08-28)


Overview

Changelog

1.1.2 (2010-08-28): 1.1.1 (2010-01-04):
Demos Show sources

1. Simple, static menu: [Click Me With LeftMouseButton]

2. Pass dynamic parameters ( type here: ) [Click Me With RightMouseButton]

3. AJAX items [Click Me With Left or Right MouseButton]

4. Menu Effects [Fade In - Click Me With L or R MouseButton] | [Slide Down - Click Me With L or R MouseButton]

5. Other
ID NAME AGE

Documentation


Usage:
jQuery(" -trigger element- ").jjmenu( eventType, items, userData, effects );

eventType:

items - array of objects : [ object1, object2, ... ]

object in items array (attributes): Defines the menu item object

{ 
    title:"Some title", //title of the menu item
    customClass:"someClassName", //custom ClassName of menu item (for CSS formating)
    "action":action object {        
      {type:"ajax", url:"/url.php?id=#myvalue1#", callback:"(function(data){ alert(data.value);  })"  } // for ajax action
      | {type:"gourl", url:"url, target:"_blank" } // for simple go url action, don't define target for simple redirection 
      | {type:"fn", callback:"(function(userData) { alert(userData.attr2); alert(triggerElement.id); })"} // for custom user function  
    }
    "type": "sub"|"default"  // type of item [ "sub" - submenu, "default" - default item ]
    "src": array of objects : [ object1, object2, ... ] for submenu

}     
or
{ 
    get:"URL to server side script", //load dynamic item using ajax, server should return the same structure as above
}     
or
{ 
    getByFunction:JS_FUNCTION, //JS users custom function that returns the same structure as above
}     

userData - object Replaces content: #attr1# with value1, #attr2# with value2, etc - in URLs and menu titles. Also pass userData as parameter to user's JS callback functions

{
    myvalue1:"value1",
    attr2:"value2"",
    ...
}

effects - object: Determines the appearance of menu

{ 
    show:"default"|"fadeIn"|"slideDown", //type of show effect
    orientation: "top"|"bottom"|"auto", //type of menu orientation - to top, to bottom, auto (to bottom, if doesn't fit on screen - to top)
    xposition:"left"|"right", // position of menu (left side or right side of trigger element) 
    yposition:"top"|"bottom"|"auto" 
}

Tips

To get clicked element properities, special variable triggerElement is available in all callback functions.

To get clicked element properities in userData object, you need to use callback function such as:

{"url_id":function() { return triggerElement.id;  } }
Now you can define for example such menu item:
{"title":"Go to user portfolio", action:{type:"gourl", url:"http://mywebsite.com/user.php?id=#url_id#"} }
Download
The MIT License

Copyright (c) 2010 Jacek Jursza

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
download source code