367 lines
22 KiB
HTML
367 lines
22 KiB
HTML
|
<!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="http://swisnl.github.io/jQuery-contextMenu/css/screen.css" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="http://swisnl.github.io/jQuery-contextMenu/css/theme.css" type="text/css"/>
|
||
|
|
<link rel="stylesheet" href="http://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="../../../src/jquery.ui.position.min.js" type="text/javascript"></script>
|
||
|
|
|
||
|
|
<script src="http://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="http://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="http://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="http://swisnl.github.io/jQuery-contextMenu/demo.html">
|
||
|
|
Demo
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l1 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs.html">
|
||
|
|
Documentation
|
||
|
|
</a>
|
||
|
|
<ul>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs.html">
|
||
|
|
Options
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/items.html">
|
||
|
|
Defining menu items
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/plugin-commands.html">
|
||
|
|
Plugin commands
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/customize.html">
|
||
|
|
Customize icons
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/runtime-options.html">
|
||
|
|
Runtime options
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/custom-command-types.html">
|
||
|
|
Custom command types
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/docs/events.html">
|
||
|
|
Events
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo.html">
|
||
|
|
Demo gallery
|
||
|
|
</a>
|
||
|
|
<ul>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo.html">
|
||
|
|
Simple Context Menu
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/accesskeys.html">
|
||
|
|
Accesskeys
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/async-create.html">
|
||
|
|
Create Context Menu (asynchronous)
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/callback.html">
|
||
|
|
Command's action (callbacks)
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/custom-command.html">
|
||
|
|
Custom Command Types
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/disabled.html">
|
||
|
|
Disabled Command
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/disabled-callback.html">
|
||
|
|
Disabled Callback Command
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo/disabled-menu.html">
|
||
|
|
Disabled Menu
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/dynamic.html">
|
||
|
|
Adding new Context Menu Triggers
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo/html5-import.html">
|
||
|
|
Importing HTML5 menu
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill.html">
|
||
|
|
HTML5 polyfill
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 current">
|
||
|
|
<a class="reference internal current"
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill-firefox8.html">
|
||
|
|
HTML5 polyfill (Firefox)
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/input.html">
|
||
|
|
Input Commands
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo/menu-title.html">
|
||
|
|
Menus with titles
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html">
|
||
|
|
Submenus
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/trigger-custom.html">
|
||
|
|
Custom Activated Context Menu
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://swisnl.github.io/jQuery-contextMenu/demo/trigger-hover.html">
|
||
|
|
Hover Activated Context Menu
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://swisnl.github.io/jQuery-contextMenu/demo/trigger-left-click.html">
|
||
|
|
Left-Click Trigger
|
||
|
|
</a>
|
||
|
|
</li>
|
||
|
|
<li class="toctree-l2 ">
|
||
|
|
<a class="reference internal "
|
||
|
|
href="http://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="http://www.swis.nl"><img src="http://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="http://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-html5-polyfill-firefox">Demo: HTML5 Polyfill (Firefox)</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" contextmenu="html5firefox8">right click me</span></p>
|
||
|
|
<h2 id="example-code">Example code</h2>
|
||
|
|
<script type="text/javascript" class="showcase">
|
||
|
|
$(function(){
|
||
|
|
$.contextMenu('html5');
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
<h2 id="example-html">Example HTML</h2>
|
||
|
|
<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div>
|
||
|
|
<pre><code class="language-html"><menu id="html5firefox8" type="context" >
|
||
|
|
<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('checkbox: ' + (this.checked ? 'yep!' : 'nope'))"></menuitem>
|
||
|
|
<hr>
|
||
|
|
<menuitem type="radio" label="(radio) yes" radiogroup="alpha" checked
|
||
|
|
onclick="alert('radio: yes')"></menuitem>
|
||
|
|
<menuitem type="radio" label="(radio) no" radiogroup="alpha"
|
||
|
|
onclick="alert('radio: no')"></menuitem>
|
||
|
|
</menu>
|
||
|
|
</menu></code></pre>
|
||
|
|
<menu id="html5firefox8" type="context"><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('checkbox: ' + (this.checked ? 'yep!' : 'nope'))"></menuitem><hr><menuitem type="radio" label="(radio) yes" radiogroup="alpha" checked onclick="alert('radio: yes')"></menuitem><menuitem type="radio" label="(radio) no" radiogroup="alpha" onclick="alert('radio: no')"></menuitem></menu></menu>
|
||
|
|
</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="http://swisnl.github.io/jQuery-contextMenu/js/theme.js"></script>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
$(function() {
|
||
|
|
hljs.configure({
|
||
|
|
tabReplace: ' ', // 4 spaces
|
||
|
|
});
|
||
|
|
hljs.initHighlightingOnLoad();
|
||
|
|
});
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</body>
|
||
|
|
</html>
|