自定义菜单

最新推荐文章于 2024-06-03 15:42:37 发布

y_y_y3313

最新推荐文章于 2024-06-03 15:42:37 发布

阅读量558

点赞数

分类专栏： jquery插件文章标签： jQuery

本文链接：https://blog.csdn.net/y_y_y3313/article/details/12752771

版权

jquery插件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
.menu{ position:absolute; width:100px; border:1px solid #ccc; border-bottom:none; background:#fff}
.menu a{ display:block; padding:5px; border-bottom:1px solid #ccc}



</style>

</head>

<body>

<div class="dd" style="width:1000px; height:600px; background:#fff; border:1px solid red">ddddd</div>



<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">

jQuery.fn.menu = function () {
	var _item=$(this),_menu={};
	
	var muneHtmlStr='<div class="menu"><a href="javascript:void(0)" id="m1">菜单一</a><a href="javascript:void(0)" id="m2">菜单二</a><a href="javascript:void(0)" id="m3">菜单三</a></div>'
	_item.append($(muneHtmlStr).hide());
	_menu=$(".menu");
	 setEven(_menu.find("a"));
	
	$(document).click(function(){
		
		_menu.hide();
		});
	
	_item.css(" position","relative");
	_item.bind("contextmenu",function(){return false;});  
	_item.mousedown(function(e){ 
       if(3 == e.which){
		   getPosition(e,_menu);
		  
		  if(_menu.css("display")=="none"){
			  _menu.show()
			  
			  }
		  
		   } 	
	});
	
	
	//为menu定位
	function getPosition(e,menuWrap){
		
		var _itemOffset=_item.offset();
		var _top=e.pageY-_itemOffset.top;
		var _left=e.pageX-_itemOffset.left;
		
        menuWrap.css({"top":_top,"left":_left});
		
		}
	//even
	function setEven(menuList){
		menuList.live("click",function(){
			
			alert("你点击了"+$(this).text());
			
			});
		
		
		}
	
		
		
	
	
	
	
	
	}

$(function(){
	$(".dd").menu();
	
	});



</script>

</body>
</html>