Skip to content

Commit

Permalink
demos
Browse files Browse the repository at this point in the history
  • Loading branch information
@rodneyrehm
rodneyrehm committed Nov 7, 2011
1 parent f0326ef commit 65936cc
Show file tree
Hide file tree
Showing 24 changed files with 924 additions and 292 deletions.
43 changes: 23 additions & 20 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,24 +10,10 @@ If you like this implementation, go ahead an rate [jQuery contextMenu](http://pl

## Dependencies ##

* jQuery 1.6 (not tested with older versions)
* jQuery 1.7 (using new .on().off() event API)
* jQuery UI position (optional but recommended)

## HTML5 Compatibility ##

The [Firefox nightlies](http://nightly.mozilla.org/) implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. $.contextMenu accepts both.

Firefox 9.0a1 does not yet fully implement the contextmenu specification. The elements
[a](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command),
[button](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command),
[input](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-input-element-to-define-a-command) and
[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command)
usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands. See [Screenshot](/screenshots/native.firefox-9.0a1.png).

* [contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
* [command specs](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html)

Note: While the specs note <option>s to be renderd as regular commands, $.contextMenu will render an actual <select>.
## Usage ##

register contextMenu from javascript:

Expand All @@ -44,7 +30,24 @@ $.contextMenu({
});
```

import contextMenu from HTML5 <menu>:
have a look at the [demos](http://medialize.github.com/jQuery-contextMenu/demo.html).


## HTML5 Compatibility ##

The [Firefox nightlies](http://nightly.mozilla.org/) implement contextmenu using the 'menuitem' tags for menu-structure. The specs however state that 'command' tags should be used for this purpose. $.contextMenu accepts both.

Firefox 9.0a1 does not yet fully implement the contextmenu specification. The elements
[a](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-a-element-to-define-a-command),
[button](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-button-element-to-define-a-command),
[input](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-input-element-to-define-a-command) and
[option](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html#using-the-option-element-to-define-a-command)
usable as commands are being ignored altogether. It also doesn't (optically) distinguish between checkbox/radio and regular commands. See [Screenshot](/screenshots/native.firefox-9.0a1.png).

* [contextmenu specs](http://www.w3.org/TR/html5/interactive-elements.html#context-menus)
* [command specs](http://www.whatwg.org/specs/web-apps/current-work/multipage/commands.html)

Note: While the specs note <option>s to be renderd as regular commands, $.contextMenu will render an actual <select>. import contextMenu from HTML5 <menu>:

```javascript
$.contextMenu("html5");
Expand All @@ -70,15 +73,15 @@ Besides the obvious, browser also react to alphanumeric key strokes. Hitting <co

use [Google Closure Compiler](http://closure-compiler.appspot.com/home):

<pre><code>
```
// ==ClosureCompiler==
// @compilation_level SIMPLE_OPTIMIZATIONS
// @output_file_name contextMenu.js
// @code_url http://medialize.github.com/jQuery-contextMenu/jquery-1.7.min.js
// @code_url http://medialize.github.com/jQuery-contextMenu/jquery.ui.position.js
// @code_url http://medialize.github.com/jQuery-contextMenu/jquery.contextMenu.js
// ==/ClosureCompiler==
</code></pre>
```


## Authors ##
Expand All @@ -97,10 +100,10 @@ $.contextMenu is published under the [MIT license](http://www.opensource.org/lic

### 1.4 ###

* Upgraded to jQuery 1.7 (changed dependecy!)
* Added internal events `contextmenu:focus`, `contextmenu:blur` and `contextmenu:hide`
* Added custom &lt;command&gt; types
* Bug where `className` wasn't properly set on &lt;menu&gt;
* Moved demos to jsFiddle

### 1.3 ###

Expand Down
200 changes: 11 additions & 189 deletions demo.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,10 +39,10 @@ <h1><a href="http://github.com/medialize/jQuery-contextMenu">jQuery contextMenu<
<li><a href="index.html">About</a></li>
<li class="active"><a href="demo.html">Demo</a></li>
<li><a href="docs.html">Documentation</a></li>
<li><a href="http://rodneyrehm.de/en/">Author</a></li>
</ul>

<h2 id="demo">Demo: Simple Context Menu</h2>
<p><code>jQuery.contextMenu</code> allows you to create submenus. Check out the Keyboard interaction…</p>
<div class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
Expand Down Expand Up @@ -74,213 +74,35 @@ <h3 id="code">Example code: Simple Context Menu</h3>
<h3 id="html">Example HTML: Simple Context Menu</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>



<h2>jQuery Context Menu Demo Gallery</h2>
<ul>
<li><a href="demo/simple.html">Simple Context Menu</a></li>
<ul id="demo-list">
<li class="current"><a href="demo.html">Simple Context Menu</a></li>
<li><a href="demo/dynamic.html">Adding new Context Menu Triggers</a></li>

<li><a href="demo/keeping-contextmenu-open.html">Keeping the context menu open</a></li>

<li><a href="demo/callback.html">Command's action (callbacks)</a></li>

<li><a href="demo/trigger-left-click.html">Left-Click Trigger</a></li>
<li><a href="demo/trigger-hover.html">Hover Activated Context Menu</a></li>
<li><a href="demo/trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
<li><a href="demo/trigger-custom.html">Custom Activated Context Menu</a></li>

<li><a href="demo/disabled-menu.html">Disabled Menu</a></li>
<li><a href="demo/disabled.html">Disabled Command</a></li>
<li><a href="demo/disabled-callback.html">Disabled Callback Command</a></li>
<li><a href="demo/disabled-changing.html">Changing Command's disabled status</a></li>


<li><a href="demo/accesskeys.html">Accesskeys</a></li>
<li><a href="demo/sub-menus.html">Submenus</a></li>
<li><a href="demo/ipnut-stuff.html">Input Stuff</a></li>

<li><a href="demo/input.html">Input Commands</a></li>
<li><a href="demo/custom-command.html">Custom Command Types</a></li>

<li><a href="demo/html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
<li><a href="demo/html5-polyfill.html">HTML5 Polyfill</a></li>
<li><a href="demo/html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
</ul>

<!--
TODO: demos
<input> stuff
autohide
accesskey
global callback vs local callback
show/hide events
events for input?!
--
<h2 id="commands">Demo: Context Menu triggered by right click</h2>
<script type="text/javascript">
$(function(){
/**************************************************
* Menu 2
**************************************************/
function alert_click(key, opt) {
alert('Clicked "' + key + '"');
}
function alert_click_false(key, opt) {
alert('Clicked "' + key + '" (keeping menu visible)');
return false;
}
function toggle_alpha(key, opt) {
opt.items.alpha.disabled = !opt.items.alpha.disabled;
return false;
}
function toggle_golf(key, opt) {
this.data('golfDisabled', this.data('golfDisabled') ? false : true);
return false;
}
$.contextMenu({
selector: '.context-menu-two',
items: {
alpha: {name: "Alpha", callback: alert_click},
bravo: {name: "Bravo", callback: alert_click, icon: "edit"},
charlie: {name: "Charlie", callback: alert_click_false},
sep1: "---------",
delta: {name: "Delta", callback: alert_click, disabled: true},
echo: {name: "Echo", callback: alert_click, disabled: function(key, opt){ return true; }},
sep2: "---------",
foxtrot2: {name: "Toggle Golf", callback: toggle_golf},
foxtrot: {name: "Toggle Alpha", callback: toggle_alpha},
sep3: "---------",
golf: {name: "Golf", callback: alert_click, disabled: function(key, opt){ return !!this.data('golfDisabled'); }},
sep4: "---------",
html: {type: "html", html: '<span style="max-width: 80px; display:inline-block;">might be able do do some funky stuff here</span>'}
},
events: {
show:function(opt){
window.console && console.log('Show Event');
},
hide: function(opt){
window.console && console.log('Hide Event');
}
}
});
});
</script>
<div id="menus" class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>menu1</strong>
</div>
<div class="context-menu-one-default box menu-1">
<strong>menu1</strong>
<em>(default callback)</em>
</div>
<div class="context-menu-two box menu-2">
<strong>menu2</strong>
</div>
<div class="context-menu-two box menu-2" data-golf-disabled="true">
<strong>menu2</strong>
<em>(golf disabled)</em>
</div>
<div class="context-menu-two context-menu-disabled box menu-2" id="menu2disabled">
<strong>menu2</strong>
<em>(disabled)</em>
</div>
</div>
<h2 id="inputs">Demo: Input Context Menu triggered by right click</h2>
<script type="text/javascript">
$(function(){
/**************************************************
* Menu Input
**************************************************/
$.contextMenu({
selector: '.context-menu-three',
items: {
name: {name: "Text", type:'text', value:"Hello World", events: {
keyup: function(e){ window.console && console.log('keypress: '+ e.keyCode); }
}},
sep1: "---------",
yesno: {name: "Boolean", type:'checkbox', selected:true},
sep2: "---------",
radio1: {name: "Radio1", type:'radio', radio:'radio', value:'1'},
radio2: {name: "Radio2", type:'radio', radio:'radio', value:'2', selected:true},
radio3: {name: "Radio3", type:'radio', radio:'radio', value:'3'},
radio4: {name: "Radio3", type:'radio', radio:'radio', value:'4', disabled:true},
sep3: "---------",
select: {name: "Select", type:'select', options: {1: 'one', 2: 'two', 3: 'three'}, selected: 2},
area1: {name: "Textarea with height", type:'textarea', value:"Hello World", height: 40},
area2: {name: "Textarea", type:'textarea', value:"Hello World"},
sep4: "---------",
key: {name: "Something Clickable", callback: $.noop}
},
events: {
show: function(opt) {
var $this = this;
// import states from data store
$.contextMenu.setInputValues(opt, $this.data());
},
hide: function(opt) {
var $this = this;
// export states to data store
$.contextMenu.getInputValues(opt, $this.data());
}
}
});
/**************************************************
* Menu Input Sub-Menus
**************************************************/
$.contextMenu({
selector: '.context-menu-input3',
items: {
name: {name: "Text", type:'text', value:"Hello World"},
sep1: "---------",
yesno: {name: "Boolean", type:'checkbox', selected:true},
sep2: "---------",
radio1: {name: "Radio1", type:'radio', radio:'radio', value:'1'},
radio2: {name: "Radio2", type:'radio', radio:'radio', value:'2', selected:true},
radio3: {name: "Radio3", type:'radio', radio:'radio', value:'3'},
radio4: {name: "Radio3", type:'radio', radio:'radio', value:'4', disabled:true},
sep3: "---------",
select: {name: "Select", type:'select', options: {1: 'one', 2: 'two', 3: 'three'}, selected: 2},
area1: {name: "Textarea with height", type:'textarea', value:"Hello World", height: 40},
area2: {name: "Textarea", type:'textarea', value:"Hello World"},
sep4: "---------",
fold1: {
name: "nested inputs",
items: {
name2: {name: "Text", type:'text', value:"nested 1"},
name3: {name: "Text", type:'text', value:"nested 2"}
}
},
sep5: "---------",
key: {name: "Something Clickable", callback: $.noop}
},
events: {
show: function(opt) {
var $this = this;
// import states from data store
$.contextMenu.setInputValues(opt, $this.data());
},
hide: function(opt) {
var $this = this;
// export states to data store
$.contextMenu.getInputValues(opt, $this.data());
}
}
});
});
</script>
<div id="input-menus" class="inline-spaces">
<div class="context-menu-three box menu-1">
<strong>input1</strong>
</div>
<div class="context-menu-three box menu-1" data-name="Hello World" data-yesno="true" data-radio="2" data-select="2">
<strong>input1</strong>
</div>
<div class="context-menu-input3 box menu-1" data-name="Hello World" data-name2="yeah!" data-yesno="true" data-radio="2" data-select="2">
<strong>input2</strong>
</div>
</div>
-->
</div>
</body>
</html>
Loading

0 comments on commit 65936cc

Please sign in to comment.