您的位置：首页 > Web前端 > JQuery

jQuery 自定义鼠标右键菜单

2016-01-04 17:59 537 查看

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>自定义右键菜单</title>
<!-- 1. 引入jQuery文件 -->
<script src="jquery-1.11.3.js"></script>
<!-- 2. 引入jQuery UI的JS文件 -->
<script src="jquery-ui.js"></script>
<!-- 3. 引入jQuery UI的CSS文件 -->
<link rel="stylesheet" href="jquery-ui.css">
</head>
<body>
<ul style="width:100px;display:none;position:absolute;" id="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
<li>Item 3-3</li>
<li>Item 3-4</li>
<li>Item 3-5</li>
</ul>
</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

<script>
// 1. 如何禁用默认鼠标右键菜单
$(document).contextmenu(function(){
return false;
});
// 2. 绑定鼠标右键的事件
$(document).mousedown(function(event){
//当点击鼠标右键，显示菜单
if(event.button == 2){
// 显示自定义菜单
$("#menu").css({
//定义菜单显示位置为事件发生的X坐标和Y坐标
top : event.pageY,
left : event.pageX
}).slideDown(100);
//如果点击鼠标左键，隐藏菜单
}else if(event.button == 0){
$("#menu").slideUp(100);
}
});
$( "#menu" ).menu();
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航