<%@ 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>
纪念shop.jsp
最新推荐文章于 2022-05-02 15:22:12 发布