纪念shop.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
		

		<link href="${contextPath}/css/shop/shop.css" type="text/css" rel="stylesheet"></link>
	<script>
			function depthMenuSelect(menuItem){
				var select=menuItem.siblings(".chooseli");
				if(select[0]){
					select.removeClass("chooseli");
					var selectDiv=jQuery("#"+select.attr("divId"));
					if(selectDiv[0]){
						selectDiv.hide();
					}
				}
				var divId=menuItem.attr("divId");
				menuItem.addClass("chooseli");
				if(jQuery("#"+divId)[0]){
					jQuery("#"+divId).show();
				}
			}
			jQuery(function(){
				var depthMenu=jQuery("#depthMenu");
				depthMenu.find("UL>LI").each(function(i,ele){
					jQuery(ele).click(function(){
						var menuItem=jQuery(this);
						depthMenuSelect(menuItem);
					});
					
				});
				depthMenuSelect(depthMenu.find("UL>LI:first-child"));
			});
				var firstLevelGoodsData; //记录下方一级分类及对应的商品数据 下方ajax对其赋值

				//根据传入的 分类信息和商品信息 和 li的catid，改变div#one内的数据
				function writeGoods(firstLevelGoodsData,li_cat_id){
					  for(var key in firstLevelGoodsData){
						  
							if(key == li_cat_id ){
								var innerShopHtml = "";
								for(var order in firstLevelGoodsData[key] ){
									var c = firstLevelGoodsData[key][order];
									innerShopHtml+="<div class=\"imgdivshop\">"
									+"<div class=\"imgitemshop\" style=\"text-align:center\">"
									+"<a href=\"${contextPath}/view.do?id="+c.id+"\"><img class=\"imgshow lazyloading\" data-original=\""+c.imageDefault+"\" height=\"150px\" width=\"148px\" ></a>"
									+"<h1>"+c.price+"</h1>"
									+"<a  href=\"${contextPath}/view.do?id="+c.id+"\" style=\" text-overflow: ellipsis;overflow:hidden;width:148px\">"+c.name+"</a><br>"
									+"</div></div>";	
									
									
								};
									$("div#one").append(innerShopHtml);
							};
						};
					  $("img.lazyloading").lazyload();

				}
				
				jQuery(function($){
					
					//获取一级分类及对应的商品信息
					$.ajax({
						  url: "${contextPath}/findfirstLevelGoods.do",
						  type:"GET",
						  cache:true,
						  success: function(data){
							  firstLevelGoodsData = data;
							  writeGoods(firstLevelGoodsData,$("div#depthMenu li:first").attr("catid"));
							  }
					});
					
				
				$("li[divid=one]").mouseenter(function(){
					$("div#catFloat").remove();
					$("div#one").children().remove();//清空shop区的显示内容
					var p = $(this);
					$("div#one").attr("catid", $(p[0]).attr("catid") );
					
					writeGoods(firstLevelGoodsData,$(p[0]).attr("catid"));
					
					
					
					$("#depthMenu").append("<div id=\"catFloat\" style=\"min-height:51px;\"></div>");
					$("#catFloat").append("<div id=\"catFloatOne\" style=\"min-height:37px;\"></div>");
					$("#catFloatOne").width(300).css({
						'backgroundColor':'#ffdddd',
						"borderStyle":" none none none solid",
						"borderWidth":"0px 0px 0px 3px",
						"borderColor":"black",
						"padding-top":"14px",
						"padding-left":"5px",
						"opacity":"0.92"
						
					});
					//对一级的浮层定位
					$("#catFloatOne").offset({top: p.offset().top ,left:p.offset().left+$($("#depthMenu li[divid=one]")[0]).outerWidth(true)});
					var innerHtml = "";
					$.ajax({
						  url: "${contextPath}//showCategory.do?catId="+$(p[0]).attr("catid")+"",
						  type:"GET",
						  cache:true,
						  success: function(data){
							  for(var key in data){
								  innerHtml += "<a style=\"font-size:14px;margin:0 5px 0 5px;\" catId=\""+data[key]['id']+"\" href=\"showGoodsByCategory.do?id="+data[key]['id']+"\">"+data[key]['catName']+"</a>";
							  }
							  $("#catFloatOne").html(innerHtml);
							  
							  
								//鼠标移动到链接上
								$("#catFloatOne").find("a").mouseenter(function(){
									$("#catFloatTwo").remove();
									
									var p2 = $(this);
									$("#catFloatOne").after("<div id=\"catFloatTwo\" style=\"min-height:37px;\"></div>");
									$("#catFloatTwo").width(300).css({
										'backgroundColor':'#ffdddd',
										"borderStyle":" none none none solid",
										"borderWidth":"0px 0px 0px 3px",
										"borderColor":"black",
										"padding-top":"14px",
										"padding-left":"5px",
										"opacity":"0.88"
										
									});
									var catFloatOne = $("#catFloatOne");
									//对二级的浮层定位
									$("#catFloatTwo").offset({top: catFloatOne.offset().top+catFloatOne.outerHeight(true) ,left:catFloatOne.offset().left}); 
									
									var innerHtmlTwo = "";
									$.ajax({
										  url: "${contextPath}//showCategory.do?catId="+$(p2[0]).attr("catId")+"",
										  type:"GET",
										  cache:true,
										  success: function(data){
											  
											  for(var key in data){
												  innerHtmlTwo += "<a style=\"font-size:14px;min-width:60px;margin:0 5px 0 5px;\" href=\"showGoodsByCategory.do?id="+data[key]['id']+"\">"+data[key]['catName']+"</a>";
											  }
											  $("#catFloatTwo").html(innerHtmlTwo);
											  
											  
										  }
									});
	
								});
							  
						  }
						}); 

					

					 //鼠标从二级分类移走
					
					$("#catFloat").mouseleave(function(){
						$("#catFloat").remove();
					});
				
				});
				
				
				
				 $("#depthMenu").mouseleave(function(){
					$("#catFloat").remove();
				});
				
				 $("img.lazyloading").lazyload();
			});
		</script>


		<div class="container">
			<div class="title">————————————— 明星商城  | Star Mall ————————————</div>
			<div style="margin-top: 8px;margin-bottom: 8px;">
				<img src="${contextPath}/images/ad.jpg" style="width: 100%;">
			</div>
			<div class="hr1" style="width:1050px;margin-left: -30px"></div>
			
			<div id="depthMenu" class="depthMenu" style=" float: left;width:150px; margin-top: 8px;">
				<ul style="font-family: 微软雅黑;border:1px solid #dcdcdc; border-left: none;border-right:none; margin-left: -7px;margin-top:-2px; background-color: #f7f7f7;">
					<c:forEach items="${catlist}" var="cat">
					<li divId="one" catid="${cat.id}">${cat.catName}</li>
					</c:forEach>
				</ul>
			</div>
			
			
			 <div id="one" style="float: left;width:840px" >
				
			</div> 
			
				
		</div> 
		<div class="cut"></div>