步骤5、jQuery部分设计
我们首先要引入相关的jQuery文件，如下：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script><script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script> <!-- the jQuery simpletip plugin --><script type="text/javascript" src="script.js"></script> 同时，我们要编写自己的script.js文件，在这个文件中，我们使用了jQuery的toolstip控件：
var purchased=new Array(); //该数组包含了用户购买的商品 var totalprice=0; //商品总价
$(document).ready(function(){
$('.product').simpletip({ //使用simpletip控件
$( offset:[40,0], content:'<img style="margin:10px;" src="img/ajax_load.gif" alt="loading" />', onShow: function(){ var param = this.getParent().find('img').attr('src'); // 修复IE6的问题 if($.browser.msie && $.browser.version=='6.0') { param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/); param = param[1];
} // 通过ajax方式加载tips.php文件 this.load('ajax/tips.php',{img:param}); } }); $(".product img").draggable({ // 允许所有商品图片能拖拽 containment: 'document', opacity: 0.6, revert: 'invalid', helper: 'clone', zIndex: 100 }); $("div.content.drop-here").droppable({ // 当商品被拖拉到购物车区域时触发 drop: function(e, ui) { var param = $(ui.draggable).attr('src'); // 修复IE 6下的问题 if($.browser.msie && $.browser.version=='6.0') { param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/); param = param[1]; } addlist(param); //调用addlist方法 } });
}); 接下来看addlist方法的编写，其中都提供了详细的注释：function addlist(param){ $.ajax({ // ajax方法调用 addtocart.php type: "POST", url: "ajax/addtocart.php", data: 'img='+encodeURIComponent(param), // the product image as a parameter dataType: 'json', // JSON形式调用//在调用前，显示加载的小图标 beforeSend: function(x){$('#ajax-loader').css('visibility','visible');}, //调用成功时的回调方法 success: function(msg){//调用成功后，隐藏等待加载的小图标 $('#ajax-loader').css('visibility','hidden'); // hiding the loading gif animation//如果有出错 if(parseInt(msg.status)!=1) { return false; } else { var check=false; var cnt = false;//检查某个商品是否已经在购物车中存在了 for(var i=0; i<purchased.length;i++) { if(purchased[i].id==msg.id) { check=true; cnt=purchased[i].cnt; break; } } if(!cnt) $('#item-list').append(msg.txt); if(!check) //如果该商品是新购买商品，购物车中不存在，则purchased数组中增加相关产品 { purchased.push({id:msg.id,cnt:1,price:msg.price}); } else // 如果购物车中已经有该商品，则数量增加 {// 这里设置每样商品只能买3件，当然大家可以修改 if(cnt>=3) return false; //增加购物车中显示的数量 purchased[i].cnt++;//设置数量下拉框中的数量 $('#'+msg.id+'_cnt').val(purchased[i].cnt); } totalprice+=msg.price; // 重新计算总价格 update_total(); // 修改总价格 } $('.tooltip').hide(); // 隐藏商品的介绍 } });}//帮助工具类，找出当前产品在purchased数组中的位置function findpos(id) { for(var i=0; i<purchased.length;i++) { if(purchased[i].id==id) return i; } return false;}//将商品从购物车中移除function remove(id) {//找出其在数组中的位置 var i=findpos(id); totalprice-=purchased[i].price*purchased[i].cnt; //更新总价格 purchased[i].cnt = 0; // reset the counter设置purchased数组中，该商品的数量为0 $('#table_'+id).remove(); //在购物车列表中删除该项目 update_total(); }//当用户点每个商品的下拉框，改变数量时触发该方法function change(id) { var i=findpos(id);//更新总价格 totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price; purchased[i].cnt=parseInt($('#'+id+'_cnt').val()); update_total();}//计算当前购物车中的货品总价格function update_total() { if(totalprice) {//如果买了商品，显示总价格标签文本 $('#total').html('total: $'+totalprice); $('a.button').css('display','block'); } else // 如果没购买商品，不显示总价格标签文本 { $('#total').html(''); $('a.button').hide(); }}最后，我们可以运行看到相关效果：
效果可以在这个地址看到：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php
相关代码下载：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.zip
