Permalink
Browse files

contextmenu v1.1.0

  • Loading branch information...
1 parent 1dfd48b commit 110c08f7275b2e585bc1243c19318b5dc5036dd1 goker cebeci committed Dec 3, 2011
Showing with 153 additions and 131 deletions.
  1. 0 contextmenu.css
  2. +32 −26 contextmenu.js
  3. +121 −105 index.html
View
0 contextmenu.css 100644 → 100755
No changes.
View
58 contextmenu.js 100644 → 100755
@@ -1,3 +1,4 @@
+/* contextmenu 1.1.0 */
(function($){
// Methods
var methods = {
@@ -8,32 +9,36 @@
contextmenu.init(contextmenu);
contextmenu.bind({
'contextmenu':function(e){
- e.preventDefault();
- $this.start(contextmenu);
- $('#contextmenu').remove();
- var c = $('<div id="contextmenu">')
- .addClass(contextmenu.style)
- c.css({
- position : 'absolute',
- display : 'none',
- 'z-index': '10000'
- })
- .appendTo($('body'));
- for(var i in contextmenu.menu)
- $('<a href="'+ contextmenu.menu[i] +'">')
- .html(i).appendTo(c);
- // Set position
- var ww = $(document).width();
- var wh = $(document).height();
- var w = c.outerWidth(1);
- var h = c.outerHeight(1);
- var x = e.pageX > (ww - w) ? ww : e.pageX;
- var y = e.pageY > (wh - h) ? wh : e.pageY;
- c.css({
- display : 'block',
- top : y,
- left : x
- });
+ if(!e.ctrlKey || !contextmenu.ctrl){
+ e.preventDefault();
+ $this.start(contextmenu);
+ $('#contextmenu').remove();
+ var c = $('<div id="contextmenu">')
+ .addClass(contextmenu.style)
+ c.css({
+ position : 'absolute',
+ display : 'none',
+ 'z-index': '10000'
+ })
+ .appendTo($('body'));
+ for(var i in contextmenu.menu)
+ $('<a>',{
+ 'href':contextmenu.menu[i]
+ })
+ .html(i).appendTo(c);
+ // Set position
+ var ww = $(document).width();
+ var wh = $(document).height();
+ var w = c.outerWidth(1);
+ var h = c.outerHeight(1);
+ var x = e.pageX > (ww - w) ? ww : e.pageX;
+ var y = e.pageY > (wh - h) ? wh : e.pageY;
+ c.css({
+ display : 'block',
+ top : y,
+ left : x
+ });
+ }
}
});
$(document)
@@ -72,6 +77,7 @@
start : function(){},
finish : function(){},
error : function(){},
+ ctrl : 1,
style : '',
menu : []
}, options);
View
226 index.html 100644 → 100755
@@ -1,25 +1,29 @@
-<!DOCTYPE html>
-<html lang="en">
+<!DOCTYPE html>
+<html lang="en">
<head>
<meta charset="UTF-8" />
<title>contextmenu</title>
- <meta name="description" content="contextmenu is a context menu (right click menu) jQuery plug-in." />
- <meta name="keywords" content="contextmenu, context menu, right click menu, jquery context, jquery plug-in" />
+ <meta name="description" content="contextmenu is a context menu (right click menu) jQuery plugin." />
+ <meta name="keywords" content="contextmenu, context menu, right click menu, jquery context, jquery plugin" />
<link type="text/plain" rel="author" href="http://gokercebeci.com/humans.txt" />
<link rel="shortcut icon" href="http://gokercebeci.com/favicon.ico" type="image/x-icon" />
<style>
body { margin: 0; padding: 0; color:#333; font: normal 13px/1.264 sans-serif; }
+ img { border:0 }
+ .clearfix { clear:both; }
#devcontainer { margin: 20px auto; padding: 0 10px; width: 940px; }
- .codeblock {
- margin: 5px 0;
- padding:10px;
- color: #ddd;
- border: 2px solid #000;
+ pre, code {
+ display: block;
+ padding: 10px;
+ color: #eee;
+ border: 1px solid #222;
background: #333;
+ font-family: monospace, monospace;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
}
- .codeblock p{padding-top:10px; }
- #area { float:left; width: 460px; }
- .desc { float:right; width: 460px; }
+ #area { float:left; width: 480px; }
+ .desc { float:right; width: 440px; }
.signature a { color:#555; text-decoration:none; }
.signature img { margin-right:5px; vertical-align: middle; }
</style>
@@ -30,109 +34,121 @@
<div id="devcontainer">
<!-- development area -->
- <style>
- #area {
- float: left;
- width: 460px;
- }
- .menu-area, .menu-area-dark {
- margin-top: 20px;
- padding: 10px;
- height: 180px;
- border: 1px solid #ddd;
- background: #e5e5e5;
- }
- </style>
- <!-- DESCRIPTION -->
- <div class="desc">
- <h1>CONTEXTMENU</h1>
- <hr>
- <p><b>contextmenu</b> is a context menu (right click menu) jQuery plug-in.</p>
- <p>I developed it to use on my <a href="http://uygulama.net" title="uygulama">Uygulama</a> project's new version.</p>
- <p>I've only tested it on</p>
- <ul>
- <li><b>Chromium (14.0.835.202)</b>, </li>
- <li><b>Google Chrome (15.0.874.120)</b>, </li>
- <li><b>Mozilla Firefox (3.6.17)</b>, </li>
- <li><b>Opera (11.52)</b> </li>
- </ul>
- <p>and it works enough for me for now!</p>
- <p>It is under MIT License.</p>
- <p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
- <img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
- goker.cebeci, the developer</a></p>
- <p class="signature"><a href="https://github.com/gokercebeci/contextmenu">
- <img src="http://geticon.org/of/github.com" alt="github" />
- download or fork it on github</a></p>
- <p class="signature"><a href="http://plugins.jquery.com/project/contextmenu">
- <img src="http://geticon.org/of/jquery.com" alt="jquery" />
- jquery plugin page</a></p>
- <br/>
- <h3>USAGE</h3>
- <div class="codeblock">
- <code>
- &lt;script src="contextmenu.js"&gt&lt;/script&gt;<br/>
- &lt;link rel="stylesheet" href="contextmenu.css" /&gt;<br/>
- &lt;script&gt;<br/>
- &nbsp;&nbsp;$(document).contextmenu({<br/>
- &nbsp;&nbsp;&nbsp;&nbsp;menu: {<br/>
- &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'custom link' : 'http://...'<br/>
- &nbsp;&nbsp;&nbsp;&nbsp;}<br/>
- &nbsp;&nbsp;});<br/>
- &lt;/script&gt;
- </code>
- </div>
- <h3>OPTIONS</h3>
- <div class="codeblock">
+ <!-- SAMPLE -->
+ <section>
+ <h2>SAMPLE</h2>
+ <!-- description -->
+ <div class="desc">
+ <h1>jQuery CONTEXTMENU v1.1.0</h1>
+ <hr>
+ <p><b>contextmenu</b> is a context menu (right click menu) jQuery plugin.</p>
+ <p>I developed it to use on my <a href="http://uygulama.net" title="uygulama">Uygulama</a> project's new version.</p>
+ <p>I've only tested it on</p>
<ul>
- <li><code><b>init</b> : Optional init function.</code></li>
- <li><code><b>start </b> : Optional start function</code></li>
- <li><code><b>finish </b> : Optional finish function.</code></li>
- <li><code><b>style </b> : Optional class name.</code></li>
- <li><code><b>menu </b> : Required menu object.</code></li>
+ <li><b>Chromium (14.0.835.202)</b>, </li>
+ <li><b>Google Chrome (15.0.874.120)</b>, </li>
+ <li><b>Mozilla Firefox (3.6.17)</b>, </li>
+ <li><b>Opera (11.52)</b> </li>
+ <li><b>Internet Explorer (8.0.6001)</b> </li>
</ul>
+ <p>and it works enough for me for now!</p>
+ <p>It is under MIT License.</p>
+ <p class="signature"><a href="http://gokercebeci.com/dev/" title="developer">
+ <img src="http://geticon.org/of/gokercebeci.com" alt="developer" />
+ goker.cebeci, the developer</a></p>
+ <p class="signature"><a href="https://github.com/gokercebeci/contextmenu">
+ <img src="http://geticon.org/of/github.com" alt="github" />
+ download or fork it on github</a></p>
+ <p class="signature"><a href="http://plugins.jquery.com/project/contextmenu">
+ <img src="http://geticon.org/of/jquery.com" alt="jquery" />
+ jquery plugin page</a></p>
</div>
- </div>
- <!-- /DESCRIPTION -->
+ <!-- /decription -->
- <div id="area">
- <h3>CONTEXTMENU</h3>
- <div class="menu-area">
- right-click here to show context menu
- </div>
- <div class="clear"></div>
+ <div id="area">
+ <h3>CONTEXTMENU</h3>
+ <div class="menu-area">
+ right-click here to show context menu
+ </div>
+ <div class="clearfix"></div>
- <h3>CONTEXTMENU DARK</h3>
+ <h3>CONTEXTMENU DARK</h3>
- <div class="menu-area-dark">
- right-click here to show context menu dark
+ <div class="menu-area-dark">
+ right-click here to show context menu dark
+ </div>
+ <i>* click to ctrl for disable to contextmenu</i>
+ <div class="clearfix"></div>
</div>
- <div class="clear"></div>
- </div>
-
- <script src="contextmenu.js"></script>
- <link rel="stylesheet" href="contextmenu.css" />
- <script>
- $('.menu-area').contextmenu({
- 'menu':{
- 'custom link':'#custom-link',
- 'custom link 2':'#custom-link',
- 'contextmenu v1.00':'http://gokercebeci.com/dev/contextmenu'
- }
- });
- $('.menu-area-dark').contextmenu({
- 'style':'dark',
- 'menu':{
- 'custom link':'#custom-link',
- 'custom link 2':'#custom-link',
- 'custom link 3':'#custom-link',
- 'contextmenu v1.00':'http://gokercebeci.com/dev/contextmenu'
+ <script src="contextmenu.js"></script>
+ <link rel="stylesheet" href="contextmenu.css" />
+ <script>
+ $('.menu-area').contextmenu({
+ 'ctrl':false,
+ 'menu':{
+ 'custom link':'#custom-link',
+ 'custom link 2':'#custom-link',
+ 'contextmenu v1.10':'http://gokercebeci.com/dev/contextmenu'
+ }
+ });
+ $('.menu-area-dark').contextmenu({
+ 'style':'dark',
+ 'menu':{
+ 'custom link':'#custom-link',
+ 'custom link 2':'#custom-link',
+ 'custom link 3':'#custom-link',
+ 'contextmenu v1.10':'http://gokercebeci.com/dev/contextmenu'
+ }
+ });
+ </script>
+ <style>
+ .menu-area, .menu-area-dark {
+ margin-top: 20px;
+ padding: 10px;
+ height: 120px;
+ border: 1px solid #ddd;
+ background: #e5e5e5;
}
- });
- </script>
+ </style>
+
+ <div class="clearfix"></div>
+ </section>
+ <!-- SAMPLE -->
+
+ <!-- USAGE -->
+ <section>
+ <h2>USAGE</h2>
+ <code>
+ &lt;script src="contextmenu.js"&gt&lt;/script&gt;<br/>
+ &lt;link rel="stylesheet" href="contextmenu.css" /&gt;<br/>
+ &lt;script&gt;<br/>
+ &nbsp;&nbsp;$(document).contextmenu({<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;menu: {<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;'custom link' : 'http://...'<br/>
+ &nbsp;&nbsp;&nbsp;&nbsp;}<br/>
+ &nbsp;&nbsp;});<br/>
+ &lt;/script&gt;
+ </code>
+ </section>
+ <!-- /USAGE -->
+
+ <!-- OPTIONS -->
+ <section>
+ <h2>OPTIONS</h2>
+ <pre>
+ init : Optional init function.
+ start : Optional start function
+ finish : Optional finish function.
+ ctrl : Contect menu disable. If you right click with ctrl key
+ the contect menu do not show. [true,false] Default value is true;
+ style : Optional class name.
+ menu : Required menu object.
+ </pre>
+ </section>
+ <!-- /OPTIONS -->
<!-- /development area -->
</div>
</body>
-</html>
+</html>

0 comments on commit 110c08f

Please sign in to comment.