日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
AJAX/PHP/JQuery/CSS設(shè)計(jì)拖拉式購物車

下邊，筆者將帶領(lǐng)大家使用PHP,JQuery和CSS和AJAX技術(shù)，去設(shè)計(jì)一個(gè)拖拉式的購物車，這個(gè)購物車的效果比較酷，當(dāng)你選擇好要購買的商品后，直接用鼠標(biāo)拖拉到一個(gè)購物籃的圖標(biāo)中去，則完成一次購物的過程，跟在超市購物的過程有點(diǎn)相像。本文將使用MySQL數(shù)據(jù)庫，并且用到了jQuery中的一個(gè)很好用的插件simpletip(地址：http://craigsworks.com/projects/simpletip/)，接下來會(huì)介紹其詳細(xì)的用法。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站與策劃設(shè)計(jì),北安網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:北安等地區(qū)。北安做網(wǎng)站價(jià)格咨詢:18982081108

步驟1 建立Mysql數(shù)據(jù)庫

首先，為我們的購物車應(yīng)用建立如下的mysql數(shù)據(jù)庫文件，下面給出表結(jié)構(gòu)，并添加一些樣例數(shù)據(jù)：

 
 
 
 
      
  
  
  
  1. CREATE TABLE IF NOT EXISTS `internet_shop` (  
    2.   
  
  
  
  2.   `id` int(6) NOT NULL auto_increment,  
    3.   
  
  
  
  3.   `img` varchar(32) collate utf8_unicode_ci NOT NULL default '',  
    4.   
  
  
  
  4.   `name` varchar(64) collate utf8_unicode_ci NOT NULL default '',  
    5.   
  
  
  
  5.   `description` text collate utf8_unicode_ci NOT NULL,  
    6.   
  
  
  
  6.   `price` double NOT NULL default '0',  
    7.   
  
  
  
  7.   PRIMARY KEY  (`id`),  
    8.   
  
  
  
  8.   UNIQUE KEY `img` (`img`)  
    9.   
  
  
  
  9. ) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;  
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200);  
    12.   
  
  
  
  12. INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);  
    13.   
  
  
  
  13. INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);  
    14.   
  
  
  
  14. INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49);  
    15.   
  
  
  
  15. INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99);  
    16.   
  
  
  
  16. INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300); 
    17.

這里我們只是簡單地設(shè)計(jì)了商品的屬性表，其中包括了商品的圖片，名稱，價(jià)格和描述，在實(shí)際的應(yīng)用中，可能會(huì)設(shè)計(jì)更復(fù)雜的商品屬性。

#p#

步驟2 設(shè)計(jì)頁面結(jié)構(gòu)

