思洋互动网站建设学前班

步骤5 jQuery部分设计

我们首先要引入相关的jQuery文件，如下：

1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>  
2. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>  
3. <script type="text/javascript" src="simpletip/jquery.simpletip-1.3.1.pack.js"></script> <!-- the jQuery simpletip plugin -->  
4. <script type="text/javascript" src="script.js"></script>  

同时，我们要编写自己的script.js文件，在这个文件中，我们使用了jQuery的toolstip控件：
广州网站建设,网站建设,广州网页设计,广州网站设计

1. var purchased=new Array();    //该数组包含了用户购买的商品  
2.  
3.  var totalprice=0;    //商品总价  
4. $(document).ready(function()...{  
5.  
6.     $('.product').simpletip(...{    //使用simpletip控件  
7.         offset:[40,0],  
8.         content:'<img style="margin:10px;" src="img/ajax_load.gif" alt="loading" />',      
9.  
10.         onShow: function()...{  
11.  
12.             var param = this.getParent().find('img').attr('src');  
13.             // 修复IE6的问题  
14.             if($.browser.msie && $.browser.version=='6.0')  
15.             ...{  
16.                 param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);  
17.                 param = param[1];  
18.             }  
19.  
20.             // 通过ajax方式加载tips.php文件  
21.             this.load('ajax/tips.php',...{img:param});  
22.         }   
23.  
24.     });  
25.  
26.     $(".product img").draggable(...{    // 允许所有商品图片能拖拽  
27.  
28.     containment: 'document',  
29.     opacity: 0.6,  
30.     revert: 'invalid',  
31.     helper: 'clone',  
32.     zIndex: 100  
33.  
34.     });  
35.  
36.     $("div.content.drop-here").droppable(...{    // 当商品被拖拉到购物车区域时触发  
37.  
38.             drop:  
39.                 function(e, ui)  
40.                 ...{  
41.                     var param = $(ui.draggable).attr('src');  
42.                     // 修复IE 6下的问题  
43.                     if($.browser.msie && $.browser.version=='6.0')  
44.                     ...{  
45.                         param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);  
46.                         param = param[1];  
47.                     }  
48.  
49.                     addlist(param);    //调用addlist方法  
50.                 }  
51.  
52.     });  
53.  
54. });  
55.    接下来看addlist方法的编写，其中都提供了详细的注释：  
56. function addlist(param)  
57. ...{  
58.       
59.  
60.     $.ajax(...{    // ajax方法调用 addtocart.php  
61.     type: "POST",  
62.     url: "ajax/addtocart.php",  
63.     data: 'img='+encodeURIComponent(param),    // the product image as a parameter  
64.     dataType: 'json',    // JSON形式调用  
65.  
66. //在调用前，显示加载的小图标  
67.     beforeSend: function(x)...{$('#ajax-loader').css('visibility','visible');},      
68. //调用成功时的回调方法  
69.     success: function(msg)...{  
70.  
71. //调用成功后，隐藏等待加载的小图标  
72.         $('#ajax-loader').css('visibility','hidden');    // hiding the loading gif animation  
73. //如果有出错  
74.         if(parseInt(msg.status)!=1)  
75.         ...{  
76.             return false;            }  
77.         else 
78.         ...{  
79.             var check=false;  
80.             var cnt = false;  
81.  
82. //检查某个商品是否已经在购物车中存在了  
83.             for(var i=0; i<purchased.length;i++)  
84.             ...{  
85.                 if(purchased[i].id==msg.id)                    ...{  
86.                     check=true;  
87.                     cnt=purchased[i].cnt;  
88.  
89.                     break;  
90.                 }  
91.             }  
92.  
93.             if(!cnt)      
94.                 $('#item-list').append(msg.txt);  
95.  
96.             if(!check)    //如果该商品是新购买商品，购物车中不存在，则purchased数组中增加相关产品  
97.             ...{  
98.                 purchased.push(...{id:msg.id,cnt:1,price:msg.price});  
99.             }  
100.  
101.             else    // 如果购物车中已经有该商品，则数量增加  
102.  
103.             ...{  
104. // 这里设置每样商品只能买3件，当然大家可以修改  
105.                 if(cnt>=3) return false;      
106.  
107. //增加购物车中显示的数量  
108.                 purchased[i].cnt++;  
109.  
110. //设置数量下拉框中的数量  
111.                 $('#'+msg.id+'_cnt').val(purchased[i].cnt);      
112.  
113.             }  
114.  
115.             totalprice+=msg.price;    // 重新计算总价格  
116.             update_total();    // 修改总价格  
117.  
118.         }  
119.  
120.         $('.tooltip').hide();    // 隐藏商品的介绍  
121.     }  
122.     });  
123. }  
124.  
125.  
126. //帮助工具类，找出当前产品在purchased数组中的位置  
127. function findpos(id)      
128. ...{  
129.     for(var i=0; i<purchased.length;i++)  
130.     ...{  
131.         if(purchased[i].id==id)  
132.             return i;  
133.     }  
134.  
135.     return false;  
136. }  
137.  
138. //将商品从购物车中移除  
139. function remove(id)      
140. ...{  
141. //找出其在数组中的位置  
142.     var i=findpos(id);      
143.  
144.     totalprice-=purchased[i].price*purchased[i].cnt;    //更新总价格  
145.     purchased[i].cnt = 0;    // reset the counter设置purchased数组中，该商品的数量为0  
146.  
147.     $('#table_'+id).remove();    //在购物车列表中删除该项目  
148.     update_total();      
149. }  
150.  
151.  
152. //当用户点每个商品的下拉框，改变数量时触发该方法  
153. function change(id)       
154. ...{  
155.     var i=findpos(id);  
156.  
157. //更新总价格  
158.     totalprice+=(parseInt($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;  
159.  
160.     purchased[i].cnt=parseInt($('#'+id+'_cnt').val());  
161.     update_total();  
162. }  
163.  
164.  
165. //计算当前购物车中的货品总价格  
166. function update_total()      
167.  
168. ...{  
169.     if(totalprice)  
170.     ...{  
171. //如果买了商品，显示总价格标签文本  
172.         $('#total').html('total: $'+totalprice);            $('a.button').css('display','block');  
173.     }  
174.     else    // 如果没购买商品，不显示总价格标签文本  
175.     ...{  
176.         $('#total').html('');  
177.         $('a.button').hide();  
178.     }  
179. } 

最后，我们可以运行看到相关效果：

效果可以在这个地址看到：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php

相关代码下载：http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.zip
广州网站建设,网站建设,广州网页设计,广州网站设计