Skip to content
Fetching contributors…
Cannot retrieve contributors at this time
executable file 191 lines (172 sloc) 7.43 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.7.1.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.