Today, I have nothing to do in the company. I suddenly thought of writing the front-end framework of the shopping cart of the mall. Of course, I only have to add, delete, modify, and query the shopping cart here. Maybe it is not so complete, but the most important thing is getting started. I also hope the js talents can give me some suggestions so that I can take a step further.
HOHO ~~~ Start:
Js:
Copy codeThe Code is as follows: // jquery is used instead of js ajax to save time. Of course, you can add it to jquery's extension method. Haha, I am too lazy, so I wrote it 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 = {
_ Infound: 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 ){
// Fill in the data in the shopping cart here
Var data = Jusoc. BLL. Shopping. GetData ();
// Create the entire shopping cart first.
Var html = "<table class = \" shoppingcart-list \ "id = \" sm \ ">" +
"<Tr>" +
"<Th>" +
"Books" +
"</Th>" +
"<Th>" +
"Title" +
"</Th>" +
"<Th>" +
"Unit price" +
"</Th>" +
"<Th>" +
"Quantity" +
"</Th>" +
"<Th>" +
"Operation" +
"</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 = \" Quantity Plus One \ "class = \" add \ "onclick = \" Jusoc. UI. shoppingCart. plus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ "> </span> <span" +
"Title = \" minus 1 \ "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 ){
// 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 = \" Quantity Plus One \ "class = \" add \ "onclick = \" Jusoc. UI. shoppingCart. plus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ "> </span> <span" +
"Title = \" minus 1 \ "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 ){
// Add or remove modifications 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. _ in1 ();
})()
Tips: The display page here is only a demo. You can customize it as needed.
HTML:Copy codeThe Code is as follows: <! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<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 ;}
. 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>
</Head>
<Body>
<Div id = "ltRight">
<H5 class = "htitle">
Shopping Cart
<Span style = "float: right; padding-right: 20px;"> total amount: ￥ <em id = "cart-total"> </em> </span>
</H5>
<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">
Modified successfully! </P>
<P>
The Total amount of your product is ￥ <span class = "c_red_s" id = "update_total_account"> @ Model. Total. ToString ("0.00") </span> RMB </p>
<P class = "t_c">
<A href = "javascript: void (0)" onclick = "comment ('your item-tip'}.css ('left', '-9999px');"> close </a> </p>
</Div>
<Div class = "c_ B">
</Div>
</Div>
<H5> <a href = "javascript: Jusoc. UI. ShoppingCart. Add (1, 1)"> Add one to Shopping Cart </a> </Div>
</Body>
</Html>
Ashx: It's not necessary for me to stick it out and write the amount based on my own business.
Conclusion: OK, OK !!
