jsorder基於jquery的購物車實現，實現訂單的本地cookie存儲
代碼一共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，提交方式 等。
$.fn.jsorder.defaults = { //作為訂單數據存儲的瀏覽器端全局變量，通過jquery綁定在
bodystaticname : 'jsorder', //訂單class，確保在頁面class唯一不重複，否則將導致錯誤
jsorderclass : 'jsorder', //是否保存cookie
savecookie : true, //cookie的名字
cookiename : 'jsorder', //ID前綴，暫時無用
numpre : 'no_', //訂單項前綴，用來區分不同的訂單項，頁面內必須不重複
jsorderpre : 'jsorder_', //觸發訂單控件的價格屬性
pricefiled : 'price', //觸發訂單控件的訂單名屬性
namefiled : 'jsordername', //購物車左側顯示
leftdemo : '我的菜單', //提交按鈕文字
subbuttom : '', //默認加入訂單的控件選擇
addbuttom : 'a.jsorderadd', //沒有訂單時顯示
nomessage : '你今天的食譜是還空的', //提交時觸發
dosubmit : function(data) {
$("body").append(JSON.stringify(data));
$("body").data(opts.staticname, {});
}
};
4.頁面代碼
1)樣式表及js
<link href="../css/order.css" rel="stylesheet"/>
<script type="text/javascript" src="../js/cookie.js" ></script>
<script type="text/javascript" src="../js/jsorder.js" ></script>
2）觸發控件配置
http://pic.yupoo.com/sinaweibo674506327/BDkwet4Q/medish.jpg
3）覆蓋默認配置項
$.fn.jsorder.defaults = {//修改觸發空間類型
addbuttom : 'td.jsorderadd',//修改提交方案
dosubmit : function(data) {
$("#result").html("json內容："+JSON.stringify(data)).css('background','#e0e0e0');
}
};
http://static.oschina.net/uploads/code/201112/31221517_MhCF.jpg
$.fn.jsorder.defaults = {
//作為訂單數據存儲的瀏覽器端全局變量，通過jquery綁定在body
staticname : 'jsorder',
//訂單class，確保在頁面class唯一不重複，否則將導致錯誤
jsorderclass : 'jsorder',
//是否保存cookie
savecookie : true,
//cookie的名字
cookiename : 'jsorder',
//ID前綴，暫時無用
numpre : 'no_',
//訂單項前綴，用來區分不同的訂單項，頁面內必須不重複
jsorderpre : 'jsorder_',
//觸發訂單控件的價格屬性
pricefiled : 'price',
//觸發訂單控件的訂單名屬性
namefiled : 'jsordername',
//購物車左側顯示
leftdemo : '我的菜單',
//提交按鈕文字
subbuttom : '',
//默認加入訂單的控件選擇
addbuttom : 'a.jsorderadd',
//沒有訂單時顯示
nomessage : '你今天的食譜是還空的',
//提交時觸發
dosubmit : function(data) {
$("body").append(JSON.stringify(data));
$("body").data(opts.staticname, {});
}
};
頁:
[1]