Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: gh-pages
Fetching contributors…

Cannot retrieve contributors at this time

executable file 481 lines (451 sloc) 22.85 kb
<!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.2.min.js" type="text/javascript"></script>
<script src="jquery.ui.position.js" type="text/javascript"></script>
<script src="jquery.contextMenu.js" type="text/javascript"></script>
<link href="jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<link href="screen.css" rel="stylesheet" type="text/css" />
</head>
<body>
<a id="github-forkme" href="http://github.com/addyosmani/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/addyosmani/jQuery-contextMenu">jQuery contextMenu (fork)</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>
<p>For a demo of the <strong>polyfill</strong> in action, please scroll down to the end of the page.</p>
<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},
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}
}});
/**************************************************
* Menu 1 (default callback)
**************************************************/
$.contextMenu({
selector: '.context-menu-one-default',
callback: function(key, opt){ alert("Key '" + key + "' clicked"); },
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"}
}
});
/**************************************************
* 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');
}
}
});
/**************************************************
* 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">
<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>
<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', 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},
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}
}},
"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>
<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 type="context" id="html5polyfill">
<menuitem label="rotate" onclick="rotate()" icon="http://cdn1.iconfinder.com/data/icons/silk2/arrow_rotate_clockwise.png"></menuitem>
<menuitem label="resize" onclick="resize()" icon="http://cdn3.iconfinder.com/data/icons/fugue/icon/image-resize.png"></menuitem>
<menu label="share">
<menuitem label="twitter" onclick="alert('foo')"></menuitem>
<menuitem label="facebook" onclick="alert('bar')"></menuitem>
</menu>
</menu>
</div>
</div>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.