How to create custom right click of mouse using jQuery
In this article, we have created custom right click
of mouse using jQuery. Many times we need to create our custom right click menu for web browser.
Design:-
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="jquerydiv.aspx.cs" Inherits="jquerydiv"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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-div").css({
top: e.pageY + "px", left: e.pageX
+ "px" }).show(100);
});
$(document).mouseup(function (e) {
var
closediv = $("#custom-div");
if
(closediv.has(e.target).length == 0) {
closediv.hide();
}
});
}
catch
(err) {
alert(err);
}
});
</script>
<style type="text/css">
#custom-div
{
z-index:
1000;
position:
absolute;
border:
solid 2px #39422e;
background-color:
#BEDD9A;
padding:
5px 0;
display:
none;
}
#custom-div
ol
{
padding:
0;
margin:
0;
list-style-type:
none;
min-width:
130px;
width:
auto;
max-width:
200px;
font-family:
Verdana;
font-size:
12px;
}
#custom-div
ol li
{
margin:
0;
display:
block;
list-style:
none;
padding: 5px 5px;
}
#custom-div
ol li:hover
{
background-color:
#9890DD;
}
#custom-div
ol li:active
{
color:
#9890DD;
background-color:
#000;
}
#custom-div
ol .list-devider
{
padding:
0px;
margin:
0px;
}
#custom-div
ol .list-devider
hr
{
margin:
2px 0px;
}
#custom-div
ol li a
{
color:
Black;
text-decoration:
none;
display:
block;
padding:
0px 5px;
}
#custom-div
ol li a:active
{
color:
#9890DD;
}
</style>
</head>
<body>
<div>
Code Solution page refer to improve
your code skills. you can also learn many theoretical
question they will be help in interview
time.
</div>
<div id="custom-div">
<ol>
<li><a href="#">Back</a> </li>
<li><a href="#">Forward</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Reload</a> </li>
<li><a href="#">Save as</a> </li>
<li><a href="#">Print</a> </li>
<li class="list-devider">
<hr />
</li>
<li><a href="#">Save as PDF</a> </li>
</ol>
</div>
</body>
</html>
Out-Put:-
How to create custom right click of mouse using jQuery
Reviewed by NEERAJ SRIVASTAVA
on
4:04:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
4:04:00 PM
Rating:
No comments: