Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

executable file 191 lines (172 sloc) 7.607 kb
<!DOCTYPE html>
<html xmlns="" xml:lang="de" lang="de">
<meta charset="utf-8" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Input Commands Demo - jQuery contextMenu Plugin</title>
<meta name="description" content="simple contextMenu generator for interactive web applications based on jQuery" />
<script src="../jquery-1.8.2.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']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
<a id="github-forkme" href=""><img src="" alt="Fork me on GitHub" /></a>
<div id="container">
<h1><a href="">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="">Author</a></li>
<h2 id="demo">Demo: Input Commands</h2>
<div class="inline-spaces">
<div class="context-menu-one box menu-1">
<strong>right click me</strong>
<h3 id="code">Example code: Input Commands</h3>
<script type="text/javascript" class="showcase">
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 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 basically dumps the input commands' values to an object
// like {name: "foo", yesno: true, radio: "3", …}
<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="dynamic-create.html">Create Context Menu on demand</a></li>
<li><a href="async-create.html">Create Context Menu (asynchronous)</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="menu-title.html">Menus with titles</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>
Jump to Line
Something went wrong with that request. Please try again.