接下來，我們開始設(shè)計(jì)我們的頁面結(jié)構(gòu)，HTML代碼如下：

 
 
 
 
      
  
  
  
  1.   
    2.   
  
  
  
  2.  
    3.   
  
  
  
  3.      
    4.   
  
  
  
  4. Shopping cart
     
    5.   
  
  
  
  5. The best products at the best prices
     
    6.
 
  •  
  •      
  •  
  •  
  • Products     
  •  
  •  
  •  
  •       
  • // 這里動(dòng)態(tài)從數(shù)據(jù)庫中讀取商品  
  • ?> 
  •  
    •      
  •  
  •  
  •  
  •      
  •  
  •  
  •       
  •      
  •  
  •  
  • Shopping Cart      
  •  
  •  
  •  
  •      
  •  
  •       
  •  
  •  
  •  
  •       
  •      
  •  
  •  
  •       
  •  
    •       
    •      
    •      
  •  
  •  
  •  
  •  
  •  

    • 在這個(gè)頁面中，在上半部分，設(shè)置了一個(gè)div層，用于顯示各種商品，并且在頁面下半部分，另外設(shè)置了一個(gè)用于接收用戶拖拽商品到購物車的層，只要用戶把商品拖拽到這個(gè)層中的任意區(qū)域(不限于拖拽到購物車內(nèi))，都被認(rèn)為是用戶把商品放到了購物車中。

    #p#

    步驟3 設(shè)計(jì)CSS

    將CSS的名稱命名為demo.css，代碼如下：

     
 
 
 
        
  
  
  
    1.   body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{...}{  
      2.   
  
  
  
    2. /**//* 為某些瀏覽器兼容性而設(shè)計(jì) */ 
      3.   
  
  
  
    3.     margin:0px;  
      4.   
  
  
  
    4.     padding:0px;  
      5.   
  
  
  
    5.     font-family:Arial, Helvetica, sans-serif;  
      6.   
  
  
  
    6. }  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. body{...}{  
      9.   
  
  
  
    9.     color:#555555;  
      10.   
  
  
  
    10.     font-size:13px;  
      11.   
  
  
  
    11.     background-color:#282828;  
      12.   
  
  
  
    12. }  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. .clear{...}{      
      15.   
  
  
  
    15.     clear:both;  
      16.   
  
  
  
    16. }  
      17.   
  
  
  
    17.  
      18.   
  
  
  
    18. #main-container{...}{    /**//* 頁面中主層的寬度和邊距設(shè)置*/ 
      19.   
  
  
  
    19.     width:700px;  
      20.   
  
  
  
    20.     margin:20px auto;  
      21.   
  
  
  
    21. }  
      22.   
  
  
  
    22.  
      23.   
  
  
  
    23. .container{...}{    /**//* 商品列表層和購物車區(qū)域的div設(shè)置 */ 
      24.   
  
  
  
    24.     margin-bottom:40px;  
      25.   
  
  
  
    25. }  
      26.   
  
  
  
    26.  
      27.   
  
  
  
    27. .top-label{...}{    /**//* 這是頁面上部products的樣式*/ 
      28.   
  
  
  
    28.     background:url(img/label_bg.png) no-repeat;      
      29.   
  
  
  
    29.     display:inline-block;  
      30.   
  
  
  
    30.     margin-left:20px;  
      31.   
  
  
  
    31.     position:relative;  
      32.   
  
  
  
    32.     margin-bottom:-15px;      
      33.   
  
  
  
    33. }  
      34.   
  
  
  
    34.  
      35.   
  
  
  
    35. .label-txt{...}{      
      36.   
  
  
  
    36.     background:url(img/label_bg.png) no-repeat top right;      
      37.   
  
  
  
    37.     display:inline-block;  
      38.   
  
  
  
    38.     font-size:10px;  
      39.   
  
  
  
    39.     height:36px;  
      40.   
  
  
  
    40.     margin-left:10px;      
      41.   
  
  
  
    41.     padding:12px 15px 0 5px;  
      42.   
  
  
  
    42.     text-transform:uppercase;  
      43.   
  
  
  
    43. }  
      44.   
  
  
  
    44.  
      45.   
  
  
  
    45. .content-area{...}{    /**//* content-area區(qū)域的樣式 */ 
      46.   
  
  
  
    46.     background:url(img/container_top.png) no-repeat #fcfcfc;  
      47.   
  
  
  
    47.     padding:15px 20px 0 20px;  
      48.   
  
  
  
    48. }  
      49.   
  
  
  
    49.  
      50.   
  
  
  
    50. .content{...}{      
      51.   
  
  
  
    51.     padding:10px;  
      52.   
  
  
  
    52. }  
      53.   
  
  
  
    53.  
      54.   
  
  
  
    54. .drag-desired{...}{    /**//* 商品列表區(qū)域的樣式*/ 
      55.   
  
  
  
    55.     background:url(img/drag_desired_label.png) no-repeat top right;  
      56.   
  
  
  
    56.     padding:30px;  
      57.   
  
  
  
    57. }  
      58.   
  
  
  
    58.  
      59.   
  
  
  
    59. .drop-here{...}{    /**//*購物車區(qū)域的樣式 */ 
      60.   
  
  
  
    60.     background:url(img/drop_here_label.png) no-repeat top right;  
      61.   
  
  
  
    61. }  
      62.   
  
  
  
    62.  
      63.   
  
  
  
    63. .bottom-container-border{...}{      
      64.   
  
  
  
    64.     background:url(img/container_bottom.png) no-repeat;  
      65.   
  
  
  
    65.     height:14px;  
      66.   
  
  
  
    66. }  
      67.   
  
  
  
    67.  
      68.   
  
  
  
    68. .product{...}{    /**//* 商品的樣式 */ 
      69.   
  
  
  
    69.     border:2px solid #F5F5F5;  
      70.   
  
  
  
    70.     float:left;  
      71.   
  
  
  
    71.     margin:15px;  
      72.   
  
  
  
    72.     padding:10px;  
      73.   
  
  
  
    73. }  
      74.   
  
  
  
    74.  
      75.   
  
  
  
    75. .product img{...}{  
      76.   
  
  
  
    76.     cursor:move;  
      77.   
  
  
  
    77. }  
      78.   
  
  
  
    78.  
      79.   
  
  
  
    79. p.descr{...}{  
      80.   
  
  
  
    80.     padding:5px 0;  
      81.   
  
  
  
    81. }  
      82.   
  
  
  
    82.  
      83.   
  
  
  
    83. small{...}{  
      84.   
  
  
  
    84.     display:block;  
      85.   
  
  
  
    85.     margin-top:4px;  
      86.   
  
  
  
    86. }  
      87.   
  
  
  
    87.  
      88.   
  
  
  
    88. .tooltip{...}{    /**//* 商品的簡單介紹用到的樣式，這個(gè)樣式j(luò)Query 的simpletip plugin插件會(huì)用到 */ 
      89.   
  
  
  
    89.     position: absolute;  
      90.   
  
  
  
    90.     top: 0;  
      91.   
  
  
  
    91.     left: 0;  
      92.   
  
  
  
    92.     z-index: 3;  
      93.   
  
  
  
    93.     display: none;  
      94.   
  
  
  
    94.  
      95.   
  
  
  
    95.     background-color:#666666;  
      96.   
  
  
  
    96.     border:1px solid #666666;  
      97.   
  
  
  
    97.     color:#fcfcfc;  
      98.   
  
  
  
    98.  
      99.   
  
  
  
    99.     padding:10px;  
      100.   
  
  
  
    100.  
      101.   
  
  
  
    101.     -moz-border-radius:12px;    /**//* 圓角效果*/ 
      102.   
  
  
  
    102.     -khtml-border-radius: 12px;  
      103.   
  
  
  
    103.     -webkit-border-radius: 12px;  
      104.   
  
  
  
    104.     border-radius:12px;  
      105.   
  
  
  
    105. } 
      106.

    以上的樣式中給出了關(guān)鍵部分的注釋，其中注意的是使用了CSS3中的圓角效果樣式border-radius,接下來再看剩余的其他樣式部分：　　

     
 
 
 
        
  
  
  
    1. #cart-icon{...}{    /**//* 購物籃的樣式 */ 
      2.   
  
  
  
    2.     width:128px;  
      3.   
  
  
  
    3.     float:left;  
      4.   
  
  
  
    4.     position:relative;      
      5.   
  
  
  
    5. }  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. #ajax-loader{...}{  
      8.   
  
  
  
    8.     position:absolute;    /**//* 這是等待加載的圖標(biāo)的樣式*/ 
      9.   
  
  
  
    9.     top:0px;  
      10.   
  
  
  
    10.     left:0px;  
      11.   
  
  
  
    11.     visibility:hidden;  
      12.   
  
  
  
    12. }  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. #item-list{...}{    /**//* 購物籃中已放置的商品的樣式*/ 
      15.   
  
  
  
    15.     float:left;  
      16.   
  
  
  
    16.     width:490px;  
      17.   
  
  
  
    17.     margin-left:20px;  
      18.   
  
  
  
    18.     padding-top:15px;  
      19.   
  
  
  
    19. }  
      20.   
  
  
  
    20.  
      21.   
  
  
  
    21. a.remove,a.remove:visited{...}{    /**//* 移除購物車中商品的鏈接的樣式 */ 
      22.   
  
  
  
    22.     color:red;  
      23.   
  
  
  
    23.     font-size:10px;  
      24.   
  
  
  
    24.     text-transform:uppercase;  
      25.   
  
  
  
    25. }  
      26.   
  
  
  
    26.  
      27.   
  
  
  
    27. #total{...}{    /**//* 總計(jì)的樣式*/ 
      28.   
  
  
  
    28.     clear:both;  
      29.   
  
  
  
    29.     float:right;  
      30.   
  
  
  
    30.     font-size:10px;  
      31.   
  
  
  
    31.     font-weight:bold;  
      32.   
  
  
  
    32.     padding:10px 12px;  
      33.   
  
  
  
    33.     text-transform:uppercase;  
      34.   
  
  
  
    34. }  
      35.   
  
  
  
    35.  
      36.   
  
  
  
    36. #item-list table{...}{      
      37.   
  
  
  
    37.     background-color:#F7F7F7;  
      38.   
  
  
  
    38.     border:1px solid #EFEFEF;  
      39.   
  
  
  
    39.     margin-top:5px;  
      40.   
  
  
  
    40.     padding:4px;  
      41.   
  
  
  
    41. }  
      42.   
  
  
  
    42.  
      43.   
  
  
  
    43. a.button,a.button:visited{...}{    /**//* 結(jié)算按鈕*/ 
      44.   
  
  
  
    44.     display:none;  
      45.   
  
  
  
    45.  
      46.   
  
  
  
    46.     height:29px;  
      47.   
  
  
  
    47.     width:136px;  
      48.   
  
  
  
    48.  
      49.   
  
  
  
    49.     padding-top:15px;  
      50.   
  
  
  
    50.     margin:0 auto;  
      51.   
  
  
  
    51.     overflow:hidden;  
      52.   
  
  
  
    52.  
      53.   
  
  
  
    53.     color:white;  
      54.   
  
  
  
    54.     font-size:12px;  
      55.   
  
  
  
    55.     font-weight:bold;  
      56.   
  
  
  
    56.     text-align:center;  
      57.   
  
  
  
    57.     text-transform:uppercase;  
      58.   
  
  
  
    58.  
      59.   
  
  
  
    59.     background:url(img/button.png) no-repeat center top;      
      60.   
  
  
  
    60. }  
      61.   
  
  
  
    61.  
      62.   
  
  
  
    62. a.button:hover{...}{  
      63.   
  
  
  
    63.     background-position:bottom;      
      64.   
  
  
  
    64.     text-decoration:none;  
      65.   
  
  
  
    65. } 
      66.

    為了兼容IE 6瀏覽器，我們特別添加如下的CSS樣式代碼，以讓IE 6支持PNG下背景透明的特性：

     
 
 
 
        
  
  
  
    1.  
      2.

    將其中的iepngfix.htc和blank.gif解壓縮到合適的目錄內(nèi)，.htc即Html Components，該文件需要在CSS中被調(diào)用;blank.gif是一個(gè)1×1像素的透明GIF圖片。

    最后，我們的頁面效果做出來應(yīng)該是這樣的：

    #p#

    步驟4 PHP部分設(shè)計(jì)

    下面進(jìn)行PHP部分的代碼設(shè)計(jì)，首先是列出數(shù)據(jù)庫表中的商品，代碼簡單，如下所示：

     
 
 
 
        
  
  
  
    1. Demo.php中  
      2.   
  
  
  
    2. $result = mysql_query("SELECT * FROM internet_shop");      
      3.   
  
  
  
    3. while($row=mysql_fetch_assoc($result))  
      4.   
  
  
  
    4. {  
      5.   
  
  
  
    5.     echo '';  
      6.   
  
  
  
    6. } 
      7.

    另外一個(gè)需要編寫PHP代碼的地方，是當(dāng)用戶鼠標(biāo)移動(dòng)到某個(gè)商品介紹時(shí)，通過jQuery的simpletips插件，將商品的圖片作為參數(shù)，使用ajax方式調(diào)用，獲得該商品的介紹，并且返回為一個(gè)HTML文件再給前端頁面進(jìn)行處理，該文件在ajax目錄下的tips.php文件，如下所示：

     
 
 
 
        
  
  
  
    1. Ajax/tips.php  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3. define('INCLUDE_CHECK',1);  
      4.   
  
  
  
    4. require "../connect.php";  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. if(!$_POST['img']) die("There is no such product!");  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. $img=mysql_real_escape_string(end(explode('/',$_POST['img'])));  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. $row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12. if(!$row) die("There is no such product!");  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. echo ''.$row['name'].'  
      15.   
  
  
  
    15. '.$row['description'].'
        
      16.   
  
  
  
    16. price: $'.$row['price'].'  
      17.   
  
  
  
    17. Drag it to your shopping cart to purchase it'; 
      18.

    此外，我們還需要編寫一個(gè)addtocart.php文件，這個(gè)文件的作用是：當(dāng)用戶將選定的商品拖拉到購物車時(shí)，程序在數(shù)據(jù)庫中檢索該商品，然后以JSON的形式返回給前端，代碼如下：

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2. define('INCLUDE_CHECK',1);  
      3.   
  
  
  
    3. require "../connect.php";  
      4.   
  
  
  
    4.  
      5.   
  
  
  
    5. if(!$_POST['img']) die("There is no such product!");  
      6.   
  
  
  
    6.  
      7.   
  
  
  
    7. $img=mysql_real_escape_string(end(explode('/',$_POST['img'])));  
      8.   
  
  
  
    8. $row=mysql_fetch_assoc(mysql_query("SELECT * FROM internet_shop WHERE img='".$img."'"));  
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10. echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:\'\  
      11.   
  
  
  
    11. \  
      12.   
  
  
  
    12. \  
      13.   
  
  
  
    13. \  
      14.   
  
  
  
    14. '.$row['name'].'\  
      15.   
  
  
  
    15. $'.$row['price'].'\  
      16.   
  
  
  
    16. \  
      17.   
  
  
  
    17. 1\  
      18.   
  
  
  
    18. 2\  
      19.   
  
  
  
    19. 3\  
      20.   
  
  
  
    20. \  
      21.   
  
  
  
    21. \  
      22.   
  
  
  
    22. remove\  
      23.   
  
  
  
    23. \  
      24.   
  
  
  
    24. \'}'; 
      25.

    當(dāng)用戶把商品拖拉到購物車區(qū)域后，前端頁面就以表格的形式逐一顯示出用戶所選的商品，如下圖：

    最后，我們看下當(dāng)用戶點(diǎn)結(jié)帳按鈕后的頁面order.php的編寫，這里我們只是簡單把用戶的選擇最后羅列出來并且進(jìn)行商品價(jià)格合計(jì)，代碼如下：

     
 
 
 
        
  
  
  
    1.   
  
  
  
    2.  
      3.   
  
  
  
    3. define('INCLUDE_CHECK',1);  
      4.   
  
  
  
    4. require "connect.php";  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6. if(!$_POST)    // 檢查是否有數(shù)據(jù)提交  
      7.   
  
  
  
    7.  
      8.   
  
  
  
    8. {  
      9.   
  
  
  
    9.     if($_SERVER['HTTP_REFERER'])      
      10.   
  
  
  
    10.     header('Location : '.$_SERVER['HTTP_REFERER']);  
      11.   
  
  
  
    11.     exit;      
      12.   
  
  
  
    12. }  
      13.   
  
  
  
    13.  
      14.   
  
  
  
    14. ?>  
      15.   
  
  
  
    15.  
      16.   
  
  
  
    16.   
      17.   
  
  
  
    17.  
      18.   
  
  
  
    18.   
  
  
  
    19.  
      20.   
  
  
  
    20. $cnt = array();  
      21.   
  
  
  
    21. $products = array();  
      22.   
  
  
  
    22.  
      23.   
  
  
  
    23. foreach($_POST as $key=>$value)  
      24.   
  
  
  
    24. {  
      25.   
  
  
  
    25.     $key=(int)str_replace('_cnt','',$key);  
      26.   
  
  
  
    26.     $products[]=$key;    // 將產(chǎn)品的ID編號(hào)放到數(shù)組products中去  
      27.   
  
  
  
    27.    
      28.   
  
  
  
    28.     $cnt[$key]=$value;      
      29.   
  
  
  
    29.  
      30.   
  
  
  
    30. $result = mysql_query("SELECT * FROM internet_shop WHERE id IN(".join($products,',').")");    // selecting all the products with the IN() function  
      31.   
  
  
  
    31.  
      32.   
  
  
  
    32. if(!mysql_num_rows($result))    // 沒找到相關(guān)產(chǎn)品  
      33.   
  
  
  
    33. {  
      34.   
  
  
  
    34.     echo '
      There was an error with your order!
      ';  
      35.   
  
  
  
    35. }  
      36.   
  
  
  
    36. else 
      37.   
  
  
  
    37. {  
      38.   
  
  
  
    38.     echo '
      You ordered:
      ';  
      39.   
  
  
  
    39.     while($row=mysql_fetch_assoc($result))  
      40.   
  
  
  
    40.     {  
      41.   
  
  
  
    41.         echo '
      '.$cnt[$row['id']].' x '.$row['name'].'
      ';  
      42.   
  
  
  
    42.         //計(jì)算總價(jià)格  
      43.   
  
  
  
    43.         $total+=$cnt[$row['id']]*$row['price'];  
      44.   
  
  
  
    44.     }  
      45.   
  
  
  
    45.  
      46.   
  
  
  
    46.     echo '
      Total: $'.$total.'
      ';  
      47.   
  
  
  
    47. }  
      48.   
  
  
  
    48.  
      49.   
  
  
  
    49. ?> 
      50.

    這里，使用數(shù)組products保存了用戶選擇好的商品名稱，而cnt數(shù)組則記錄了每個(gè)商品購買的件數(shù)，最后實(shí)現(xiàn)效果如下：

    #p#

    步驟5 jQuery部分設(shè)計(jì)

    我們首先要引入相關(guān)的jQuery文件，如下：

     
 
 
 
        
  
  
  
    1.   
      2.   
  
  
  
    2.   
      3.   
  
  
  
    3.    
      4.   
  
  
  
    4.   
      5.

    同時(shí)，我們要編寫自己的script.js文件，在這個(gè)文件中，我們使用了jQuery的toolstip控件：

     
 
 
 
        
  
  
  
    1. var purchased=new Array();    //該數(shù)組包含了用戶購買的商品  
      2.   
  
  
  
    2.  
      3.   
  
  
  
    3.  var totalprice=0;    //商品總價(jià)  
      4.   
  
  
  
    4. $(document).ready(function()...{  
      5.   
  
  
  
    5.  
      6.   
  
  
  
    6.     $('.product').simpletip(...{    //使用simpletip控件  
      7.   
  
  
  
    7.         offset:[40,0],  
      8.   
  
  
  
    8.         content:'',      
      9.   
  
  
  
    9.  
      10.   
  
  
  
    10.         onShow: function()...{  
      11.   
  
  
  
    11.  
      12.   
  
  
  
    12.             var param = this.getParent().find('img').attr('src');  
      13.   
  
  
  
    13.             // 修復(fù)IE6的問題  
      14.   
  
  
  
    14.             if($.browser.msie && $.browser.version=='6.0')  
      15.   
  
  
  
    15.             ...{  
      16.   
  
  
  
    16.                 param = this.getParent().find('img').attr('style').match(/src=\"([^\"]+)\"/);  
      17.   
  
  
  
    17.                 param = param[1];  
      18.   
  
  
  
    18.             }  
      19.   
  
  
  
    19.  
      20.   
  
  
  
    20.             // 通過ajax方式加載tips.php文件  
      21.   
  
  
  
    21.             this.load('ajax/tips.php',...{img:param});  
      22.   
  
  
  
    22.         }   
      23.   
  
  
  
    23.  
      24.   
  
  
  
    24.     });  
      25.   
  
  
  
    25.  
      26.   
  
  
  
    26.     $(".product img").draggable(...{    // 允許所有商品圖片能拖拽  
      27.   
  
  
  
    27.  
      28.   
  
  
  
    28.     containment: 'document',  
      29.   
  
  
  
    29.     opacity: 0.6,  
      30.   
  
  
  
    30.     revert: 'invalid',  
      31.   
  
  
  
    31.     helper: 'clone',  
      32.   
  
  
  
    32.     zIndex: 100  
      33.   
  
  
  
    33.  
      34.   
  
  
  
    34.     });  
      35.   
  
  
  
    35.  
      36.   
  
  
  
    36.     $("div.content.drop-here").droppable(...{    // 當(dāng)商品被拖拉到購物車區(qū)域時(shí)觸發(fā)  
      37.   
  
  
  
    37.  
      38.   
  
  
  
    38.             drop:  
      39.   
  
  
  
    39.                 function(e, ui)  
      40.   
  
  
  
    40.                 ...{  
      41.   
  
  
  
    41.                     var param = $(ui.draggable).attr('src');  
      42.   
  
  
  
    42.                     // 修復(fù)IE 6下的問題  
      43.   
  
  
  
    43.                     if($.browser.msie && $.browser.version=='6.0')  
      44.   
  
  
  
    44.                     ...{  
      45.   
  
  
  
    45.                         param = $(ui.draggable).attr('style').match(/src=\"([^\"]+)\"/);  
      46.   
  
  
  
    46.                         param = param[1];  
      47.   
  
  
  
    47.                     }  
      48.   
  
  
  
    48.  
      49.   
  
  
  
    49.                     addlist(param);    //調(diào)用addlist方法  
      50.   
  
  
  
    50.                 }  
      51.   
  
  
  
    51.  
      52.   
  
  
  
    52.     });  
      53.   
  
  
  
    53.  
      54.   
  
  
  
    54. });  
      55.   
  
  
  
    55.    接下來看addlist方法的編寫，其中都提供了詳細(xì)的注釋：  
      56.   
  
  
  
    56. function addlist(param)  
      57.   
  
  
  
    57. ...{  
      58.   
  
  
  
    58.       
      59.   
  
  
  
    59.  
      60.   
  
  
  
    60.     $.ajax(...{    // ajax方法調(diào)用 addtocart.php  
      61.   
  
  
  
    61.     type: "POST",  
      62.   
  
  
  
    62.     url: "ajax/addtocart.php",  
      63.   
  
  
  
    63.     data: 'img='+encodeURIComponent(param),    // the product image as a parameter  
      64.   
  
  
  
    64.     dataType: 'json',    // JSON形式調(diào)用  
      65.   
  
  
  
    65.  
      66.   
  
  
  
    66. //在調(diào)用前，顯示加載的小圖標(biāo)  
      67.   
  
  
  
    67.     beforeSend: function(x)...{$('#ajax-loader').css('visibility','visible');},      
      68.   
  
  
  
    68. //調(diào)用成功時(shí)的回調(diào)方法  
      69.   
  
  
  
    69.     success: function(msg)...{  
      70.   
  
  
  
    70.  
      71.   
  
  
  
    71. //調(diào)用成功后，隱藏等待加載的小圖標(biāo)  
      72.   
  
  
  
    72.         $('#ajax-loader').css('visibility','hidden');    // hiding the loading gif animation  
      73.   
  
  
  
    73. //如果有出錯(cuò)  
      74.   
  
  
  
    74.         if(parseInt(msg.status)!=1)  
      75.   
  
  
  
    75.         ...{  
      76.   
  
  
  
    76.             return false;            }  
      77.   
  
  
  
    77.         else 
      78.   
  
  
  
    78.         ...{  
      79.   
  
  
  
    79.             var check=false;  
      80.   
  
  
  
    80.             var cnt = false;  
      81.   
  
  
  
    81.  
      82.   
  
  
  
    82. //檢查某個(gè)商品是否已經(jīng)在購物車中存在了  
      83.   
  
  
  
    83.             for(var i=0; i  
  
  
  
    84.             ...{  
      85.   
  
  
  
    85.                 if(purchased[i].id==msg.id)                    ...{  
      86.   
  
  
  
    86.                     check=true;  
      87.   
  
  
  
    87.                     cnt=purchased[i].cnt;  
      88.   
  
  
  
    88.  
      89.   
  
  
  
    89.                     break;  
      90.   
  
  
  
    90.                 }  
      91.   
  
  
  
    91.             }  
      92.   
  
  
  
    92.  
      93.   
  
  
  
    93.             if(!cnt)      
      94.   
  
  
  
    94.                 $('#item-list').append(msg.txt);  
      95.   
  
  
  
    95.  
      96.   
  
  
  
    96.             if(!check)    //如果該商品是新購買商品，購物車中不存在，則purchased數(shù)組中增加相關(guān)產(chǎn)品  
      97.   
  
  
  
    97.             ...{  
      98.   
  
  
  
    98.                 purchased.push(...{id:msg.id,cnt:1,price:msg.price});  
      99.   
  
  
  
    99.             }  
      100.   
  
  
  
    100.  
      101.   
  
  
  
    101.             else    // 如果購物車中已經(jīng)有該商品，則數(shù)量增加  
      102.   
  
  
  
    102.  
      103.   
  
  
  
    103.             ...{  
      104.   
  
  
  
    104. // 這里設(shè)置每樣商品只能買3件，當(dāng)然大家可以修改  
      105.   
  
  
  
    105.                 if(cnt>=3) return false;      
      106.   
  
  
  
    106.  
      107.   
  
  
  
    107. //增加購物車中顯示的數(shù)量  
      108.   
  
  
  
    108.                 purchased[i].cnt++;  
      109.   
  
  
  
    109.  
      110.   
  
  
  
    110. //設(shè)置數(shù)量下拉框中的數(shù)量  
      111.   
  
  
  
    111.                 $('#'+msg.id+'_cnt').val(purchased[i].cnt);      
      112.   
  
  
  
    112.  
      113.   
  
  
  
    113.             }  
      114.   
  
  
  
    114.  
      115.   
  
  
  
    115.             totalprice+=msg.price;    // 重新計(jì)算總價(jià)格  
      116.   
  
  
  
    116.             update_total();    // 修改總價(jià)格  
      117.   
  
  
  
    117.  
      118.   
  
  
  
    118.         }  
      119.   
  
  
  
    119.  
      120.   
  
  
  
    120.         $('.tooltip').hide();    // 隱藏商品的介紹  
      121.   
  
  
  
    121.     }  
      122.   
  
  
  
    122.     });  
      123.   
  
  
  
    123. }  
      124.   
  
  
  
    124.  
      125.   
  
  
  
    125.  
      126.   
  
  
  
    126. //幫助工具類，找出當(dāng)前產(chǎn)品在purchased數(shù)組中的位置  
      127.   
  
  
  
    127. function findpos(id)      
      128.   
  
  
  
    128. ...{  
      129.   
  
  
  
    129.                                                 
      
                                                網(wǎng)站題目：AJAX/PHP/JQuery/CSS設(shè)計(jì)拖拉式購物車                                                
      
                                                本文網(wǎng)址：http://www.dlmjj.cn/article/dpoggjc.html