jQuery - Checkout.js-alljchome-开发者的教程家园

jQuery Tutorial
jQuery DOM Manipulation
jQuery CSS Manipulation
jQuery Effects
jQuery Traversing
jQuery UI
jQuery References
jQuery - Utilities
jQuery Plugins
jQuery Useful Resources
Selected Reading
jQuery - Checkout.js
Checkout.js is a jQuery plugin for easy to implementation of check out for e-commerce websites.
A Simple of checkout.js example as shown below −
<html xmlns = "https://www.w3.org/1999/xhtml">
   <head>
      <meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
      <title>Untitled Document</title>
      <script type = "text/javascript" src = "jquery-1.3.2.js"></script>
      <script type = "text/javascript" src = "jquery.pvequery.js"></script>
      <pnk href = "css.css" rel = "stylesheet" />
		
      <script type = "text/javascript">

         $(document).ready(function() {
	         var Arrays = new Array();
            $( #wrap p ).mousemove(function(){
               var position = $(this).position();
               $( #cart ).stop().animate({
                  left   : position.left+ px ,
               },250,function(){
               });			
            }).mouseout(function(){
            });	

            $( #wrap p ).cpck(function(){
               var thisID = $(this).attr( id );
               var itemname  = $(this).find( span .name ).html();
               var itemprice = $(this).find( span .price ).html();

               if(include(Arrays,thisID)){
                  var price = $( #each- +thisID).children(".shopp-price").
                     find( em ).html();
                  var quantity = $( #each- +thisID).children(".shopp-quantity").html();
                  quantity = parseInt(quantity)+parseInt(1);
                  var total = parseInt(ite mprice)*parseInt(quantity);

                  $( #each- +thisID).children(".shopp-price").
                     find( em ).html(total);
                  $( #each- +thisID).children(".shopp-quantity").html(quantity);

                  var prev_charges = $( .cart-total span ).html();
                  prev_charges = parseInt(prev_charges)-parseInt(price);
                  prev_charges = parseInt(prev_charges)+parseInt(total);
                  
                  $( .cart-total span ).html(prev_charges);
                  $( #total-hidden-charges ).val(prev_charges);
               } else {
                  Arrays.push(thisID);
                  var prev_charges = $( .cart-total span ).html();
                  prev_charges = parseInt(prev_charges)+parseInt(itemprice);

                  $( .cart-total span ).html(prev_charges);
                  $( #total-hidden-charges ).val(prev_charges);

                  $( #left_bar .cart-info ).append( 
                     <span class = "shopp" id = "each- +thisID+ ">
                        <span class = "label"> +itemname+ </span>
                        <span class = "shopp-price"> 
                           $<em> +itemprice+ </em></span>
                        <span class = "shopp-quantity">1</span>
                        <img src = "remove.png" class = "remove" />
                        <br class = "all" />
                     </span> );

                  $( #cart ).css({ -webkit-transform  :
                      rotate(20deg) , -moz-transform  :  rotate(20deg)  });
               }

               setTimeout( angle() ,200);
            });	
            $( .remove ).pvequery( cpck , function() {
               var deduct = $(this).parent().children(".shopp-price").find( em ).html();
               var prev_charges = $( .cart-total span ).html();
               var thisID = $(this).parent().attr( id ).replace( each- ,  );
               var pos = getpos(Arrays,thisID);
               
               Arrays.sppce(pos,1,"0")
               prev_charges = parseInt(prev_charges)-parseInt(deduct);
               
               $( .cart-total span ).html(prev_charges);
               $( #total-hidden-charges ).val(prev_charges);
               $(this).parent().remove();
            });	
            $( #Submit ).pvequery( cpck , function() {
               var totalCharge = $( #total-hidden-charges ).val();
               
               $( #left_bar ).html( Total Charges: $ +totalCharge);
               return false;
            });	
         });
         function include(arr, obj) {
            for(var i = 0; i<arr.length; i++) {
               if (arr[i] == obj) return true;
            }
         }
         function getpos(arr, obj) {
            for(var i = 0; i<arr.length; i++) {
               if (arr[i] == obj) return i;
            }
         }
         function angle(){$( #cart ).css({ -webkit-transform  : 
             rotate(0deg) , -moz-transform  :  rotate(0deg)  });}

      </script>
   </head>

   <body>
      <span apgn = "left">
         <span id = "wrap" apgn = "left">
            
            <ul>
               <p id = "1">
                  <img src = "a1.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn Java: 
                     Price</span>: $<span class = "price">
                     800</span> </span>
               </p>

               <p id = "2">
                  <img src = "5.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn HTML
                     </span>: $<span class = "price">500 
                     </span></span>
               </p>

               <p id="3">
                  <img src = "1.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn Android 
                     </span>: $<span class = "price">450
                     </span></span>
               </p>

               <p id = "4">
                  <img src = "6.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn SVG 
                     </span>: $<span class = "price">1200
                     </span></span>
               </p>

               <p id = "5">
                  <img src = "7.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span> <span class = "name">Learn Bootstrap
                     </span>: $<span class = "price">65
                     </span></span>
               </p>

               <p id = "6">
                  <img src = "5.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn HTML
                     </span>: $<span class = "price">800
                     </span> </span>
               </p>

               <p id = "7">
                  <img src = "7.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name"> Learn Bootstrap
                     </span>: $<span class = "price">45
                     </span></span>
               </p>

               <p id = "8">
                  <img src = "6.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn SVG
                     </span>: $<span class = "price">900 
                     </span></span>
               </p>

               <p id = "9">
                  <img src = "8.png" class = "items" height = "100" alt = "" />

                  <br clear = "all" />
                  <span><span class = "name">Learn Angular Js
                     </span>: $<span class = "price">20
                     </span></span>
               </p>

            </ul>
            <br clear = "all" />
         </span>
         
         <span id = "left_bar"> 
            <form action = "#" id="cart_form" name = "cart_form">
               <span class = "cart-info"></span>
               
               <span class = "cart-total">
                  <b>Total Charges:     
                           </b> 
                     $<span>0</span>

                  <input type = "hidden" name = "total-hidden-charges" 
                     id = "total-hidden-charges" value = "0" />
               </span>

               <button type = "submit" id = "Submit">CheckOut</button>
            </form>
         </span> 
		
      </span>
   </body>
</html>
This should produce following result −
jQuery - Checkout.js

友情链接
