[Plugin] jquery shortcut menu plug-ins

From: http://hi.baidu.com/%CE%D2%BA%DC%B0% AE %D5%C5%B2% AE %C2%D7/blog/item/061bc251abf8a24b1138c2e3.html

 

You can use the custom right-click menu on the webpage to disable the default right-click menu of the browser by using JavaScript. Then, the webpage responds to the right-click event and a custom menu is displayed.

There are many components similar to the right-click menu on the Internet. In general, you should use the default menu of the browser with caution, which will make most users feel uncomfortable. However, in Enterprise Web applications, the user's use environment is more controllable, and it is more suitable to use custom right-click menus in such applications.

The following lists several mature jquery shortcut menu plug-ins. We will introduce them one by one. You can compare them and select one based on your needs.

1. Very simple context menu-Intekhab A Rizvi

Project page: http://intekhabrizvi.wordpress.com/2010/01/28/jquery-very-simple-contextmenu-plugin/

Jquery very simple contextmenu plugin

Usage:
1. download the required files from the plug-in homepage.
2. Include the jquery library, vscontext. jquery. JS, CSS/vscontext.css in your HTML file.

<SCRIPT src = "jquery. js" type = "text/JavaScript"> <! -- MCE: 0 --> </SCRIPT>
<SCRIPT src = "vscontext. jquery. js" type = "text/JavaScript"> <! -- MCE: 1 --> </SCRIPT>
3. Create an element in HTML that responds to the right-click menu.

<Div id = "item"> right-click me </div>
4. Create a menu item.
If the class of <li> has a seprator, there is a split line under this item.

• cut


• copy


• paste


• edit


• Delete

the icon of the menu item must be set in the CSS file.

.

. Vs-context-menu Li. Cut a {background-image: URL (icons/cut.png );}
. Vs-context-menu Li. Copy A {background-image: URL (icons/copy.png );}
. Vs-context-menu Li. paste a {background-image: URL (icons/paste.png );}
. Vs-context-menu Li. edit a {background-image: URL (icons/edit.png );}
. Vs-context-menu Li. Delete A {background-image: URL (icons/delete.png );}
5. initialize the menu and add menu events.

<SCRIPT type = "text/JavaScript"> <! -- MCE: 2 --> </SCRIPT>
2. Context Menu-Cory S. N. laviska

Project page: http://abeautifulsite.net/blog/2008/09/jquery-context-menu-plugin/

Jquery context menu plugin

Use: see the official website of the plug-in.

Methods:

Disablecontextmenu ()	Disable the right-click menu on the matching element.
Enablecontextmenu ()	Enable the right-click menu on the matching element.
Disablecontextmenuitems ("# option1, # option2 ,...")	Disable matched menu items. If the parameter is null, disable all items.
Enablecontextmenuitems ("# option1, # option2 ,...")	Use matched menu items. If the parameter is null, disable all items.
Destroycontextmenu ()	Unbind an element from the context menu.

Callback:

Action	The action corresponding to the selected menu item.
El	Trigger menu Element
POs. x	Horizontal movement of the mouse position relative to the trigger element when the menu is clicked.
POs. Y	Vertical shift of the mouse position relative to the trigger element when the menu is clicked.
Pos.doc x	Horizontal movement of the mouse position relative to the page when the menu is clicked.
Pos.doc y	Vertical shift of the mouse position relative to the page when the menu is clicked.

3. jeegoocontext-Erik van den Berg

Project page: http://www.planitworks.nl/jeegoocontext/

Jeegoocontext

You can use either of the following methods to initialize a menu:

$ ('Selector '). jeegoocontext ('menu _ id ');

$ ('Selector '). jeegoocontext ('menu _ id', 'options ');

"Selector" creates the content to be bound for the menu. It can be any jquery selector.
"Menu_id" is the menu ID (no "#").
"Options" is an object. You can configure attributes and callback functions.

You can unbind all menu content from the menu by calling:

$ ('Context'). nojeegoocontext ();

Options properties:

Livequery	Boolean	Undefined	Menu	If it is true, the menu content is generated through livequery and loaded dynamically.
Hoverclass	String	'Hover'	Menu	This CSS class is set when you hover your mouse over a menu item or its direct subitem.
Activeclass	String	'Active'	Global	This CSS class is set to the menu of the current activity (right-click the menu area to pop up ). This variable is global and only needs to be set once when multiple menus are used. If you repeat the setting, the value is provided at the end.
Menuclass	String	'Jeegoocontext'	Global	All menus must contain this CSS class. This variable is global and only needs to be set once when multiple menus are used. If you repeat the setting, the value is provided at the end.
Autoaddsubmenuarrows	Boolean	True	Menu	If this parameter is set to true, an indicator arrow is automatically added for the menu items with subitems.
Submenuclass	String	'Submenu'	Menu	If autoaddsubmenuarrows is set to true, this class is set to the <span> element that contains a small arrow in the menu item.
Separatorclass	String	'Separator'	Menu	If a menu item contains this type, the menu item is skipped when you press the keyboard up or down key to switch the menu item.
Fadein	Number	200	Menu	The time when menus and sub-menus fade in, in milliseconds.
Delay	Number	300	Menu	Latency of its sub-menus hidden when the mouse moves out of the parent menu item, in milliseconds.
Keydelay	Number	100	Menu	The delay time of the context menu item, in milliseconds.
Widthoverflowoffset	Number	0	Menu	It can be used when the width overflows. For example, if it is set to 20, the right of the menu and the sub-menu is always 20 PX away from the right border of the window.
Heightoverflowoffset	Number	0	Menu	It can be used in case of high overflow. For example, if it is set to 20, the bottom of the menu and sub-menu is always 20 PX away from the bottom border of the window.
Submenuleftoffset	Number	0	Menu	Horizontal shift of the sub-menu to the parent menu. For example, if it is-3, 3px on the left of each sub-menu overlaps with the parent menu.
Submenutopoffset	Number	0	Menu	Vertical displacement of the sub-menu to the parent menu. For example, if it is-3, each sub-menu is 3 px higher than its parent menu item. Of course, this value is ignored when the height overflows.
Operaevent	String	'Dblclick'	Menu	In earlier versions of opera 9.5, the context menu in the browser is disabled. This event defines how to open the menu in opera.
Event	String	Undefined	Menu	When this item is set, the defined event is used to replace the right-click menu to open the menu. This parameter takes precedence over the operaevent attribute. For example, if it is set to 'click', the left button is used to open the menu.

Options callbacks

You can set the following four callbacks:

Onshowonhoveronselectonhide

Each callback receives two parameters: E and context. e is the source element of the event, and context is the area of the menu pop-up. With these callback functions, you can use the return false method to cancel the default behavior of menu events.

Onshow	Menu	Right-click on bound context.	Hide all menus on the page. Delete all active menus and menu items on the page. Add an active class for the content currently clicked. Fade in menu.
Onhover	Menu-item	Mouseover on menu-item.	Locate and fade into the sub-menu.
Onselect	Menu-item	Click on menu-item.	Delete the active class of the current active menu or menu item. Hide a menu.
Onhide	Menu	Click on document.	Delete all active menus and menu items on the page. Hide a menu.

4. jquery context menu script-Dynamic drive

Project page: http://www.dynamicdrive.com/dynamicindex1/contextmenu.htm

Jquery context menu script

This is also a simple right-click menu. The menu content also uses <ul> and <li> nesting to construct multi-level menus. For more information, see the plug-in page.

5. Context Menu-Chris domigan

Project page: http://www.trendskitchens.co.nz/jquery/contextmenu/

Contextmenu plugin

This is also a plug-in named context menu.
Usage:

Parameters:

Menu_id

By referencing the menu ID, you can bind the same menu to multiple elements. For example:

$ ("Table TD"). contextmenu ("mymenu ")

The menu with ID "mymenu" is bound to all table cells.

Settings

Settings supports the following attributes:

Bindings	The object that contains the "ID": function pair. The provided functions are the actions for clicking. The trigger menu element is passed to the handle as the first parameter.
Menustyle	The object that contains the stylename: Value Pair defines the UL style of the menu container.
Itemstyle	Defines the style of the menu item Li.
Itemhoverstyle	The object that contains the stylename: Value Pair defines the hover style of the menu item Li.
Shadow	Boolean value. The default value is true. Whether the menu is shaded.
Eventposx	You can define the menu pop-up position. The default value is pagex. Set clientx in IE6.
Eventposy	You can define the menu pop-up position. The default value is pagex. Set clienty in IE6.
Oncontextmenu (Event)	It is called before the menu is displayed. If false is returned, the menu is not displayed.
Onshowmenu (event, menu)	It is called before the menu is displayed. It passes a reference to the menu element and allows you to manually modify the output before the menu display. You can display or hide parameters or anything before the menu is displayed to the user. This function must return the menu

In addition, you can call:

$. Contextmenu. defaults (settings)

Define a default style for all menus.

6. jquery contextmenu plugin-Matt Kruse

Project page: http://www.javascripttoolbox.com/lib/contextmenu/index.php
This is a shortcut menu plug-in named contextmenu. This plug-in is very powerful. The author writes a set of JavaScript toolboxes.

Jquery contextmenu plugin

Usage:

$ (Function (){
$ (". Context"). contextmenu ([menu], {options });
});

Menu array structure:

[
// Key = option content, value = function to execute when option is clicked
{'Option content': function (menuitemclicked, menuobject ){}},

// A constant to represent a separator item
$. Contextmenu. separator,

// A more complex option with each option declared explicitly
// Key = option content, value = Object Defining Properties
{'Advanced option ':
{
// All attributes are optional.

// The function to be executed when the option is clicked.
// Arguments passed to this function are:
// Menuitemclicked-a reference to the DIV containing the option clicked
// Menuobject-a reference to the contextmenu object
// Return false to not close the menu when the option is clicked.
// Return anything else (or nothing) for normal behavior
Onclick: function (menuitemclicked, menuobject ){},

// An additional class name to apply to the option
Classname: 'name ',

// The class name to apply to the option when it is hovered over
Hoverclassname: 'name ',

// The background-image to use for this icon.
// If a theme doesn't support background images, it won't be displayed.
// A theme's CSS shocould explicitly take this into account.
Icon: 'image.gif ',

// Set to true to disable an option.
Disabled: false,

// Title attribute text to show when the mouse is over an option
Title: 'title text ',

// function to call when this option is hovered over.
// arguments passed to this function are:
// classname-the class name (string) that is defined in the options
// to be applied for hover
hoveritem: function (classname) {},

// Function to call when this option is no longer hovered over.
// Arguments passed to this function are:
// Classname-the class name (string) that is defined in the options
// To be removed
Hoveritemout: function (classname ){}
}
}
]
Parameters:

{
// True | false indicates whether to display the menu shadow.
Shadow: True,

// The position offset of the menu shadow,
// If set, overwrite the separate X and Y offsets.
Shadowoffset: 0,

// Menu shadow offset, X, Y
// (It can be a negative number)
Shadowoffsetx: 5,
Shadowoffsety: 5,

// By default, the shadow is as large as the menu. The value here makes the shadow a little larger or smaller than the menu.
// Set it to-3 to make it look the best.
Shadowwidthadjust:-3,
Shadowheightadjust:-3,

// Shadow transparency
Shadowopacity:. 2,

// Set the class for the DIV with the Shadow.
Shadowclass: 'Context-menu-shadow ',

// Shadow color
Shadowcolor: 'black ',

// The offset between the menu and the mouse position
Offsetx: 0,
Offsety: 0,

// Jquery selector that defines the DOM of the attach menu
Appendto: 'body ',

// Menu display direction
Direction: 'low ',

// Keep the menu visible on the screen
Constraw.screen: True,

// Jquery transition effect, display and hide menus
Showtransition: 'show ',
Hidetransition: 'hide ',

// Transition speed-slow/normal/fast/# Ms
Showspeed :'',
Hidespeed :'',

// Display/hide the callback function after the menu
Showcallback: NULL,
Hidecallback: NULL,

// Css class name to apply to the generated menu HTML.
// See http://www.JavascriptToolbox.com/lib/contextmenu/#themes
Classname: 'Context-menu ',
Itemclassname: 'Context-menu-item ',
Itemhoverclassname: 'Context-menu-item-Hover ',
Disableditemclassname: 'Context-menu-item-disabled ',
Disableditemhoverclassname: 'Context-menu-item-disabled-Hover ',
Separatorclassname: 'Context-menu-separator ',
Innerdivclassname: 'Context-menu-item-inner ',
// Class name prefix to prepend to the theme name for CSS styling
Themeprefix: 'Context-menu-theme -',

// Topic name, including: 'default', 'xp ', 'Vista', 'osx', 'human ', and 'gloss'
// Multiple themes may be applied with a comma-separated list.
Theme: 'default ',

// a flag to determine if an IFRAME Shim shoshould be used for <= IE6 on Windows
// This is to prevent selectbox/flash/etc bleed-thru.
// If animations cause problems in <= IE6 and you don't _ Need _ An iframe,
// set this to false.
useiframe:/* @ cc_on @ * // * @ if (@ _ Win32) True, @ else @ */false, /* @ end @ */

// structure menu
// arguments:
// menu: either string, function, or array
// string-A jquery Selector Used to get the menu content on the page
// function-function to run each time menu is displayed. this
// function shocould return an array of menu options
// array-an array of options in the required format
// opts: an object of options, overriding any or all of the options here
// returns:
// contextmenu object
Create: function (menu, opts) {},

// Create the IFRAME object to show behind the menu.
// Arguments: None
// Returns: IFRAME object
Createiframe: function (){},

// Accept an array representing a menu structure and turn it into HTML
// Arguments:
// Menu: the array of options
// Cmenu: The contextmenu object
// Returns:
// DOM object containing the HTML for the menu
Createmenu: function (menu, cmenu ){},

// Create the DOM object for an individual option, called by createmenu
// Arguments:
// Label: the text to display
// OBJ: either a function or an object
// Function-runs when the option is clicked
// Object-an option structure as described in menu Array Structure
// Returns:
// DOM object containing HTML for a single option
Createmenuitem: function (Label, OBJ ){},

// Create a split line
// Arguments: None
// Returns:
// DOM object containing HTML for the Separator
Createseparator: function (){},

// Determine if an individual item is currently disabled. This is called each
// Time the item is hovered or clicked because the disabled status may change
// At any time. You can override this function with app-specific ality
// To determine which options shoshould be disabled based on business rules.
// Arguments:
// Item: DOM object of the option being checked
// Returns:
// Boolean
Isitemdisabled: function (item ){},

// Call the move button
// No Return Value
// Arguments:
// Classname: the hover class to apply or remove
// Returns:
// None
Hoveritem: function (classname ){},
Hoveritemout: function (classname ){},

// Create a DOM element behind the menu to display the shadow
// Arguments:
// Cmenu: contextmenu object
// Returns:
// DOM object containing HTML for the shadow
Createshadow: function (cmenu ){},

// Display the shadow object, given the position of the menu itself.
// Arguments:
// X: The X (left) Position of the menu
// Y: The Y (top) Position of the menu
// E: the event that triggered the context menu
// Returns:
// None
Showshadow: function (X, Y, e ){},

// A hook to call before the menu is shown, in case special processing needs
// To be done. Using this you can modify the menu contents, etc on the fly.
// Arguments:
// None
// Returns:
// Boolean: false to cancel the default show operation, true to work as normal
Beforeshow: function () {return true ;},

// Use the specified transition mode to make the menu visible
// Arguments:
// Target: the object that originally caught the contextmenu event
// E: the original event
// Returns:
// None
Show: function (target, e ){},

// Obtain the position where the menu should be displayed, and right-click the X, Y of the event.
// Arguments:
// Clickx: The X (left) Position of the Click Event
// Clicky: The Y (top) Position of the Click Event
// Cmenu: The contextmenu object
// E: the original event
// Returns:
// Specify the position {'X': X, 'y': y} of the menu}
Getposition: function (clickx, clicky, cmenu, e ){},

// Hide the menu
// Arguments:
// None
// Returns:
// None
Hide: function (){}
}

Set default parameters:

// Disable the shadow of all menus
$. Contextmenu. Shadow = false;
// Set the topic of all menus to 'xp'
$. Contextmenu. theme = 'xp ';