From 391e15bf6f7e1e38744401fb2f9a00e11b462818 Mon Sep 17 00:00:00 2001 From: Rodney Rehm Date: Sat, 18 Jun 2011 23:51:52 +0200 Subject: [PATCH] documentation --- demo.html | 44 +------- docs.html | 243 ++++++++++++++++++++++++++++++++++++++++++ index.html | 5 +- jquery.contextMenu.js | 4 +- 4 files changed, 253 insertions(+), 43 deletions(-) create mode 100755 docs.html diff --git a/demo.html b/demo.html index 42c4735e..96763747 100755 --- a/demo.html +++ b/demo.html @@ -5,49 +5,11 @@ jQuery contextMenu Plugin Demo - - + + @@ -57,6 +19,7 @@

jQuery contextMenu Plugin

@@ -227,6 +190,7 @@

Demo: Context Menu triggered by hover

var $this = this; // import states from data store $.contextMenu.setInputValues(opt, $this.data()); + console.log(opt); }, hide: function(opt) { var $this = this; diff --git a/docs.html b/docs.html new file mode 100755 index 00000000..e824b0e0 --- /dev/null +++ b/docs.html @@ -0,0 +1,243 @@ + + + + + + jQuery contextMenu Plugin + + + + + + + + + + +

jQuery contextMenu Plugin

+ + + +

Register new contextMenu

+

To register a new contextMenu:

+ 
$.contextMenu( options );
+ +

options (at registration)

+ +
+
(string) selector
+
+

No Default Value - specification is Mandatory

+

The selector matching the trigger objects.

+

Example: "span.with-context".

+
+
(object) items
+
+

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); } }}

+
+ +
(string) trigger
+
+

default: "rightclick"

+

Specifies the event to show the contextMenu

+

Possible values: "rightclick", "hover"

+
+ +
(int) delay
+
+

default: 200

+

Specifies the time in milliseconds to wait before showing the menu. Only applies to trigger: "hover"

+
+ +
(int) zIndex
+
+

default: 1

+

Specifies the offset to add to the calculated zIndex of the trigger element. Set to 0 to prevent zIndex manipulation

+
+ +
(string) className
+
+

Specifies additional classNames to add to the menu element

+
+ +
(object) animation
+
+

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"}, … +

+ +
(object) events
+
+

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); }}

+
+
+ +

options.items

+

The items map contains the commands to list in the menu. Each command has a unique key:

+ 
items: {
+  command1: commandOptions,
+  command2: commandOptions
+}
+ +
+
(string) name
+
+

Specified the human readable name of the command in the menu

+

This is a mandatory property

+
+ +
(function) callback
+
+

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)

+
+ +
(string) className
+
+

Specifies additional classNames to add to the item element

+
+ +
(string) icon
+
+

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.

+
+ +
(function|boolean) disabled
+
+

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

+
+ +
(string) type
+
+

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>.

+
+ +
(string) value
+
+

The value of the <input> element.

+

Only used with types "text" and "radio".

+
+ +
(string|boolean) selected
+
+

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"

+
+ +
(string) radio
+
+

Specifies the group of the radio elements.

+

Only used with type "radio".

+
+ +
(object) options
+
+

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"}}

+
+ +
(jQuery) $node
+
+

Reference to the <li> command element

+

Registered by contextMenu after first show

+
+ +
(jQuery) $input
+
+

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

+
+ +
(jQuery) $label
+
+

Reference to the <label> of the command element

+

Only available with type "text", "checkbox", "radio" and "select".

+

Registered by contextMenu after first show

+
+
+ + +

opt (options at runtime)

+

opt is a reference to the options object passed at contextMenu registration

+
+
(jQuery) $trigger
+
+

The element triggering the menu

+
+
(jQuery) $menu
+
+

The menu element

+
+
(boolean) hasTypes
+
+

flag denoting if the menu contains input elements

+
+
(string) ns
+
+

The namespace (including leading dot) all events for this contextMenu instance were registered under

+
+
+ + +

Unregister contextMenu

+

To unregister / destroy a specific contextMenu:

+ 
$.contextMenu( 'destroy', selector );
+

selector expects the (string) selector that the contextMenu was registered to

+ +

Unregister all contextMenus

+

To unregister / destroy all contextMenus:

+ 
$.contextMenu( 'destroy' );
+ +

Helper: Import values for <input>

+

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()); }}}
+ +

Helper: Export values from <input>

+

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 @@ - jQuery contextMenu Plugin Demo + jQuery contextMenu Plugin @@ -14,11 +14,12 @@ -

jQuery contextMenu Plugin Demo

+

jQuery contextMenu Plugin

diff --git a/jquery.contextMenu.js b/jquery.contextMenu.js index a6bfa526..bc55f3b5 100755 --- a/jquery.contextMenu.js +++ b/jquery.contextMenu.js @@ -322,6 +322,7 @@ var // currently active contextMenu trigger // show event if (opt.events.show.call($this, opt) === false) { + $currentTrigger = null; return; } @@ -398,7 +399,8 @@ var // currently active contextMenu trigger // create contextMenu items $.each(opt.items, function(key, item){ var $t = item.$node = $('
  • '), - $label, $input; + $label = null, + $input = null; // add label for input if (item.type) {