This document applies to 2.0 version

This jQuery plugin opens a context menu on some specified target element in some DOM tree.

It supports two ways of opening the menu:
  • When user clicks on the target element on which the menu must be opened.
  • When user moves over the target element on which the menu must be opened.

This plugin will be activated on any DOM element by calling jQuery dynamicContextMenu method:
$("#someElement").dynamicContextMenu(...); 


Plugin constructor must be called by giving a parameter map. Available parameters are:
  • style. A inner map of CSS classes:
    • containerCssClass, which is context menu container CSS class name. This is mandatory.
    • itemIconCssClass, which is context menu item CSS Class name. This is optional.
    • subLevelHolderItemCssClass, which is context menu item CSS class name having children. This is mandatory.
  • id. An unique identifier for the context menu container DOM element.
  • onItemClick. An event handler that will be called when some context menu item is clicked. It must implement two input parameters:
    • sender, which is context menu object (don't confuse it with DOM element).
    • item, which is clicked context menu item object (that's each item will have a text and value properties - explained later -).
  • items. A collection of menu item objects. Each object must have these properties:
    • text, which is the label of the item.
    • value, which is the identifier of the item.
    • iconUrl, which is some icon (JPEG, PNG, GIF... any supported image format supported by Web browsers).
    • onChildItemClick, which is a submenu item click handler. It has the same signature as on regular onItemClick handler.
    • children, which is an array of menu item objects in the same way as parent ones (those describen in this property list).
  • openMode. Sets the way context menu will be opened. Available modes:
    • click. This will open context menu when a click is performed on target element.
    • hover. This will open context menu when mouse is over target element.
  • waitTime. Defines a delay in miliseconds before opening context menu once target element has been reached in any open mode.
  • context. Gives some context object - a custom object that could be provided so menu item click handler sender (menu object) will be able to retrieve it.

It's important to understand that no parameter is optional. This is a design decision and it means this plugin will be called by giving arguments to all parameters.

SAMPLE

Markup:

 <div id="someElement">
</div> 


JavaScript:

$("div#someElement").dynamicContextMenu
(
    {
        id: "someContextMenu",
        style:
        {
            containerCssClass: "DynamicContextMenuContainer",
            subLevelHolderItemCssClass: "DynamicContextMenuSubLevelHolderItem",
            itemIconCssClass: "DynamicContextMenuItemIcon"
        },
        items:
        [
            {
                text: "Say hello",
                value: "0",
                children: [
                    {
                        text: "I'll say another thing...!",
                        value: "0"
                    }
                ],
                iconUrl: "hand.png",
                onChildItemClick: function (sender, item) {
                    switch (item.value) {
                        case "0":
                            alert("What's up!");
                            break;
                    }
                }
            },
            {
                text: "Say goodbye",
                value: "1",
                iconUrl: "hand.png"
            }
        ],
        openMode: "click",
        onItemClick: function (sender, item) {
            switch (item.value) {
                case "0":
                    break;

                case "1":
                    alert("Goodbye!");
                    break;
            }
        },
        waitTime: 200
    }
);

Last edited Apr 19, 2011 at 9:39 AM by MFidemraizer, version 13

Comments

xiaomuxixu Apr 23, 2011 at 2:47 AM 
[url=http://www.pandora-uksale.com/]pandora sale[/url]

[url=http://www.linkslondonsaleuk.com/]links of london bracelets[/url]

[url=http://www.thomassabosaleshop.com/]Thomas Sabo Jewellery[/url]

[url=http://www.beatsbydreon.com/]dr dre headphones[/url]

[url=http://www.hichristianlouboutins.com/]louboutin[/url]
Great sources for fashion news and fashion articles. It's got offered many details around the relevant information. I like this post quite definitely and i'm gonna recommend it to my pals. Brief and practical methods within the post save your time and inside the searching process. It's this kind of awesome source or technique i can't wait to use it. The post is totally incredible. Many thanks for all you posted and all you could tell us!