There's really nothing to do at the company today, suddenly thought to write down the mall shopping cart front-end framework, of course, I only have the shopping cart additions and deletions to check, perhaps write is not so perfect, but the most important is a primer, but also hope that JS talent to give some advice, so that I have a higher level.
In order to save trouble, did not write their own JS Ajax use of jquery, of course, you can add to the jquery extension method, haha, I am too lazy, so write here.
var _$ = {ajax:function (urlparm, D, Beforecall, Successcall) {
$.ajax ({
URL: "Ashx/ajax_shoppingcart.ashx?" + Urlparm,
Data:d,
DataType: "Json",
Type: "POST",
Before:beforecall,
Success:successcall
});
}
};
(function () {
var jusoc = {};
JUSOC = {
_inital:function () {window. JUSOC = JUSOC; },
Base: {},
DAO: {},
BLL: {},
UI: {}
}
Jusoc.base = {
Validate: {
}
}
AJAX ()
Jusoc.dao = {
Shopping: {
Get:function (Beforecall, Successcall) {
_$. AJAX ("Action=get", NULL, Beforecall, Successcall);
},
Remove:function (PID, Beforecall, Successcall) {
_$. AJAX ("Action=remove", {"pid": pid}, Beforecall, Successcall);
},
Add:function (PID, Pcount, Beforecall, Successcall) {
_$. AJAX ("Action=add", {"pid": PID, "Pcount": Pcount}, Beforecall, Successcall);
},
Set:function (PID, Pcount, Beforecall, Successcall) {
_$. AJAX ("Action=set", {"pid": PID, "Pcount": Pcount}, Beforecall, Successcall);
}
}
}
JUSOC.BLL = {
Shopping: (function () {
var Data = null;
var islock = false;
var _successcall = null;
var _beforecall = null;
function Unlock () {
Islock = false;
}
function Lock () {
Islock = true;
if (Data&&data!=null)
{
Data = null;
}
}
function Callbackfunction (XHR) {
Unlock ();
if (xhr[0] = = "ERROR") {
Alert (xhr[1]);
Return
// }
else if (xhr[0] = = "SUCCESS") {
Jusoc.BLL.Shopping.SetData (xhr[1]);
// }
Jusoc.BLL.Shopping.SetData (XHR);
if (_successcall!= null && _successcall) {
_successcall.call (window, XHR);
}
_successcall = null;
}
function Preparerequst (Beforecall, Successcall) {
if (Islock) {
return false;
}
Lock ();
if (Beforecall!= null && beforecall) {
_beforecall = Beforecall;
}
if (Successcall!= null && successcall) {
_successcall = Successcall;
}
}
return {
Get:function (Beforecall, Successcall) {
if (Preparerequst (Beforecall, Successcall) ==false) return false;
Jusoc.DAO.Shopping.Get (_beforecall, callbackfunction);
},
Remove:function (PID, Beforecall, Successcall) {
if (Preparerequst (Beforecall, Successcall) ==false) return false;
Jusoc.DAO.Shopping.Remove (PID, _beforecall, callbackfunction);
},
Set:function (PID, Pcount, Beforecall, Successcall) {
if (Preparerequst (Beforecall, Successcall) ==false) return false;
Jusoc.DAO.Shopping.Set (PID, Pcount, Beforecall, callbackfunction);
},
Add:function (PID, Pcount, Beforecall, Successcall) {
if (Preparerequst (Beforecall, Successcall) ==false) return false;
JUSOC.DAO.SHOPPING.ADD (PID, Pcount, _beforecall, callbackfunction);
},
Getdata:function () {
alert (Data);
return Data;
},
Setdata:function (data) {data = data},
Removedata:function () {
if (data!= null && data)
Data= null;
}
}
})(),
XHR: {
}
}
Jusoc.ui = {
ShoppingCart: (function () {
function Constract () {
Jusoc.BLL.Shopping.Get (Null,setshoppingcart);
}
function Setshoppingcart (data) {
Here to populate the data in the shopping cart
var data = Jusoc.BLL.Shopping.GetData ();
This is where you build the entire shopping cart first.
var html = "<table class=\" shoppingcart-list\ "id=\" sm\ ">" +
"<tr>" +
"<th>" +
"Book ah" +
"</th>" +
"<th>" +
"title" +
"</th>" +
"<th>" +
"Unit Price" +
"</th>" +
"<th>" +
"Quantity" +
"</th>" +
"<th>" +
"Action" +
"</th>" +
"</tr>";
for (var i =0;i<data.length;i++)
{
html = "<tr>" +
"<td>" +
"<img src=\" ss\ "height=\" 36px\ "width=\" 28px\ "/>" +
"</td>" +
"<td>" +
Data[i]. name+
"</td>" +
"<td>" +
"￥" +data[i]. money+
"</td>" +
"<td>" +
"<div class=\" item-change\ ">" +
"<input type=\" text\ "value= '" +data[i]. count+ "'/>" +
"<span title=\" number plus one \ "class=\" add\ "onclick=\" Jusoc.UI.ShoppingCart.Plus (1,this.parentnode.childnodes[0].value , this.parentnode.childnodes[0]) \ "></span> <span" +
"Title=\" quantity minus one \ "class=\" cut\ "onclick=\" Jusoc.UI.ShoppingCart.Minus (1,this.parentnode.childnodes[0].value, This.parentnode.childnodes[0]) \ "></span>" +
"</div>" +
"</td>" +
"<td>" +
"<span class=\" removelink\ "onclick=\" Jusoc.UI.ShoppingCart.Remove (1,this.parentnode.parentnode) \ ">remove From cark</span> "+
"</td>" +
"</tr>";
}
html+= "</table>";
document.body.innerhtml+=html;
}
function Addtopanel (data) {
This is to add a product to the shopping cart to modify the foreground style
var obj = document.getElementById ("SM");
var html = "<td>" +
"<img src=\" soo\ "height=\" 36px\ "width=\" 28px\ "/>" +
"</td>" +
"<td>" +
Data. name+
"</td>" +
"<td>" +
"￥" +data. money+
"</td>" +
"<TD >" +
"<div class=\" item-change\ ">" +
"<input type=\" text\ "value= '" +data. count+ "'/>" +
"<span title=\" number plus one \ "class=\" add\ "onclick=\" Jusoc.UI.ShoppingCart.Plus (1,this.parentnode.childnodes[0].value , this.parentnode.childnodes[0]) \ "></span> <span" +
"Title=\" quantity minus one \ "class=\" cut\ "onclick=\" Jusoc.UI.ShoppingCart.Minus (1,this.parentnode.childnodes[0].value, This.parentnode.childnodes[0]) \ "></span>" +
"</div>" +
"</td>" +
"<td>" +
"<span class=\" removelink\ "onclick=\" Jusoc.UI.ShoppingCart.Remove (1,this.parentnode.parentnode) \ ">remove From cark</span> "+
"</td>";
var row = Obj.insertrow (1);
row.innerhtml = html;
Return
obj.childnodes[0].innerhtml + + html;
}
function UpdatePanel (obj, count) {
Here is the increase or decrease in the change operation from the shopping cart
Obj.value = count;
}
function Removefrompanel (Child)
{
var obj = document.getElementById ("SM");
Obj.childnodes[0].removechild (child);
}
return {
Pageload:function () {
Constract ();
},
Add:function (PID, Pcount) {
JUSOC.BLL.SHOPPING.ADD (Pid,pcount, NULL, Addtopanel);
},
Plus:function (PID, Pcount, obj) {
Pcount = parseint (pcount) + 1;
Jusoc.BLL.Shopping.Set (PID, Pcount, function () {alert ("before")}, function (data) {UpdatePanel (obj, Pcount)});
},
Minus:function (pid,pcount,obj) {
Pcount = parseint (pcount)-1;
Jusoc.BLL.Shopping.Set (pid,pcount,null,function (data) {UpdatePanel (Obj,pcount)});
},
Remove:function (pid,obj) {
Jusoc.BLL.Shopping.Remove (pid,null,function (data) {Removefrompanel (obj);});
}
}
})()
}
Jusoc._inital ();
})()
Tips: Here the Display page is only demo, if necessary, you can customize.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<style type= "Text/css" >
*{margin:0; padding:0;border:0}
Body{font-size:. 85em;font-family:verdana,helvetica,simsun,arial, "Arial Unicode MS", Mingliu,pmingliu, "MS Gothic", Sans-serief;color: #232323; text-align:center; font-size:12px; Background-color: #fff;}
#ltRight {width:722px;float:left;position:relative;padding:16px 40px;text-align:left}
/*shoppingcart-list*/
. shoppingcart-list{border:1px solid #C2D8ED; Border-collapse:collapse;color: #666666; width:750px;}
. shoppingcart-list th{background-color: #F1F7F9; color: #666; font-size:13px;text-align:center;}
. shoppingcart-list tr{border:1px solid #C2D8ED; line-height:25px;text-align:center;}
. shoppingcart-list tr:hover{background-color: #fff;}
th, td{padding-left:5px;}
. item-change{font:12px/74px arial;text-align:center;width:58px;padding:28px 0 0 25px;height:46px;}
. item-change input{width:36px;height:19px;border:1px solid #C4C4C4; background:white;float:left;margin-top:1px; text-align:center;line-height:19px;margin-right:1px;font-size:12px;}
. Item-change span{width:17px;height:8px;float:left;display:block;margin-top:1px;font-size:0;line-height:0; border:1px solid #C9C9C9; text-indent: -9999px; Cursor:pointer}
. Item-change. Add{background:url (images/leftmenu/icon_cart.gif) no-repeat 6px-58px;
. Item-change. Cut{background:url (images/leftmenu/icon_cart.gif) no-repeat 6px-67px;
. Box_window {WIDTH:204PX;POSITION:ABSOLUTE;LEFT:-9999PX}
. Box_window. updatetip{width:184px;border:solid 1px #DFC9B2; Background-color: #FDF2E3; line-height:20px;padding: 11px 8px 8px;}
. t_c {Text-align:center}
. c_red_s {color: #C30; font-weight:bold;}
. Box_window. c_b {width:9px;height:6px;margin:0 auto;background:url (images/leftmenu/p_window_b.gif) no-repeat; Position:relative;margin-top: -1px;font-size:0;overflow:hidden;}
. removelink{Cursor:pointer}
</style>
<script src= ". /js/jquery-1.6.js "type=" Text/javascript "></script>
<script src= "Js/base. Jusoc.js "type=" Text/javascript "></script>
<script type= "Text/javascript" >
Window.onload =function () {
Jusoc.UI.ShoppingCart.PageLoad ();
}
</script>
<body>
<div id= "Ltright" >
Shopping Cart
<span style= "float:right; padding-right:20px; " > Total Amount: ￥<em id= "Cart-total" ></em></span>
<div id= "Update-message" style= "text-align:left; text-indent:48px; Font-weight:bold;
padding:6px; " >
</div>
<div id= "Item-tip" class= "Box_window" >
<div class= "Updatetip" >
<p class= "T_c" >
Modification Successful! </p>
<p>
The total amount of your merchandise is ￥<span class= "c_red_s" id= "Update_total_account" > @Model. Total.tostring ("0.00") </span> Meta </p >
<p class= "T_c" >
<a href= "javascript:void (0)" onclick= "$ (' #item-tip '). CSS (' left ', ' -9999px '); > Close </a></p>
</div>
<div class= "C_b" >
</div>
</div>
</div>
</body>
ASHX: This I will not be necessary to paste out the wood, according to their own business to write the amount.
