Permalink
Browse files

demos

  • Loading branch information...
rodneyrehm committed Nov 7, 2011
1 parent f0326ef commit 65936cc8eefe37b2c74d084b263630c2a175abc7
View
@@ -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:
@@ -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");
@@ -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 ##
@@ -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 ###
View
200 demo.html
@@ -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>
@@ -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>
Oops, something went wrong.

0 comments on commit 65936cc

Please sign in to comment.