Introduction:
Here I will explain how to make/ create custom jQuery right click context menu example or custom right click menu using jQuery and how to disable right click on the page using JQuery.
Description:
In previous posts I explained change background of controls when validation fails, Change textbox background color in JavaScript, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how to create custom right click context menu using JQuery.
In previous posts I explained change background of controls when validation fails, Change textbox background color in JavaScript, split the string, add fade in effect to page, Password strength jquery plugin examples and many articles relating to JQuery. Now I will explain how to create custom right click context menu using JQuery.
To
implement custom right click context menu using jQuery
we need to write the code as shown below
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Right Click using jQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
try {
$(document).bind("contextmenu",
function(e) {
e.preventDefault();
$("#custom-menu").css({
top: e.pageY + "px", left:
e.pageX + "px" }).show(100);
});
$(document).mouseup(function(e)
{
var container = $("#custom-menu");
if (container.has(e.target).length == 0) {
container.hide();
}
});
}
catch (err) {
alert(err);
}
});
</script>
<style type="text/css">
#custom-menu
{
z-index: 1000;
position: absolute;
border: solid 2px black;
background-color: white;
padding: 5px 0;
display: none;
}
#custom-menu ol
{
padding: 0;
margin: 0;
list-style-type: none;
min-width: 130px;
width: auto;
max-width: 200px;
font-family:Verdana;
font-size:12px;
}
#custom-menu ol li
{
margin: 0;
display: block;
list-style: none;
padding: 5px 5px;
}
#custom-menu ol li:hover
{
background-color: #efefef;
}
#custom-menu ol li:active
{
color: White;
background-color: #000;
}
#custom-menu ol .list-devider
{
padding: 0px;
margin: 0px;
}
#custom-menu ol .list-devider hr
{
margin: 2px 0px;
}
#custom-menu ol li a
{
color: Black;
text-decoration: none;
display: block;
padding: 0px 5px;
}
#custom-menu ol li a:active
{
color: White;
}
</style>
</head>
<body>
<div id="custom-menu">
<ol>
<li><a href="#">Reply</a> </li>
<li><a href="#">Reply All</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Mark as unread</a> </li>
<li><a href="#">Delete</a> </li>
<li><a href="#">Archive</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Junk</a> </li>
<li><a href="#">View</a> </li>
</ol>
</div>
</body>
</html>
|
Live
Demo
To check for live
demo try to right click on this webpage
|
If you enjoyed this post, please support the blog below. It's FREE! Get the latest Asp.net, C#.net, VB.NET, jQuery, Plugins & Code Snippets for FREE by subscribing to our Facebook, Twitter, RSS feed, or by email. |
|||
Subscribe by RSS
Subscribe by Email
|
|||
9 comments :
Oh ja, dass ist das beste Script, das ich finden konnte, danke dafür! - Perfekt! :-)
Oh yes, thats it! This is the best Script, that i could find, thank you! - Perfect! :-)
i think it's amazing dud
rock
Wonderful task! how to restrict it within iframe??
DAt's one of handsome JS i have ever met. Applauses Suresh ji..... and prayers as well...
its not working in firefox
no its working in firefox too...
Hi,
I have requirement of creating asp.net mvc web grid with context menu.
The context menu should have capability to View, Add, Edit and Delete operations on each row. This menu should be displayed when I right click on row.
It would be great if you could give some samples of examples.
Thanks,
Dhanaraj
rsrohitsharma206@gmail.com
please tell me how to use right click on gridview to copy gridview row data and paste option
asp.net and sql server 2005
Note: Only a member of this blog may post a comment.