<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery contextMenu</title>
<link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700&subset=latin,cyrillic'
rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/screen.css" type="text/css"/>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme.css" type="text/css"/>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme-fixes.css" type="text/css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
<link href="../../../dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="../../../src/jquery.contextMenu.js" type="text/javascript"></script>
<script src="../../../dist/jquery.ui.position.min.js" type="text/javascript"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/js/main.js" type="text/javascript"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-66438984-1']);
_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 class="wy-body-for-nav">
<div class="wy-grid-for-nav">
<nav data-toggle="wy-nav-shift" class="wy-nav-side">
<div class="wy-side-nav-search">
<a href="https://swisnl.github.io/jQuery-contextMenu/"> jQuery contextMenu</a>
</div>
<div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
<ul>
<li class="toctree-l1 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu//">
Introduction
</a>
<ul>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://www.swis.nl/over-ons/bjorn-brala">
Author
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
Demo
</a>
</li>
</ul>
</li>
<li class="toctree-l1 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs.html">
Documentation
</a>
<ul>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs.html">
Options
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/items.html">
Defining menu items
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/plugin-commands.html">
Plugin commands
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/customize.html">
Customize icons
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/fontawesome-icons.html">
FontAwesome icons
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/font-awesome.html">
Font Awesome support
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/runtime-options.html">
Runtime options
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/custom-command-types.html">
Custom command types
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/events.html">
Events
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/docs/html5-polyfill.html">
HTML5 polyfill
</a>
</li>
</ul>
</li>
<li class="toctree-l1 current">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
Demo gallery
</a>
<ul>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
Simple Context Menu
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/fontawesome-icons.html">
FontAwesome icons
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/accesskeys.html">
Accesskeys
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/async-create.html">
Create Context Menu (asynchronous)
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/callback.html">
Command's action (callbacks)
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/custom-command.html">
Custom Command Types
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled.html">
Disabled Command
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-callback.html">
Disabled Callback Command
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-changing.html">
Changing Command's disabled status
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-menu.html">
Disabled Menu
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/dynamic.html">
Adding new Context Menu Triggers
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/dynamic-create.html">
Create Context Menu on demand
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-import.html">
Importing HTML5 menu
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill.html">
HTML5 polyfill
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill-firefox8.html">
HTML5 polyfill (Firefox)
</a>
</li>
<li class="toctree-l2 current">
<a class="reference internal current"
href="https://swisnl.github.io/jQuery-contextMenu/demo/input.html">
Input Commands
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/keeping-contextmenu-open.html">
Keeping the context menu open
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/menu-title.html">
Menus with titles
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html">
Context Menu on DOM Element
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html">
Submenus
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-custom.html">
Custom Activated Context Menu
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-hover.html">
Hover Activated Context Menu
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-hover-autohide.html">
Hover Activated Context Menu With Autohide
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-left-click.html">
Left-Click Trigger
</a>
</li>
<li class="toctree-l2 ">
<a class="reference internal "
href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-swipe.html">
Swipe Trigger
</a>
</li>
</ul>
</li>
</ul>
<div class="swis-branding">
<span>Maintained by:</span>
<a href="https://www.swis.nl"><img src="https://swisnl.github.io/jQuery-contextMenu/images/swis-logo.jpg" class="swis-logo">Creative Digital Agency</a>
</div>
</div>
</nav>
<section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">
<nav class="wy-nav-top" role="navigation" aria-label="top navigation">
<i data-toggle="wy-nav-top" class="fa fa-bars"></i>
<a href="https://swisnl.github.io/jQuery-contextMenu/">jQuery contextMenu</a>
</nav>
<div class="wy-nav-content">
<div class="rst-content">
<div role="main" class="document">
<a href="https://github.com/swisnl/jQuery-contextMenu" class="edit-on-github fa fa-github"> Fork on GitHub</a>
<h1 id="demo-input-commands">Demo: Input Commands</h1>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<ul>
<li><a href="#example-code">Example code</a></li>
<li><a href="#example-html">Example HTML</a></li>
</ul>
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<p><span class="context-menu-one btn btn-neutral">right click me</span></p>
<h2 id="example-code">Example code</h2>
<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>
<h2 id="example-html">Example HTML</h2>
<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div>
</div>
<footer>
<hr/>
<div role="contentinfo">
<p>
Find jQuery contextMenu on <a href="https://github.com/swisnl/jQuery-contextMenu">GitHub</a>.
</p>
</div>
</footer>
</div>
</div>
</section>
</div>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/js/theme.js"></script>
<script>
$(function() {
hljs.configure({
tabReplace: ' ', // 4 spaces
});
hljs.initHighlightingOnLoad();
});
</script>
</body>
</html>