diff --git a/demo.html b/demo.html index 42c4735e..96763747 100755 --- a/demo.html +++ b/demo.html @@ -5,49 +5,11 @@
To register a new contextMenu:
+$.contextMenu( options );+ +
No Default Value - specification is Mandatory
+The selector matching the trigger objects.
+Example: "span.with-context"
.
No Default Value - specification is Mandatory
+Items to be listed in contextMenu. See Items.
+Example: { one: {name: "one", callback: function(key, opt){ alert("Clicked on " + key); } }}
default: "rightclick"
+Specifies the event to show the contextMenu
+Possible values: "rightclick", "hover"
+default: 200
+Specifies the time in milliseconds to wait before showing the menu. Only applies to trigger: "hover"
default: 1
+Specifies the offset to add to the calculated zIndex of the trigger element. Set to 0 to prevent zIndex manipulation
+Specifies additional classNames to add to the menu element
+default: {duration: 500, show: "slideDown", hide: "slideUp"}
++ animation properties take effect on showing and hiding the menu. + duration specifies the duration of the animation in milliseconds. + show and hide specify jQuery methods to show and hide elements. +
+Possible show and hide animations: {show: "show", hide: "hide"}
, {show: "fadeIn", hide: "fadeOut"}, …
+
The show and hide events are triggered before the menu is shown or hidden.
+The event handlers are executed in the context of the triggering object. this will thus reference the jQuery handle of the trigger object.
+A reference to the current options object is passed
+The event handlers may return false to prevent the show or hide process.
+Example: {show: function(opt){ this.addClass('currently-showing-menu'); alert("Selector: " + opt.selector); }}
The items map contains the commands to list in the menu. Each command has a unique key:
+items: { + command1: commandOptions, + command2: commandOptions +}+ +
Specified the human readable name of the command in the menu
+This is a mandatory property
+Specifies the callback to execute if clicked on
++ The Callback is executed in the context of the triggering object. + The first argument is the key of the command. + The second argument is the options object. + The Callback may return false to prevent the menu from being hidden. +
+Example: { command1: {name: "Foobar", callback: function(key, opt){ alert("Clicked on " + key + " on element " + opt.$trigger.id); } }}
+This is a mandatory property for non-input elements (no type)
+Specifies additional classNames to add to the item element
+Specifies the icon class to set for the item.
+Icons must be defined in CSS with selectors like .context-menu-item.icon-edit
, where edit is the icon class.
Specifies if the command is disabled (true) or enabled (false).
++ May be a callback returning a boolean. + The Callback is executed in the context of the triggering object. + The first argument is the key of the command. + The second argument is the options object. +
+Example: { command1: {name: "Foobar", callback: function(key, opt){ return true; } }}
+Specifies the type of the command.
+null, undefined and the empty-string make the command a simple clickable item.
+"text" makes the command an <input> of type text. The name followed by the <input> are encapsulated in a <label>.
+"checkbox" makes the command an <input> of type checkbox. The name preceeded by the <input> are encapsulated in a <label>. The checkbox-element is moved to the icon space
+"radio" makes the command an <input> of type radio. The name preceeded by the <input> are encapsulated in a <label>. The radio-element is moved to the icon space
+"select" makes the command a <select>. The name followed by the <select> are encapsulated in a <label>.
+The value of the <input> element.
+Only used with types "text" and "radio".
+The selected option of a <select> element and the checked property for "checkbox" and "radio" types.
+Expecting a boolean when used with types "checkbox" and "radio".
+Expecting a string when used with type "select"
+Specifies the group of the radio elements.
+Only used with type "radio".
+Specifies the <option>s for the <select> element.
+Only used with type "select".
+Example: {name: "select box", selected: "two", options: {one: "red", two: "blue", three: "green"}}
Reference to the <li> command element
+Registered by contextMenu after first show
+Reference to the <input> or <select> of the command element.
+Only available with type "text", "checkbox", "radio" and "select".
+Registered by contextMenu after first show
+Reference to the <label> of the command element
+Only available with type "text", "checkbox", "radio" and "select".
+Registered by contextMenu after first show
+opt is a reference to the options object passed at contextMenu registration
+The element triggering the menu
+The menu element
+flag denoting if the menu contains input elements
+The namespace (including leading dot) all events for this contextMenu instance were registered under
+To unregister / destroy a specific contextMenu:
+$.contextMenu( 'destroy', selector );+
selector expects the (string) selector that the contextMenu was registered to
+ +To unregister / destroy all contextMenus:
+$.contextMenu( 'destroy' );+ +
To fill input commands with values from a map:
+{events: {hide: function(opt){ $.contextMenu.getInputValues(opt, {command1: "foo", command2: "bar"}); }}}+
To fill input commands with values from data-attributes:
+{events: {hide: function(opt){ $.contextMenu.getInputValues(opt, this.data()); }}}+ +
To fetch values from input commands:
+{events: {hide: function(opt){ var values = $.contextMenu.setInputValues(opt}}}+
To save values from input commands to data-attributes:
+{events: {hide: function(opt){ $.contextMenu.setInputValues(opt, this.data()); }}}+ + + \ No newline at end of file diff --git a/index.html b/index.html index c4b75688..5a8c8c25 100755 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ -