Maison > Article > interface Web > jquery implémente l'affichage de l'effet de menu contextuel personnalisé dans la zone spécifiée de la page Web
jquery implémente l'affichage de l'effet de menu contextuel personnalisé dans la zone spécifiée de la page Web
- PHPzavant
- 2016-05-16 15:42:581145parcourir
Cet article présente principalement jquery pour réaliser l'effet de menu contextuel personnalisé dans une zone désignée de la page Web, impliquant des clics de souris jquery et la liaison d'événements et d'autres techniques connexes. Il a une certaine valeur de référence dans Friends. besoin peut s'y référer, comme suit :
Il s'agit d'un effet de menu contextuel sur une page Web implémenté par jquery. La différence avec les autres menus contextuels personnalisés est que ce menu n'est valide que dans la zone spécifiée. s'il dépasse la zone spécifiée, il sera affiché après un clic droit. Il s'agit toujours du menu contextuel du navigateur. Après avoir exécuté l'effet, veuillez cliquer avec le bouton droit de la souris dans la zone orange, et un menu contextuel personnalisé avec une icône apparaîtra, ce qui est complètement différent du menu contextuel du navigateur !
Une capture d'écran de l'effet en cours d'exécution est la suivante :
L'adresse de la démonstration en ligne est la suivante :
http : //demo.jb51.net/ js/2015/jquery-web-area-right-click-menu-codes/
Les codes spécifiques sont les suivants :
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery自定义区域的鼠标右键菜单</title>
<script src="jquery-1.6.2.min.js"></script>
<style type="text/css">
#mask{position: absolute;left: 0;top: 0;z-index: 9000;display: block;}
#myMenu{position: absolute;display: none;z-index: 9999;background: yellow;border: 1px solid;width: 200px;height: 155px;}
#textbox{background: orange;width: 380px;border: 2px solid;}
img{height: 30px;width: 30px;}
td{font-size: 20px;cursor: pointer;}
a{text-decoration: none;color: black;}
a: hover{color: white;background: black;}
</style>
<script type="text/javascript">
var windowwidth;
var windowheight;
var checkmenu;
$(window).ready(function() {
$('#myMenu').hide();
$('#textbox').bind("contextmenu",function(e){
windowwidth = $(window).width();
windowheight = $(window).height();
checkmenu = 1;
$('#mask').css({
'height': windowheight,
'width': windowwidth
});
$('#myMenu').show(500);
$('#myMenu').css({
'top':e.pageY+'px',
'left':e.pageX+'px'
});
return false;
});
$('#mask').click(function(){
$(this).height(0);
$(this).width(0);
$('#myMenu').hide(500);
checkmenu = 0;
return false;
});
$('#mask').bind("contextmenu",function(){
$(this).height(0);
$(this).width(0);
$('#myMenu').hide(500);
checkmenu = 0;
return false;
});
$(window).resize(function(){
if(checkmenu == 1) {
windowwidth = $(window).width();
windowheight = $(window).height();
$('#mask').css({
'height': windowheight,
'width': windowwidth,
});
}
});
});
</script>
</head>
<body >
<p id="myMenu" >
<table cellspace="3">
<tr>
<td ><img src="images/twitter.png" ></td><td><a href="#">tweet me</a></td>
</tr>
<tr>
<td ><img src="images/facebook.png" > </td><td><a href="#">facebook share</a></td>
</tr>
<tr>
<td ><img src="images/myspace.png" > </td><td><a href="#">myspace share</a></td>
</tr>
<tr>
<td ><img src="images/mail.png" > </td><td><a href="#">e-mail this</a></td>
</tr>
</table>
</p>
<p id="mask"> </p>
<p id="textbox">
<p>嗨！您好，在这个区域内点击您的鼠标右键吧，会弹出一个自定义的右键菜单，和浏览器的右键菜单完全不一样哦！<p/>
</p>
<p>
</body>
</html>Ce qui précède représente l'intégralité du contenu de ce chapitre, plus lié. Pour les didacticiels, veuillez visiter le Tutoriel vidéo jQuery !