<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@taglib uri="/struts-tags" prefix="s" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>淘淘乐</title>
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<link href="css/ui-lightness/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/jquery-ui-1.10.3.custom.js"></script>
<script type="text/javascript" src="js/list.js"></script>
<style type="text/css">
#table1 td{width: 100px;}
</style>
</head>
<body>
<center>
<table>
<tr>
<td>
<div id="tabs" style="width: 450px;">
<ul>
<li><a href="#tabs-1">商品列表</a></li>
</ul>
<div id="tabs-1">
<s:iterator value="#request.prolist" var="pro">
<table style="text-align:center; display:inline;">
<tr><td>
<input type="hidden" value='${pro.proId }'>
<img src="img/${pro.proImg}" width="120px" height="120px">
</td></tr>
<tr><td>${pro.proName}</td></tr>
<tr><td>￥${pro.proPrice}</td></tr>
</table>
</s:iterator>
</div>
</div>
</td>
<td valign="top">
<div style="border: 1px solid black;width:200px;height:420px;padding: 10px;">
<div style="text-align: left"><b>我的购物车</b></div>
<div id="cartDiv" style="height: 376px;margin-top: 10px;">
<table id="table1" cellpadding="0" cellspacing="0">
<s:iterator value="#session.cart.products" var="pro" status="i">
<tr>
<td style='width:10px;'>${i.count}、</td>
<td style='width:80px;text-align: left'>${pro.proName }</td>
<td style='width:50px;'>${pro.bycount }</td>
<td><a href="javascript:void(0)" οnclick="deletepro(this,${pro.proId})">删除</a></td>
</tr>
</s:iterator>
</table>
</div>
<div style="text-align:right;"><a href="showCart.jsp">查看购物车</a></div>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>
$(function(){
$("#tabs").tabs();
$("#tabs-1 table").draggable({
helper:"clone",
opacity:0.5
});
$("#cartDiv").droppable({
drop:function(enver,ui){
var id=ui.draggable.find("td:eq(0) input").val();
var name=ui.draggable.find("td:eq(1)").html();
var bool=false;
$("#cartDiv tr").each(
function(index,lement)
{
if($(lement).find("td:eq(1)").html()==name){
bool=true;
}
});
if(bool){
$("#cartDiv tr").each(function(index,lement){
if($(lement).find("td:eq(1)").html()==name){
var td=$(this).find("td:eq(2)");
td.html(parseInt(td.html())+1);
}
});
}else{
var html="<tr><td style='width:10px;'>"+($("#cartDiv tr").size()+1)+"、</td>";
html+="<td style='width:80px;text-align: left'>"+name+"</td>";
html+="<td style='width:50px;'>1</td>";
html+="<td><a href='#' οnclick='deletepro(this,"+id+")'>删除</a></td>";
html+="</tr>";
$("#cartDiv table").append(html);
}
$.post("product!add","proId="+id);
}
});
});
function deletepro(elment,proid)
{
alert(proid+'remove'+elment);
if(parseInt($(elment).parent().prev().html())>1){
var td=$(elment).parent().prev();
td.html(parseInt(td.html())-1);
}else{
$(elment).parent().parent().remove();
}
$.post("product!remove","proId="+proid);
}