Jquery 右键菜单示例

来源：互联网发布：淘宝客服个人考核标准编辑：程序博客网时间：2024/05/07 19:28

CSS部分：

<script type="text/javascript" src="f:/java/js/jquery.js"> </script><!--css,js--><style type="text/css">*{margin:0;padding:0;}body{background:#183;}.menu{width:150px;height:auto;border:1px solid #666;box-shadow:1px 1px 15px #ccc;background:#fff;display:none;position:absolute;}.menu ul li{height:30xp;line-height:30px;border-bottom:1px solid #ccc;font-size:14px;font-family:"黑体";list-style:none;}.menu .m_ico{width:20px;height:20px;display:block;float:left;background:url("images/icon-ui.png");background-position:-49px 85px;margin-top:5px;margin-right:15px;margin-left:15px;}.menu ul li:hover{background:#f2f2f2;cursor:pointer;color:#183;}</style>

HTML部分：

<div class="menu"><ul><li><i class="m_ico"></i>文件</li><li><i class="m_ico"></i>新建</li><li><i class="m_ico"></i>删除</li><li><i class="m_ico"></i>保存</li><li><i class="m_ico"></i>刷新</li><li><i class="m_ico"></i>属性</li></ul></div>

JS部分：

<script type="text/javascript">/* 屏蔽网页右键的系统菜单*/document.oncontextmenu=function(){return false;}/* 鼠标事件 */$(document).mousedown(function(e){var key = e.which;  //获取鼠标键;if(key===3){var X = e.clientX;var Y = e.clientY;//$(".menu").css({"margin-top":Y,"margin-left":X}).fadeIn('slow');   //方法一$(".menu").css({top:Y,left:X}).fadeIn('slow'); //方法二}if(key===1){$(".menu").fadeOut('normal');}});/* 执行右键选项 */$(".menu").find("li").click(function(){var _index = $(this).index();var text = $(".menu").find("li").eq(_index).text();alert("您执行了:"+text);});/* 右键菜单高度 alert($(".menu").height());*//* 浏览器的可见高度 alert(document.body.clientHeight);  alert(document.documentElement.clientHeight);*//* 浏览器的可见宽度alert(document.body.clientWidth);alert(document.documentElement.clientWidth);*/</script>

0 0