Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

some more demos

  • Loading branch information...
commit 9864deb3322e4bcec2c714273442d4c99c11dee9 1 parent 17cd066
@rodneyrehm rodneyrehm authored
View
391 demo.html
@@ -9,7 +9,7 @@
<script src="jquery-1.6.4.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="src/screen.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" />
<script type="text/javascript">
@@ -37,38 +37,42 @@
<li><a href="docs.html">Documentation</a></li>
</ul>
+
+ <h2>jQuery Context Menu Demo Gallery</h2>
+ <ul>
+ <li><a href="demo/simple.html">Simple Context Menu</a></li>
+ <li><a href="demo/dynamic.html">Adding new Context Menu Triggers</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/sub-menus.html">Submenus</a></li>
+
+ <li><a href="demo/ipnut-stuff.html">Input Stuff</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
+ disabled / disabled()
+ <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 1
- **************************************************/
- $.contextMenu({selector: '.context-menu-one', items: {
- edit: {name: "Edit", icon: "edit", callback: $.noop, accesskey:"e d i t"},
- cut: {name: "Cut", icon: "cut", callback: $.noop, accesskey:"c u t"},
- copy: {name: "Copy", icon: "copy", callback: $.noop, accesskey:"c o p y"},
- paste: {name: "Paste", icon: "paste", callback: $.noop, accesskey:"p a s t e"},
- "delete": {name: "Delete", icon: "delete", callback: $.noop, accesskey:"d e l t"},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", callback: $.noop, accesskey:"q u i t"}
- }});
-
- /**************************************************
- * Menu 1 (default callback)
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-one-default',
- callback: function(key, opt){ alert("Key '" + key + "' clicked"); },
- items: {
- edit: {name: "Edit", icon: "edit", accesskey:"e d i t"},
- cut: {name: "Cut", icon: "cut", accesskey:"c u t"},
- copy: {name: "Copy", icon: "copy", accesskey:"c o p y"},
- paste: {name: "Paste", icon: "paste", accesskey:"p a s t e"},
- "delete": {name: "Delete", icon: "delete", accesskey:"d e l t"},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", accesskey:"q u i t"}
- }
- });
+
/**************************************************
* Menu 2
@@ -114,17 +118,7 @@ <h2 id="commands">Demo: Context Menu triggered by right click</h2>
}
}
});
-
-
- /**************************************************
- * Helper: inject trigger
- **************************************************/
- $(function(){
- $('<button>add menu1</button>').bind('click', function(){
- $('<div class="context-menu-one box menu-injected"><strong>menu1</strong> <em>(injected)</em></div>')
- .appendTo($('#menus'));
- }).insertBefore($('#menus'));
- });
+
});
</script>
<div id="menus" class="inline-spaces">
@@ -243,321 +237,6 @@ <h2 id="inputs">Demo: Input Context Menu triggered by right click</h2>
<strong>input2</strong>
</div>
</div>
-
- <h2 id="hover-trigger">Demo: Context Menu triggered by hover</h2>
- <script type="text/javascript">
- $(function(){
- /**************************************************
- * Menu Hover
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-four',
- trigger: 'hover',
- autoHide: true,
- items: {
- edit: {name: "Edit", icon: "edit", callback: $.noop},
- cut: {name: "Cut", icon: "cut", callback: $.noop},
- copy: {name: "Copy", icon: "copy", callback: $.noop},
- paste: {name: "Paste", icon: "paste", callback: $.noop},
- "delete": {name: "Delete", icon: "delete", callback: $.noop},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", callback: $.noop},
- }
- });
-
-
- /**************************************************
- * Input Menu Hover
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-five',
- trigger: 'hover',
- delay: 500,
- 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'},
- sep3: "---------",
- select: {name: "Select", type:'select', options: {1: 'one', 2: 'two', 3: 'three'}, selected: 2}
- },
- 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="hover-menus" class="inline-spaces">
- <div class="context-menu-four box menu-1">
- <strong>hover1</strong>
- </div>
- <div class="context-menu-five box menu-2">
- <strong>hover input</strong>
- </div>
- </div>
-
- <h2 id="left-trigger">Demo: Context Menu triggered by left-click</h2>
- <script type="text/javascript">
- $(function(){
- /**************************************************
- * Menu Hover
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-six',
- trigger: 'left',
- ignoreRightClick: true,
- items: {
- edit: {name: "Edit", icon: "edit", callback: $.noop},
- cut: {name: "Cut", icon: "cut", callback: $.noop},
- copy: {name: "Copy", icon: "copy", callback: $.noop},
- paste: {name: "Paste", icon: "paste", callback: $.noop},
- "delete": {name: "Delete", icon: "delete", callback: $.noop},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", callback: $.noop},
- }
- });
-
-
- /**************************************************
- * Input Menu Hover
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-seven',
- trigger: 'left',
- delay: 500,
- 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'},
- sep3: "---------",
- select: {name: "Select", type:'select', options: {1: 'one', 2: 'two', 3: 'three'}, selected: 2}
- },
- 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="hover-menus" class="inline-spaces">
- <div class="context-menu-six box menu-1">
- <strong>left1</strong>
- </div>
- <div class="context-menu-seven box menu-2">
- <strong>left input</strong>
- </div>
- </div>
-
- <h2 id="commands">Demo: Context Menu with sub-menus</h2>
- <script type="text/javascript">
- $(function(){
-
- function printKey(key, opt) {
- window.console && console.log("clicked: " + key);
- }
-
- /**************************************************
- * Context-Menu with Sub-Menu
- **************************************************/
- $.contextMenu({selector: '.context-menu-sub',
- autoHide: true,
- items: {
- edit: {name: "Edit", icon: "edit", callback: printKey},
- cut: {name: "Cut", icon: "cut", callback: printKey},
- copy: {name: "Copy", icon: "copy", callback: printKey},
- paste: {name: "Paste", icon: "paste", callback: printKey},
- "delete": {name: "Delete", icon: "delete", callback: printKey},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", callback: printKey},
- sep2: "---------",
- fold1: {name: "Sub group", items: {
- "fold1-key1": {name: "Foo bar", callback: printKey},
- "fold1-key2": {name: "Foo baz", callback: printKey},
- "fold1-key3": {name: "Bar Baz", callback: printKey}
- }},
- sep3: "---------",
- fold2: {name: "Sub group 2", items: {
- "fold2-key1": {name: "Foo bar 2", callback: printKey},
- "fold2-key2": {name: "Foo baz 2", callback: printKey},
- "fold2-key3": {name: "Bar Baz 2", callback: printKey}
- }}
- }
- });
-
- /**************************************************
- * Context-Menu with Sub-Menu
- **************************************************/
- $.contextMenu({selector: '.context-menu-subsub', callback: function(opt, key){ console.log(key); },items: {
- edit: {name: "Edit", icon: "edit", callback: printKey},
- cut: {name: "Cut", icon: "cut", callback: printKey},
- copy: {name: "Copy", icon: "copy", callback: printKey, accesskey:"o"},
- paste: {name: "Paste", icon: "paste", callback: printKey},
- "delete": {name: "Delete", icon: "delete", callback: printKey},
- sep1: "---------",
- quit: {name: "Quit", icon: "quit", callback: printKey},
- sep2: "---------",
- fold1: {name: "Sub group", accesskey:"s", items: {
- "fold1-key1": {name: "Foo bar", callback: printKey},
- fold2: {name: "Sub group 2", items: {
- "fold2-key1": {name: "Foo bar 2", callback: printKey, accesskey:"o"},
- "fold2-key2": {name: "Foo baz 2", callback: printKey, accesskey:"z"},
- "fold2-key3": {name: "Bar Baz 2", callback: printKey, accesskey:"2"}
- }},
- "fold1-key3": {name: "Bar Baz", callback: printKey}
- }}
- }});
- });
- </script>
- <div class="inline-spaces">
- <div class="context-menu-sub box menu-1">
- <strong>menu1</strong>
- </div>
- <div class="context-menu-subsub box menu-2">
- <strong>menu1</strong>
- </div>
- </div>
-
- <h2 id="html5">Demo: HTML5 &lt;menu&gt;</h2>
- <script type="text/javascript">
- $(function(){
- /**************************************************
- * Context-Menu with Sub-Menu
- **************************************************/
- $.contextMenu({
- selector: '.context-menu-html5menu',
- items: $.contextMenu.fromMenu($('#html5menu'))
- });
-
- $.contextMenu('html5');
-
- });
- </script>
- <div class="inline-spaces">
- <div class="context-menu-html5menu box menu-1">
- <strong>from &lt;menu&gt;</strong>
- </div>
- <div class="box menu-2" contextmenu="html5polyfill">
- <strong>polyfill</strong>
- </div>
- <div class="box menu-1" contextmenu="html5firefox8">
- <strong>polyfill (firefox8)</strong>
- </div>
-
- <menu id="html5menu" type="context" style="display:none">
- <command label="rotate" onclick="alert('rotate')">
- <command label="resize" onclick="alert('resize')">
- <menu label="share">
- <command label="twitter" onclick="alert('twitter')">
- <hr>
- <command label="facebook" onclick="alert('facebook')">
- </menu>
- </menu>
-
- <menu id="html5polyfill" type="context" style="display:none">
- <command label="rotate" onclick="alert('rotate')" icon="images/cut.png">
- <command label="resize" onclick="alert('resize')" icon="images/door.png">
- <menu label="share">
- <command label="twitter" onclick="alert('twitter')" icon="images/page_white_copy.png">
- <hr>
- <command label="facebook" onclick="alert('facebook')" icon="images/page_white_edit.png">
- <hr>
- <label>foo bar<input type="text" name="foo"></label>
- </menu>
- </menu>
-
- <menu id="html5firefox8" type="context">
- <menuitem label="rotate" onclick="alert('rotate')" hint="I'm a hint" icon="images/cut.png"></menuitem>
- <menuitem label="resize" onclick="alert('resize')" icon="images/door.png"></menuitem>
- <menuitem label="disabled" onclick="alert('disabled')" disabled icon="images/door.png"></menuitem>
- <menu label="share">
- <menuitem label="twitter" onclick="alert('twitter')" icon="images/page_white_copy.png"></menuitem>
- <menuitem label="facebook" onclick="alert('facebook')" icon="images/page_white_edit.png"></menuitem>
- <hr>
- <menuitem type="checkbox" label="(checkbox) yes or no?" onclick="alert('facebook')"></menuitem>
- <hr>
- <menuitem type="radio" label="(radio) yes" radiogroup="alpha" checked onclick="alert('facebook')"></menuitem>
- <menuitem type="radio" label="(radio) no" radiogroup="alpha" onclick="alert('facebook')"></menuitem>
- <hr>
- <a href="#foo">&lt;a&gt; as command</a>
- <hr>
- <button onclick="alert('button clicked')">&lt;button&gt; as command</button>
- <hr>
- <label>foo bar<input type="text" name="foo"></label>
- </menu>
- <select name="foobar">
- <option value="one">one</option>
- <option value="two">two</option>
- </select>
- </menu>
- </div>
-
- <h2 id="custom-types">Demo: Custom Command Types</h2>
- <script type="text/javascript">
- $(function(){
-
- /**************************************************
- * Custom Command Handler
- **************************************************/
- $.contextMenu.types.label = function(item) {
- // this === item.$node
-
- $('<span>Label</span><ul>'
- + '<li class="label1" title="label 1">label 1</li>'
- + '<li class="label2" title="label 2">label 2</li>'
- + '<li class="label3" title="label 3">label 3</li>'
- + '<li class="label4" title="label 4">label 4</li></ul>')
- .appendTo(this);
-
- this.addClass('labels').bind('contextmenu:focus', function(e) {
- // setup
- }).bind('contextmenu:blur', function(e) {
- // tear down
- }).bind('keydown', function(e) {
- // some funky key handling
- });
- };
-
- /**************************************************
- * Context-Menu with Sub-Menu
- **************************************************/
- $.contextMenu({selector: '.context-menu-custom',
- items: {
- open: {name: "Open", callback: $.noop},
- label: {type: "label", customName: "Label"},
- edit: {name: "Edit", callback: $.noop}
- }
- });
- });
- </script>
- <div class="inline-spaces">
- <div class="context-menu-custom box menu-1">
- <strong>menu1</strong>
- </div>
- </div>
</div>
</body>
View
48 demo/custom-command.html
@@ -41,14 +41,15 @@
<li><a href="../docs.html">Documentation</a></li>
</ul>
- <h2 id="custom-types">Demo: Custom Command Types</h2>
+ <h2 id="demo">Demo: Custom Command Types</h2>
<p><code>jQuery.contextMenu</code> allows you to create your own &lt;comand&gt;s and leverage the simple UI handling.</p>
<div class="inline-spaces">
- <div class="context-menu-custom box menu-1">
- <strong>right click me</strong>
- </div>
+<div class="context-menu-custom box menu-1">
+ <strong>right click me</strong>
+</div>
</div>
- <h3 id="custom-types-code">Example code: Custom Command Types</h3>
+
+ <h3 id="code">Example code: Custom Command Types</h3>
<script type="text/javascript" class="showcase">
$(function(){
/**************************************************
@@ -82,7 +83,12 @@ <h3 id="custom-types-code">Example code: Custom Command Types</h3>
/**************************************************
* Context-Menu with custom command "label"
**************************************************/
- $.contextMenu({selector: '.context-menu-custom',
+ $.contextMenu({
+ selector: '.context-menu-custom',
+ callback: function(key, options) {
+ var m = "clicked: " + key;
+ window.console && console.log(m) || alert(m);
+ },
items: {
open: {name: "Open", callback: $.noop},
label: {type: "label", customName: "Label"},
@@ -91,6 +97,36 @@ <h3 id="custom-types-code">Example code: Custom Command Types</h3>
});
});
</script>
+
+ <h3 id="css">Example CSS: Custom Command Types</h3>
+ <style type="text/css" class="showcase">
+.labels > ul {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ display: block;
+ float: none;
+}
+.labels > ul > li {
+ display: inline-block;
+ width: 20px;
+ height: 20px;
+ border: 1px solid #CCC;
+ overflow: hidden;
+ text-indent: -2000px;
+}
+.labels > ul > li.selected,
+.labels > ul > li:hover { border: 1px solid #000; }
+.labels > ul > li + li { margin-left: 5px; }
+.labels > ul > li.label1 { background: red; }
+.labels > ul > li.label2 { background: green; }
+.labels > ul > li.label3 { background: blue; }
+.labels > ul > li.label4 { background: yellow; }
+ </style>
+
+ <h3 id="html">Example HTML: Custom Command Types</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
</div>
</body>
</html>
View
89 demo/dynamic.html
@@ -0,0 +1,89 @@
+<!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.6.4.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: Adding new Context Menu Triggers</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>
+</div>
+<button type="button" id="add-trigger">add new trigger</button>
+ </div>
+
+ <h3 id="code">Example code: Adding new Context Menu Triggers</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ // add new trigger
+ $('#add-trigger').bind('click', function(e) {
+ $('<div class="context-menu-one box menu-injected">'
+ + 'right click me <em>(injected)</em>'
+ + '</div>').insertBefore(this);
+
+ // not need for re-initializing $.contextMenu here :)
+ });
+
+ $.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"}
+ }
+ });
+});
+ </script>
+
+ <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>
+
+ </div>
+</body>
+</html>
View
64 demo/empty.html
@@ -0,0 +1,64 @@
+<!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.6.4.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
75 demo/html5-import.html
@@ -0,0 +1,75 @@
+<!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.6.4.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: Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</h2>
+ <p><code>jQuery.contextMenu</code> allows you to import HTML5's &lt;menu&gt; structures to use in older browsers.</p>
+ <div class="inline-spaces">
+<div class="context-menu-html5menu box menu-1">
+ <strong>right click me</strong>
+</div>
+ </div>
+
+ <h3 id="code">Example Code: Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-html5menu',
+ items: $.contextMenu.fromMenu($('#html5menu'))
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Importing HTML5 &lt;menu type=&quot;context&quot;&gt;</h3>
+<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+<menu id="html5menu" type="context" style="display:none" class="showcase">
+ <command label="rotate" onclick="alert('rotate')">
+ <command label="resize" onclick="alert('resize')">
+ <menu label="share">
+ <command label="twitter" onclick="alert('twitter')">
+ <hr>
+ <command label="facebook" onclick="alert('facebook')">
+ </menu>
+</menu>
+ </div>
+</body>
+</html>
View
77 demo/html5-polyfill-firefox8.html
@@ -0,0 +1,77 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example Code: HTML5 Polyfill (Firefox 8)</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu('html5');
+});
+ </script>
+
+ <h3 id="html">Example HTML: HTML5 Polyfill (Firefox 8)</h3>
+<div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+<menu id="html5firefox8" type="context" class="showcase">
+ <menuitem label="rotate" onclick="alert('rotate')" hint="I'm a hint"></menuitem>
+ <menuitem label="resize" onclick="alert('resize')"></menuitem>
+ <menuitem label="disabled" onclick="alert('disabled')" disabled></menuitem>
+ <menu label="share">
+ <menuitem label="twitter" onclick="alert('twitter')"></menuitem>
+ <menuitem label="facebook" onclick="alert('facebook')"></menuitem>
+ <hr>
+ <menuitem type="checkbox" label="(checkbox) yes or no?" onclick="alert('facebook')"></menuitem>
+ <hr>
+ <menuitem type="radio" label="(radio) yes" radiogroup="alpha" checked onclick="alert('facebook')"></menuitem>
+ <menuitem type="radio" label="(radio) no" radiogroup="alpha" onclick="alert('facebook')"></menuitem>
+ </menu>
+</menu>
+ </div>
+</body>
+</html>
View
74 demo/html5-polyfill.html
@@ -0,0 +1,74 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example Code: HTML5 Polyfill</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu('html5');
+});
+ </script>
+
+ <h3 id="html">Example HTML: HTML5 Polyfill</h3>
+<div style="display:none" class="showcase" data-showcase-import=".menu-2"></div>
+<menu id="html5polyfill" type="context" style="display:none" class="showcase">
+ <command label="rotate" onclick="alert('rotate')" icon="images/cut.png">
+ <command label="resize" onclick="alert('resize')" icon="images/door.png">
+ <menu label="share">
+ <command label="twitter" onclick="alert('twitter')" icon="images/page_white_copy.png">
+ <hr>
+ <command label="facebook" onclick="alert('facebook')" icon="images/page_white_edit.png">
+ <hr>
+ <label>foo bar<input type="text" name="foo"></label>
+ </menu>
+</menu>
+ </div>
+</body>
+</html>
View
79 demo/simple.html
@@ -0,0 +1,79 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Simple 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"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Simple Context Menu</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ </div>
+</body>
+</html>
View
103 demo/sub-menus.html
@@ -0,0 +1,103 @@
+<!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.6.4.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(){
+ /**************************************************
+ * Context-Menu with Sub-Menu
+ **************************************************/
+ $.contextMenu({
+ selector: '.context-menu-sub',
+ 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"},
+ "sep1": "---------",
+ "quit": {"name": "Quit", "icon": "quit"},
+ "sep2": "---------",
+ "fold1": {
+ "name": "Sub group",
+ "items": {
+ "fold1-key1": {"name": "Foo bar"},
+ "fold2": {
+ "name": "Sub group 2",
+ "items": {
+ "fold2-key1": {"name": "alpha"},
+ "fold2-key2": {"name": "bravo"},
+ "fold2-key3": {"name": "charlie"}
+ }
+ },
+ "fold1-key3": {"name": "delta"}
+ }
+ },
+ "fold1a": {
+ "name": "Other group",
+ "items": {
+ "fold1a-key1": {"name": "echo"},
+ "fold1a-key2": {"name": "foxtrot"},
+ "fold1a-key3": {"name": "golf"}
+ }
+ }
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Submenus</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ </div>
+</body>
+</html>
View
88 demo/trigger-custom.html
@@ -0,0 +1,88 @@
+<!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.6.4.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: 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>
+</div>
+<button type="button" id="activate-menu">click me</button>
+ </div>
+
+ <h3 id="code">Example code: Custom Activated Context Menu</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ // make button open the menu
+ $('#activate-menu').bind('click', function(e) {
+ e.preventDefault();
+ $('.context-menu-one').contextMenu();
+ // or $('.context-menu-one').trigger("contextmenu");
+ // or $('.context-menu-one').contextMenu({x: 100, y: 100});
+ })
+
+ $.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"}
+ }
+ });
+});
+ </script>
+
+ <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>
+
+ </div>
+</body>
+</html>
View
82 demo/trigger-hover-autohide.html
@@ -0,0 +1,82 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Hover Activated Context Menu With Autohide</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ trigger: 'hover',
+ delay: 500,
+ autoHide: true,
+ 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"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Hover Activated Context Menu With Autohide</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ </div>
+</body>
+</html>
View
81 demo/trigger-hover.html
@@ -0,0 +1,81 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Hover Activated Context Menu</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ trigger: 'hover',
+ delay: 500,
+ 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"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Hover Activated Context Menu</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ </div>
+</body>
+</html>
View
82 demo/trigger-left-click.html
@@ -0,0 +1,82 @@
+<!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.6.4.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: 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>
+</div>
+ </div>
+
+ <h3 id="code">Example code: Left-Click Trigger</h3>
+ <script type="text/javascript" class="showcase">
+$(function(){
+ $.contextMenu({
+ selector: '.context-menu-one',
+ trigger: 'left',
+ // only trigger on lift click!
+ ignoreRightClick: true,
+ 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"}
+ }
+ });
+});
+ </script>
+
+ <h3 id="html">Example HTML: Left-Click Trigger</h3>
+ <div style="display:none" class="showcase" data-showcase-import=".menu-1"></div>
+
+ </div>
+</body>
+</html>
View
38 screen.css
@@ -126,7 +126,7 @@ ul.plain-list > li {
.box {
width: 100px;
height: 100px;
- display:inline-block;
+ display: inline-block;
vertical-align: bottom;
padding: 5px;
color: white;
@@ -142,39 +142,3 @@ ul.plain-list > li {
.menu-injected { background-color: magenta; }
.menu-2.context-menu-disabled { background-color: red; }
-/* labels demo */
-.labels > ul {
- margin: 0;
- padding: 0;
- list-style: none;
- display:block;
- float: none;
-}
-.labels > ul > li {
- display: inline-block;
- width: 20px;
- height: 20px;
- border: 1px solid #CCC;
- overflow: hidden;
- text-indent: -2000px;
-}
-.labels > ul > li.selected,
-.labels > ul > li:hover {
- border: 1px solid #000;
-}
-.labels > ul > li + li {
- margin-left: 5px;
-}
-.labels > ul > li.label1 {
- background: red;
-}
-.labels > ul > li.label2 {
- background: green;
-}
-.labels > ul > li.label3 {
- background: blue;
-}
-.labels > ul > li.label4 {
- background: yellow;
-}
-
View
37 screen.js
@@ -1,14 +1,39 @@
(function($, undefined){
$(function() {
- $('script.showcase').each(function(){
- var $this = $(this);
- $('<pre class="prettyprint lang-js"></pre>')
- .text($this.text())
- .insertBefore($this);
+ if (!window.prettyPrint) {
+ return;
+ }
+
+ $('.showcase').each(function(){
+
+ var $this = $(that || this),
+ text, nodeName, lang, that;
+
+ if ($this.data('showcaseImport')) {
+ $this = $($this.data('showcaseImport'));
+ that = $this.get(0);
+ }
+
+ nodeName = (that || this).nodeName.toLowerCase();
+ lang = nodeName == 'script'
+ ? 'js'
+ : (nodeName == 'style' ? 'css' : 'html');
+
+ if (lang == 'html') {
+ text = $('<div></div>').append($this.clone()).html();
+ } else {
+ text = $this.text();
+ }
+
+ $('<pre class="prettyprint lang-'+ lang +'"></pre>')
+ .text(text)
+ .insertBefore(this);
+
+ that && $(this).remove();
});
- prettyPrint()
+ prettyPrint();
});
})(jQuery);
Please sign in to comment.
Something went wrong with that request. Please try again.