[Plugin] jquery shortcut menu plug-ins

Source: Internet
Author: User

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.


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 ';

     

    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.