jsorder基於jquery的購物車實現，實現訂單的本地cookie存儲

woff

代碼一共6k,基於jquery的購物車實現，實現訂單的本地cookie存儲，支持購物車自定義樣式，金額的計算。通過json與後台交互。實現可配置化的購物車系統，可應用於電子商務平台。
1.下載地址：http://code.google.com/p/jsorder/downloads/list

2.demo地址：http://wuzhi.me/jsorderdemo.php

文檔地址：http://wuzhi.me/?p=33
3.配置說明： jsorder 支持多參數配置，自定義購物車樣式，設置是否記錄cookie，提交方式 等。

1. 
   
2. $.fn.jsorder.defaults = { //作為訂單數據存儲的瀏覽器端全局變量，通過jquery綁定在  
   
3.   body  staticname : 'jsorder', //訂單class，確保在頁面class唯一不重複，否則將導致錯誤  
   
4.   jsorderclass : 'jsorder', //是否保存cookie
   
5.   savecookie : true, //cookie的名字
   
6.   cookiename : 'jsorder', //ID前綴，暫時無用
   
7.   numpre : 'no_', //訂單項前綴，用來區分不同的訂單項，頁面內必須不重複
   
8.   jsorderpre : 'jsorder_', //觸發訂單控件的價格屬性
   
9.   pricefiled : 'price', //觸發訂單控件的訂單名屬性
   
10.   namefiled : 'jsordername', //購物車左側顯示
    
11.   leftdemo : '我的菜單', //提交按鈕文字
    
12.   subbuttom : '', //默認加入訂單的控件選擇
    
13.   addbuttom : 'a.jsorderadd', //沒有訂單時顯示
    
14.   nomessage : '你今天的食譜是還空的', //提交時觸發
    
15.   dosubmit : function(data) {
    
16.     $("body").append(JSON.stringify(data));
    
17.     $("body").data(opts.staticname, {});
    
18.   }
    
19. };

複製代碼

4.頁面代碼
1)樣式表及js

1. 
   
2. <link href="../css/order.css" rel="stylesheet"/>
   
3. <script type="text/javascript" src="../js/cookie.js" ></script>
   
4. <script type="text/javascript" src="../js/jsorder.js" ></script>

複製代碼

2）觸發控件配置

3）覆蓋默認配置項

1. 
   
2. $.fn.jsorder.defaults = {//修改觸發空間類型         
   
3.   addbuttom : 'td.jsorderadd',//修改提交方案
   
4.   dosubmit : function(data) {   
   
5.     $("#result").html("json內容："+JSON.stringify(data)).css('background','#e0e0e0');  
   
6.   }
   
7. };

複製代碼

1. $.fn.jsorder.defaults = {
   
2. //作為訂單數據存儲的瀏覽器端全局變量，通過jquery綁定在body
   
3. staticname : 'jsorder',
   
4. //訂單class，確保在頁面class唯一不重複，否則將導致錯誤
   
5. jsorderclass : 'jsorder',
   
6. //是否保存cookie
   
7. savecookie : true,
   
8. //cookie的名字
   
9. cookiename : 'jsorder',
   
10. //ID前綴，暫時無用
    
11. numpre : 'no_',
    
12. //訂單項前綴，用來區分不同的訂單項，頁面內必須不重複
    
13. jsorderpre : 'jsorder_',
    
14. //觸發訂單控件的價格屬性
    
15. pricefiled : 'price',
    
16.          //觸發訂單控件的訂單名屬性
    
17.          namefiled : 'jsordername',
    
18.          //購物車左側顯示
    
19.         leftdemo : '我的菜單',
    
20.          //提交按鈕文字
    
21.         subbuttom : '',
    
22.          //默認加入訂單的控件選擇
    
23.         addbuttom : 'a.jsorderadd',
    
24.          //沒有訂單時顯示
    
25.         nomessage : '你今天的食譜是還空的',
    
26.          //提交時觸發
    
27.         dosubmit : function(data) {
    
28.                 $("body").append(JSON.stringify(data));
    
29.                 $("body").data(opts.staticname, {});
    
30.         }
    
31. };

複製代碼