Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

demos

  • Loading branch information...
commit 65936cc8eefe37b2c74d084b263630c2a175abc7 1 parent f0326ef
@rodneyrehm rodneyrehm authored
View
43 README.md
@@ -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,7 +73,7 @@ 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
@@ -78,7 +81,7 @@ use [Google Closure Compiler](http://closure-compiler.appspot.com/home):
// @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 @@
<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>
View
109 demo/accesskeys.html
@@ -0,0 +1,109 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>jQuery contextMenu Plugin Demo</title>
+ <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
+
+ <script src="../jquery-1.7.min.js" type="text/javascript"></script>
+ <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
+ <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
+ <script src="../prettify/prettify.js" type="text/javascript"></script>
+ <script src="../screen.js" type="text/javascript"></script>
+
+ <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+ <link href="../screen.css" rel="stylesheet" type="text/css" />
+ <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-8922143-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+<body>
+ <a id="github-forkme" href="http://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="container">
+ <h1><a href="http://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
+
+ <ul class="menu">
+ <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: Accesskeys</h2>
+ <div class="inline-spaces">
+<div class="context-menu-one box menu-1">
+ <strong>right click me</strong>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Accesskeys</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ callback: function(key, options) {
+ var m = "clicked: " + key;
+ window.console && console.log(m) || alert(m);
+ },
+ items: {
+ "edit": {name: "Edit", icon: "edit", accesskey: "e"},
+ "cut": {name: "Cut", icon: "cut", accesskey: "c"},
+ // first unused character is taken (here: o)
+ "copy": {name: "Copy", icon: "copy", accesskey: "c o p y"},
+ // words are truncated to their first letter (here: p)
+ "paste": {name: "Paste", icon: "paste", accesskey: "cool paste"},
+ "delete": {name: "Delete", icon: "delete"},
+ "sep1": "---------",
+ "quit": {name: "Quit", icon: "quit"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Accesskeys</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li class="current"><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
+ </div>
+</body>
+</html>
View
49 demo/simple.html → demo/callback.html
@@ -39,27 +39,35 @@
<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>
+ <h2 id="demo">Demo: Command's action (callbacks)</h2>
<div class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
</div>
</div>
- <h3 id="code">Example code: Simple Context Menu</h3>
+ <h3 id="code">Example code: Command's action (callbacks)</h3>
<script type="text/javascript" class="showcase">
$(function(){
$.contextMenu({
selector: '.context-menu-one',
callback: function(key, options) {
- var m = "clicked: " + key;
+ var m = "global: " + key;
window.console && console.log(m) || alert(m);
},
items: {
- "edit": {name: "Edit", icon: "edit"},
+ "edit": {
+ name: "Edit",
+ icon: "edit",
+ // superseeds "global" callback
+ callback: function(key, options) {
+ var m = "edit was clicked";
+ window.console && console.log(m) || alert(m);
+ }
+ },
"cut": {name: "Cut", icon: "cut"},
"copy": {name: "Copy", icon: "copy"},
"paste": {name: "Paste", icon: "paste"},
@@ -71,9 +79,38 @@ <h3 id="code">Example code: Simple Context Menu</h3>
});
</script>
- <h3 id="html">Example HTML: Simple Context Menu</h3>
+ <h3 id="html">Example HTML: Command's action (callbacks)</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li class="current"><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
29 demo/custom-command.html
@@ -39,6 +39,7 @@
<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: Custom Command Types</h2>
@@ -127,6 +128,34 @@ <h3 id="css">Example CSS: Custom Command Types</h3>
<h3 id="html">Example HTML: Custom Command Types</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li class="current"><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
30 demo/disabled-callback.html
@@ -39,10 +39,10 @@
<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: Disabled Callback</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>
@@ -77,6 +77,34 @@ <h3 id="code">Example code: Disabled Callback</h3>
<h3 id="html">Example HTML: Disabled Callback</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li class="current"><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
30 demo/disabled-changing.html
@@ -39,10 +39,10 @@
<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: Changing Disabled</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>
@@ -84,6 +84,34 @@ <h3 id="code">Example code: Changing Disabled</h3>
<h3 id="html">Example HTML: Changing Disabled</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li class="current"><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
122 demo/disabled-menu.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>jQuery contextMenu Plugin Demo</title>
+ <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
+
+ <script src="../jquery-1.7.min.js" type="text/javascript"></script>
+ <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
+ <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
+ <script src="../prettify/prettify.js" type="text/javascript"></script>
+ <script src="../screen.js" type="text/javascript"></script>
+
+ <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+ <link href="../screen.css" rel="stylesheet" type="text/css" />
+ <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-8922143-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+<body>
+ <a id="github-forkme" href="http://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="container">
+ <h1><a href="http://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
+
+ <ul class="menu">
+ <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: Disabled Context Menu</h2>
+ <div class="inline-spaces">
+<div class="context-menu-one box menu-1 context-menu-disabled">
+ <strong>right click me</strong>
+</div>
+<button type="button" id="toggle-disabled">Enable Menu</button>
+ </div>
+
+ <h3 id="code">Example code: Disabled Context Menu</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ callback: function(key, options) {
+ var m = "clicked: " + key;
+ window.console && console.log(m) || alert(m);
+ },
+ items: {
+ "edit": {name: "Edit", icon: "edit"},
+ "cut": {name: "Cut", icon: "cut"},
+ "copy": {name: "Copy", icon: "copy"},
+ "paste": {name: "Paste", icon: "paste"},
+ "delete": {name: "Delete", icon: "delete"},
+ "sep1": "---------",
+ "quit": {name: "Quit", icon: "quit"}
+ }
+ });
+
+ $('#toggle-disabled').on('click', function(e) {
+ e.preventDefault();
+ var $this = $(this),
+ $trigger = $('.context-menu-one');
+ if ($trigger.hasClass('context-menu-disabled')) {
+ $this.text("Disable Menu");
+ $trigger.contextMenu(true);
+ } else {
+ $this.text("Enable Menu");
+ $trigger.contextMenu(false);
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Disabled Context Menu</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1, #toggle-disabled"></div>
+
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li class="current"><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
+ </div>
+</body>
+</html>
View
30 demo/disabled.html
@@ -39,10 +39,10 @@
<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: Disabled</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>
@@ -69,6 +69,34 @@ <h3 id="code">Example code: Disabled</h3>
<h3 id="html">Example HTML: Disabled</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li class="current"><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/dynamic.html
@@ -39,10 +39,11 @@
<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: Adding new Context Menu Triggers</h2>
- <p><code>jQuery.contextMenu</code> allows you to create submenus. Check out the Keyboard interaction…</p>
+ <p><code>jQuery.contextMenu</code> allows you to define a &lt;menu&gt; before the trigger elements are available</p>
<div class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
@@ -84,6 +85,34 @@ <h3 id="code">Example code: Adding new Context Menu Triggers</h3>
<h3 id="html">Example HTML: Adding new Context Menu Triggers</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1, .menu-1 + button"></div>
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li class="current"><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
64 demo/empty.html
@@ -1,64 +0,0 @@
-<!DOCTYPE html>
-<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
-<head>
- <meta charset="utf-8" />
- <meta http-equiv="content-type" content="text/html; charset=utf-8" />
- <title>jQuery contextMenu Plugin Demo</title>
- <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
-
- <script src="../jquery-1.7.min.js" type="text/javascript"></script>
- <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
- <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
- <script src="../prettify/prettify.js" type="text/javascript"></script>
- <script src="../screen.js" type="text/javascript"></script>
-
- <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
- <link href="../screen.css" rel="stylesheet" type="text/css" />
- <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
-
- <script type="text/javascript">
-
- var _gaq = _gaq || [];
- _gaq.push(['_setAccount', 'UA-8922143-3']);
- _gaq.push(['_trackPageview']);
-
- (function() {
- var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
- ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
- var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
- })();
-
- </script>
-</head>
-<body>
- <a id="github-forkme" href="http://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
- <div id="container">
- <h1><a href="http://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
-
- <ul class="menu">
- <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>
- </ul>
-
- <h2 id="demo">Demo: Submenus</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-sub box menu-1">
- <strong>right click me</strong>
-</div>
- </div>
-
- <h3 id="code">Example code: Submenus</h3>
- <script type="text/javascript" class="showcase">
-$(function(){
-
-});
- </script>
-
- <h3 id="html">Example HTML: Submenus</h3>
- <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
-
- </div>
-</body>
-</html>
View
30 demo/html5-import.html
@@ -39,6 +39,7 @@
<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: Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</h2>
@@ -70,6 +71,35 @@ <h3 id="html">Example HTML: Importing HTML5 &lt;menu type=&quot;context&quot;&gt
<command label="facebook" onclick="alert('facebook')">
</menu>
</menu>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li class="current"><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/html5-polyfill-firefox8.html
@@ -39,10 +39,10 @@
<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: HTML5 Polyfill (Firefox 8)</h2>
- <p><code>jQuery.contextMenu</code> allows you to automatically map HTML5's &lt;menu&gt; structures to trigger elements. Firefox 8 prefers &lt;menuitem&gt; over the standard &lt;command&gt;, though.</p>
<div class="inline-spaces">
<div class="box menu-1" contextmenu="html5firefox8">
<strong>right click me</strong>
@@ -72,6 +72,35 @@ <h3 id="html">Example HTML: HTML5 Polyfill (Firefox 8)</h3>
<menuitem type="radio" label="(radio) no" radiogroup="alpha" onclick="alert('facebook')"></menuitem>
</menu>
</menu>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li class="current"><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/html5-polyfill.html
@@ -39,10 +39,10 @@
<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: HTML5 Polyfill</h2>
- <p><code>jQuery.contextMenu</code> allows you to automatically map HTML5's &lt;menu&gt; structures to trigger elements.</p>
<div class="inline-spaces">
<div class="box menu-2" contextmenu="html5polyfill">
<strong>right click me</strong>
@@ -69,6 +69,35 @@ <h3 id="html">Example HTML: HTML5 Polyfill</h3>
<label>foo bar<input type="text" name="foo"></label>
</menu>
</menu>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li class="current"><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
187 demo/input.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html>
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
+<head>
+ <meta charset="utf-8" />
+ <meta http-equiv="content-type" content="text/html; charset=utf-8" />
+ <title>jQuery contextMenu Plugin Demo</title>
+ <meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
+
+ <script src="../jquery-1.7.min.js" type="text/javascript"></script>
+ <script src="../src/jquery.ui.position.js" type="text/javascript"></script>
+ <script src="../src/jquery.contextMenu.js" type="text/javascript"></script>
+ <script src="../prettify/prettify.js" type="text/javascript"></script>
+ <script src="../screen.js" type="text/javascript"></script>
+
+ <link href="../src/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
+ <link href="../screen.css" rel="stylesheet" type="text/css" />
+ <link href="../prettify/prettify.sunburst.css" rel="stylesheet" type="text/css" />
+
+ <script type="text/javascript">
+
+ var _gaq = _gaq || [];
+ _gaq.push(['_setAccount', 'UA-8922143-3']);
+ _gaq.push(['_trackPageview']);
+
+ (function() {
+ var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
+ ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
+ var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
+ })();
+
+ </script>
+</head>
+<body>
+ <a id="github-forkme" href="http://github.com/medialize/jQuery-contextMenu"><img src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+ <div id="container">
+ <h1><a href="http://github.com/medialize/jQuery-contextMenu">jQuery contextMenu</a></h1>
+
+ <ul class="menu">
+ <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: Input Commands</h2>
+ <div class="inline-spaces">
+<div class="context-menu-one box menu-1">
+ <strong>right click me</strong>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Input Commands</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ items: {
+ // <input type="text">
+ name: {
+ name: "Text",
+ type: 'text',
+ value: "Hello World",
+ events: {
+ keyup: function(e) {
+ // add some fancy key handling here?
+ window.console && console.log('key: '+ e.keyCode);
+ }
+ }
+ },
+ sep1: "---------",
+ // <input type="checkbox">
+ yesno: {
+ name: "Boolean",
+ type: 'checkbox',
+ selected: true
+ },
+ sep2: "---------",
+ // <input type="radio">
+ 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>
+ select: {
+ name: "Select",
+ type: 'select',
+ options: {1: 'one', 2: 'two', 3: 'three'},
+ selected: 2
+ },
+ // <textarea>
+ 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) {
+ // this is the trigger element
+ var $this = this;
+ // import states from data store
+ $.contextMenu.setInputValues(opt, $this.data());
+ // this basically fills the input commands from an object
+ // like {name: "foo", yesno: true, radio: "3", …}
+ },
+ hide: function(opt) {
+ // this is the trigger element
+ var $this = this;
+ // export states to data store
+ $.contextMenu.getInputValues(opt, $this.data());
+ // this basically dumps the input commands' values to an object
+ // like {name: "foo", yesno: true, radio: "3", …}
+ }
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Input Commands</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li class="current"><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
+ </div>
+</body>
+</html>
View
31 demo/keeping-contextmenu-open.html
@@ -39,10 +39,10 @@
<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: Keeping the Menu visible</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>
@@ -77,6 +77,35 @@ <h3 id="code">Example code: Keeping the Menu visible</h3>
<h3 id="html">Example HTML: Keeping the Menu visible</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li class="current"><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/sub-menus.html
@@ -39,10 +39,10 @@
<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: Submenus</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-sub box menu-1">
<strong>right click me</strong>
@@ -98,6 +98,35 @@ <h3 id="code">Example code: Submenus</h3>
<h3 id="html">Example HTML: Submenus</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li class="current"><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/trigger-custom.html
@@ -39,10 +39,10 @@
<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: Custom Activated 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>press that button</strong>
@@ -83,6 +83,35 @@ <h3 id="code">Example code: Custom Activated Context Menu</h3>
<h3 id="html">Example HTML: Custom Activated Context Menu</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1, .menu-1 + button"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li class="current"><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/trigger-hover-autohide.html
@@ -39,10 +39,10 @@
<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: Hover Activated Context Menu With Autohide</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>hover over me</strong>
@@ -77,6 +77,35 @@ <h3 id="code">Example code: Hover Activated Context Menu With Autohide</h3>
<h3 id="html">Example HTML: Hover Activated Context Menu With Autohide</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li class="current"><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/trigger-hover.html
@@ -39,10 +39,10 @@
<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: Hover Activated 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>hover over me</strong>
@@ -76,6 +76,35 @@ <h3 id="code">Example code: Hover Activated Context Menu</h3>
<h3 id="html">Example HTML: Hover Activated Context Menu</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li class="current"><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
31 demo/trigger-left-click.html
@@ -39,10 +39,10 @@
<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: Left-Click Trigger</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>left click me</strong>
@@ -77,6 +77,35 @@ <h3 id="code">Example code: Left-Click Trigger</h3>
<h3 id="html">Example HTML: Left-Click Trigger</h3>
<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul id="demo-list">
+ <li><a href="../demo.html">Simple Context Menu</a></li>
+ <li><a href="dynamic.html">Adding new Context Menu Triggers</a></li>
+
+ <li><a href="keeping-contextmenu-open.html">Keeping the context menu open</a></li>
+ <li><a href="callback.html">Command's action (callbacks)</a></li>
+
+ <li class="current"><a href="trigger-left-click.html">Left-Click Trigger</a></li>
+ <li><a href="trigger-hover.html">Hover Activated Context Menu</a></li>
+ <li><a href="trigger-hover-autohide.html">Hover Activated Context Menu With Autohide</a></li>
+ <li><a href="trigger-custom.html">Custom Activated Context Menu</a></li>
+
+ <li><a href="disabled-menu.html">Disabled Menu</a></li>
+ <li><a href="disabled.html">Disabled Command</a></li>
+ <li><a href="disabled-callback.html">Disabled Callback Command</a></li>
+ <li><a href="disabled-changing.html">Changing Command's disabled status</a></li>
+
+ <li><a href="accesskeys.html">Accesskeys</a></li>
+ <li><a href="sub-menus.html">Submenus</a></li>
+
+ <li><a href="input.html">Input Commands</a></li>
+ <li><a href="custom-command.html">Custom Command Types</a></li>
+
+ <li><a href="html5-import.html">Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</a></li>
+ <li><a href="html5-polyfill.html">HTML5 Polyfill</a></li>
+ <li><a href="html5-polyfill-firefox8.html">HTML5 Polyfill (Firefox 8)</a></li>
+ </ul>
</div>
</body>
</html>
View
1  docs.html
@@ -34,6 +34,7 @@
<li><a href="index.html">About</a></li>
<li><a href="demo.html">Demo</a></li>
<li class="active"><a href="docs.html">Documentation</a></li>
+ <li><a href="http://rodneyrehm.de/en/">Author</a></li>
</ul>
<ul class="toc">
View
1  index.html
@@ -30,6 +30,7 @@
<li class="active"><a href="index.html">About</a></li>
<li><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>
<p>
View
12 screen.css
@@ -118,6 +118,16 @@ ul.plain-list > li {
background-color: #111;
}
+#demo-list > li.current {
+ font-style: italic;
+}
+#demo-list > li.current:after {
+ content: "« currently viewing";
+ color: #AAA;
+ display: inline-block;
+ margin-left: 20px;
+}
+
/* hide whitespace between inline-block elements */
.inline-spaces { font-size: 0; }
.inline-spaces > * { font-size: 11px; }
@@ -139,5 +149,5 @@ ul.plain-list > li {
display:block;
}
.menu-injected { background-color: #C87958; }
-.menu-2.context-menu-disabled { background-color: red; }
+.box.context-menu-disabled { background-color: red; }
Please sign in to comment.
Something went wrong with that request. Please try again.