jquery做的无限级菜单

/**
 *栏目树分级显示下拉菜单组件
 *作者：CandySunPlus 孙凤鸣
 *example:
 *var colObj2 = {"Items":[
 *				{"name":"菜单项目标题1","topid":"0","colid":"1","value":"菜单项目标题1","fun":function(){}},	
 *				...
 *				]}
 *$("#div").mlnColsel(colObj,{
 *				title:"栏目下拉菜单",
 *				value:"-1",
 *				width:100
 *			});
 *参数：topid 栏目所属，0为一级
 *		colid 栏目ID，0为一级
 *		fun 回调函数
 **/

 (function($){
	$.fn.mlnColsel=function(data,setting){
		var dataObj={"Items":[
			{"name":"mlnColsel","topid":"-1","colid":"-1","value":"-1","fun":function(){alert("undefined!");}}
		]};
		var settingObj={
			title:"请选择",
			value:"-1",
			width:100
		};
		settingObj=$.extend(settingObj,setting);
		dataObj=$.extend(dataObj,data);
		
		var $this=$(this);
		var $colselbox=$(document.createElement("a")).addClass("colselect").attr({"href":"javascript:;"});
		var $colseltext=$(document.createElement("span")).text(settingObj.title);
		var $coldrop=$(document.createElement("ul")).addClass("dropmenu");
		var selectInput = $.browser.msie?document.createElement("<input name="+$this.attr("id")+" />"):document.createElement("input");
 			selectInput.type="hidden";
 			selectInput.value=settingObj.value;
 			selectInput.setAttribute("name",$this.attr("id"));
		var ids=$this.attr("id");
		$this.onselectstart=function(){return false;};
		$this.onselect=function(){document.selection.empty()};
		$colselbox.append($colseltext);
		$this.addClass("colsel").append($colselbox).append($coldrop).append(selectInput);
		
		$(dataObj.Items).each(function(i,n){
			var $item=$(document.createElement("li"));
			if(n.topid==0 || n.topid=="0"){
				$coldrop.append($item);
				$item.html("<span>"+n.name+"</span>").attr({"values":n.value,"id":"col_"+ids+"_"+n.colid});
			}else{
				if($("#col_"+ids+"_"+n.topid).find("ul").length<=0){
					$("#col_"+ids+"_"+n.topid).append("<ul class=\"dropmenu rootmenu\"></ul>");
					$("#col_"+ids+"_"+n.topid).find("ul:first").append($item);
					$item.html("<span>"+n.name+"</span>").attr({"values":n.value,"id":"col_"+ids+"_"+n.colid});
				}else{
					$("#col_"+ids+"_"+n.topid).find("ul:first").append($item);
					$item.html("<span>"+n.name+"</span>").attr({"values":n.value,"id":"col_"+ids+"_"+n.colid});
				}
			}			
		});
		
		$this.find("li").each(function(){
			$(this).click(function(event){
				$colselbox.children("span").text($(this).find("span:first").text());
				$(selectInput).val($(this).attr("values"));
				hideMenu();
				event.stopPropagation();
			});
			if($(this).find("ul").length>0){
				$(this).addClass("menuout");
				$(this).hover(function(){
						$(this).removeClass("menuout");
						$(this).addClass("menuhover");
						$(this).find("ul:first").fadeIn("fast")
						var rootdom = $(this);
						var offset = rootdom.offset();
						var rootLeft=offset.left+141;
						var childWidth=$(document).width()-rootLeft;			
						if(childWidth<141){
							$this.childPath="left"
							$(this).find("ul:first").css({"left":-100+"px"});
						}else{
							$this.childPath="right"	
							$(this).find("ul:first").css({"left":100+"px"});
						}
						
					},function(){
						$(this).removeClass("menuhover");
						$(this).addClass("menuout");
						$(this).find("ul").each(function(){
							$(this).fadeOut("fast");
					});
				});
			}else{
				$(this).addClass("norout");
				$(this).hover(function(){
					$(this).removeClass("norout");
					$(this).addClass("norhover");
					},function(){
					$(this).removeClass("norhover");
					$(this).addClass("norout");
				});
			}
		});
		
		function hideMenu(){
			$this.bOpen=0;
			$(".rootmenu").hide();
			$coldrop.slideUp("fast");
			$(document).unbind("click",hideMenu);
		}
		function openMenu(){
			$coldrop.slideDown("fast");
			$this.bOpen=1;
		}
		$colselbox.click(function(event){
			$(this).blur();
			if($this.bOpen){
				hideMenu();
			}else{
				openMenu();
				$(document).bind("click",hideMenu);
			}
			event.stopPropagation();
		});
		
		$(".rootmenu").each(function(){
			if($.browser.msie){
				$(this).css({"margin-top":"-6px","top":"auto"});
			}else{
				$(this).css({"margin-top":"-25px","top":"auto"});
			}
		});	
	}
 })(jQuery);

 

 

评论

1 楼 liuzejian4 2011-04-29  

帅哥，没有css 呀