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

js实现页面右键自定义功能

2014-01-14 14:44 861 查看

js实现页面右键自定义功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>frank index</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<style type="text/css">
#itemMenu {
width: 120px;
height: 69px;
position: fixed;
display: none;
}
#itemMenu table tr{
background: #0080ff;
}
div{
background: #bbb;
margin: 2px auto;
}
</style>
</head>
<body>
<div id="itemMenu">
<table width="100%"  cellspacing=1>
<tr>
<td style="cursor: default; border: outset 1;" align="center"
onclick="create()">create row</td>
</tr>
<tr>
<td style="cursor: default; border: outset 1;" align="center"
onclick="update();">modify row</td>
</tr>
<tr>
<td style="cursor: default; border: outset 1;" align="center"
onclick="del();">delete row</td>
</tr>
</table>
</div>

<div class="rows">
<div id="grp1" class="module">row1</div>
</div>
<div class="rows" oncontextmenu="javascript:showMenu();">
<div id="grp3" class="module">row2</div>
</div>
<div class="rows" oncontextmenu="javascript:showMenu();">
<div id="grp2" class="module">row3</div>
</div>

<script type="text/javascript">
$(function() {
$('.rows').contextmenu(function(e) {
$('#itemMenu').css({
'top' : e.pageY,
'left' : e.pageX,
'display' : 'block'
});
return false;//屏蔽原有的右键菜单
});
});
function create() {
$('#itemMenu').css('display', 'none');
alert("create");
}
function update() {
$('#itemMenu').css('display', 'none');
alert("update");
}
function del() {
$('#itemMenu').css('display', 'none');
alert("del");
}
</script>
</body>
</html>

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

标签： jquery js html

相关文章推荐

新的分享

章节导航