当前位置: 澳门新濠3559 > 编程 > 正文

复制代码 代码如下,ajax拖动购物车

时间:2019-12-27 17:08来源:编程
早先大家的购物车都以点击张开网页,都以web2.0情势的,本小说提供那款php教程ajax拖动购物车源码,能够拖动商品放在购物车的里面面,那样更加好的相符顾客习贯了。 */ //download by

澳门新濠3559 1

早先大家的购物车都以点击张开网页,都以web 2.0情势的,本小说提供那款php教程 ajax拖动购物车源码,能够拖动商品放在购物车的里面面,那样更加好的相符顾客习贯了。
*/
//download by

复制代码 代码如下:

复制代码 代码如下:

意气风发经本身输入账号点击登录会弹出提醒框让本身输入密码即便本身输入密码点击登录会弹出提示框让作者输入账号输入完了账号和密码点击了登录没反应!请csdn的表哥们带领意气风发二。代码如下------------------------------------------------------------------!DOCTYPEhtmlhtmlheadmetacharset="utf-8"meta"X-UA-Compatible"content="IE=edge"/metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/title后台登入/titlescriptsrc="/Scripts/jquery-1.10.2.min.js"/scriptstylehtml{color:#878787;background:url("/Content/images/login_bg.png")repeat;font-family:Arial,'MicrosoftYaHei','宋体';}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td,strong{padding:0;margin:0;font-family:'MicrosoftYaHei',Arial,'宋体';}fieldset,img{border:0;}a{text-decoration:none;color:#00c;outline:none;}var,em,strong{font-style:normal;}address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:inherit;font-weight:inherit;}input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit;}input,button,textarea,select{*font-size:100%;outline:none;}body{-webkit-text-size-adjust:none;}*{-webkit-tap-highlight-color:rgba(0,0,0,0);}.clearfix:after{content:"200B";display:block;height:0;clear:both;}.clearfix{*zoom:1;}.wrap{width:100%;height:100%;font-size:14px;}.header{width:460px;margin:0020px55%;padding-top:125px;}.headerh1{width:312px;height:53px;margin:0auto;background:url("/Content/images/login_title_bg.png")no-repeat;background-size:100%100%;line-height:53px;color:#ffe9bd;font-size:34px;text-align:center;}.main{width:100%;height:427px;background:url("/Content/images/login_main_bg.png")no-repeat;background-size:100%100%;}.main-list{position:relative;width:460px;height:377px;margin-left:55%;padding-top:50px;background-color:#fff;}.main-listdiv{position:relative;width:100%;height:40px;margin-bottom:30px;line-height:40px;}.main-listdivlabel{float:left;width:90px;margin-right:10px;text-align:right;}.main-listdivinput{float:left;width:280px;height:38px;padding:010px;border:1pxsolid#999;border-radius:8px8px;}.main-listp{margin-left:100px;color:#676767;}.main-lista{margin-left:10px;}.code-pic{position:absolute;right:59px;top:1px;width:100px;height:38px;background-color:#E3E3E3;line-height:38px;color:#000;text-align:center;border-radius:8px8px;}.main-list.login-btn{position:absolute;bottom:0;left:45px;width:370px;height:59px;margin:0auto;background:url("/Content/images/login_btn.png")00no-repeat;border:none;}.login-btn:hover{background-position:0-59px;}.footer{width:1200px;height:156px;background:url("/Content/images/login_main.png"卡塔尔国no-repeat;background-size:百分之百100%;margin:0auto;}/style/headbodydivdivh1后台保管系统/h1/divdivdivdivlabelfor="txtLoginName"账号/labelinputtype="text"name=""placeholder="请输入账号"//divdivlabelfor="txtLoginPass"密码/labelinputtype="password"name=""placeholder="请输入密码"//divinputtype="button"name="btnLogin"/div/divdiv/div/divscripttype="text/javascript"//横屏操作提醒startfunctionorient(卡塔尔(英语:State of Qatar){if(window.orientation==0||window.orientation==180卡塔尔(قطر‎{alert("竖屏效果倒霉,建议横屏操作!"卡塔尔(英语:State of Qatar);}}$(function(卡塔尔国{orient(卡塔尔(قطر‎;//顾客生成显示屏方向时调用$(window卡塔尔国.bind('orientationchange',function(e卡塔尔(قطر‎{orient(卡塔尔国;}卡塔尔(قطر‎;$("#txtLoginName"卡塔尔(英语:State of Qatar).focus(卡塔尔;//回车事件document.onkeydown=function(e卡塔尔国{varthe伊夫nt=window.event||e;varcode=theEvent.keyCode||the伊芙nt.which;if(code==13卡塔尔国{$("#btnLogin").click();}}$("#btnLogin").on("click",function(){varaccounts=$("#txtLoginName").val();varpass=$("#txtLoginPass").val();//varverifyCode=$("#txtVerifyCode"卡塔尔(قطر‎.val(卡塔尔(قطر‎;variscan=true;varmsg="";if(accounts==""卡塔尔(قطر‎{msg="请输入帐号";$("#txtLoginName"卡塔尔(قطر‎.focus(卡塔尔国;iscan=false;}if(pass==""卡塔尔(قطر‎{msg="请填入登陆密码";$("#txtLoginPass"卡塔尔(قطر‎.focus(卡塔尔(قطر‎;iscan=false;}if(pass.length=100卡塔尔(英语:State of Qatar){msg="登陆密码不可能赶过玖十八个字符";$("#txtLoginPass"卡塔尔.focus(卡塔尔国;iscan=false;}//if(verifyCode==""卡塔尔(英语:State of Qatar){//msg="请输入验证码";//$("#txtVerifyCode").focus();//iscan=false;//}if(iscan){$.ajax({type:'POST',url:"/Login/ValidateLogin",dataType:"json",data:{userName:accounts,password:pass},success:function(rsp){if(rsp.IsOk){parent.location.href="/Home";}else{alert(rsp.Msg);}}});}else{alert(msg);}})varisSend=false,ss=30;$('.code-pic').click(function(){if(isSend)return;varaccounts=$("#txtLoginName"卡塔尔.val(卡塔尔(قطر‎;if(accounts==""){msg="请输入帐号";$("#txtLoginName").focus();iscan=false;}isSend=true;ss=30;$.post("/Login/SendCode",{userName:accounts},function(data){alert(data.Msg)if(data.IsOk){my_interval=setInterval(function(卡塔尔(قطر‎{if(ss0卡塔尔(英语:State of Qatar){$('.code-pic'卡塔尔国.text(ss+"s后可重发"卡塔尔国;ss--;}else{clearInterval(my_interval卡塔尔(英语:State of Qatar);isSend=false;$('.code-pic'卡塔尔.text("获取验证码"卡塔尔;}},1000卡塔尔国;}else{isSend=false;}}卡塔尔}卡塔尔(قطر‎}卡塔尔/scriptscriptvar_hmt=_hmt||[];(function(){varhm=document.createElement("script");hm.src="";vars=document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm,s);})();/script/body/html

/* database config */

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>重写alert</title>
    <link  href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src=";
    <script type="text/javascript">
    var showAlert = function(msg){
        jAlert(msg, "提示!");
    }
    window.alert=showAlert;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>重写alert</title>
    <link  href="css/style.css" rel="stylesheet"/>
    <script type="text/javascript" src=";
    <script type="text/javascript">
    var showAlert = function(msg){
        jAlert(msg, "提示!");
    }
    window.alert=showAlert;

$db_host  = 'localhost';
$db_user  = 'root';
$db_pass  = 'dcfan2006';
$db_database = 'test';

    $.alerts={
        verticalOffset:-75,horizontalOffset:0,repositionOnResize:true,overlayOpacity:.01,overlayColor:'#FFF',draggable:true,okButton:' OK ',cancelButton:' Cancel ',dialogClass:null,alert:function(message,title,callback){
            if(title==null)title='Alert';
            $.alerts._show(title,message,null,'alert',function(result){
                if(callback)callback(result)
            })
        }
        ,_show:function(title,msg,value,type,callback){
            $.alerts._hide();
            $.alerts._overlay('show');
            $("BODY").append('<div id="popup_container">'+'<h1 id="popup_title"></h1>'+'<div id="popup_content">'+'<div id="popup_message"></div>'+'</div>'+'</div>');
            if($.alerts.dialogClass)$("#复制代码 代码如下,ajax拖动购物车。popup_container").addClass($.alerts.dialogClass);
            var pos=($.browser.msie&&parseInt($.browser.version)<=6)?'absolute':'fixed';
            $("#popup_container").css({
                position:pos,zIndex:99999,padding:0,margin:0
            });
            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html($("#popup_message").text().replace(/n/g,'<br />'));
            $("#popup_container").css({
                minWidth:$("#popup_container").outerWidth(),maxWidth:$("#popup_container").outerWidth()
            });
            $.alerts._reposition();
            $.alerts._maintainPosition(true);
            switch(type){
                case'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" value="'+$.alerts.okButton+'" id="popup_ok" /></div>');
                $("#popup_ok").click(function(){
                    $.alerts._hide();
                    callback(true)
                });
                $("#popup_ok").focus().keypress(function(e){
                    if(e.keyCode==13||e.keyCode==27)$("#popup_ok").trigger('click')
                });
                break
            };
            if($.alerts.draggable){
                try{
                    $("#popup_container").draggable({
                        handle:$("#popup_title")
                    });
                    $("#popup_title").css({
                        cursor:'move'
                    })
                }
                catch(e){}
            }
        }
        ,_hide:function(){
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false)
        }
        ,_overlay:function(status){
            switch(status){
                case'show':$.alerts._overlay('hide');
                $("BODY").append('<div id="popup_overlay"></div>');
                $("#popup_overlay").css({
                    position:'absolute',zIndex:99998,top:'0px',left:'0px',width:'100%',height:$(document).height(),background:$.alerts.overlayColor,opacity:$.alerts.overlayOpacity
                });
                break;
                case'hide':$("#popup_overlay").remove();
                break
            }
        }
        ,_reposition:function(){
            var top=(($(window).height()/ 2) - ($("#popup_container").outerHeight() /2))+$.alerts.verticalOffset;
            var left=(($(window).width()/ 2) - ($("#popup_container").outerWidth() /2))+$.alerts.horizontalOffset;
            if(top<0)top=0;
            if(left<0)left=0;
            if($.browser.msie&&parseInt($.browser.version)<=6)top=top+$(window).scrollTop();
            $("#popup_container").css({
                top:top+'px',left:left+'px'
            });
            $("#popup_overlay").height($(document).height())
        }
        ,_maintainPosition:function(status){
            if($.alerts.repositionOnResize){
                switch(status){
                    case true:$(window).bind('resize',function(){
                        $.alerts._reposition()
                    });
                    break;
                    case false:$(window).unbind('resize');
                    break
                }
            }
        }
    };
    jAlert=function(message,title,callback){
        $.alerts.alert(message,title,callback)
    }

    $.alerts={
        verticalOffset:-75,horizontalOffset:0,repositionOnResize:true,overlayOpacity:.01,overlayColor:'#FFF',draggable:true,okButton:' OK ',cancelButton:' Cancel ',dialogClass:null,alert:function(message,title,callback){
            if(title==null)title='Alert';
            $.alerts._show(title,message,null,'alert',function(result){
                if(callback)callback(result)
            })
        }
        ,_show:function(title,msg,value,type,callback){
            $.alerts._hide();
            $.alerts._overlay('show');
            $("BODY").append('<div id="popup_container">'+'<h1 id="popup_title"></h1>'+'<div id="popup_content">'+'<div id="popup_message"></div>'+'</div>'+'</div>');
            if($.alerts.dialogClass)$("#popup_container").addClass($.alerts.dialogClass);
            var pos=($.browser.msie&&parseInt($.browser.version)<=6)?'absolute':'fixed';
            $("#popup_container").css({
                position:pos,zIndex:99999,padding:0,margin:0
            });
            $("#popup_title").text(title);
            $("#popup_content").addClass(type);
            $("#popup_message").text(msg);
            $("#popup_message").html($("#popup_message").text().replace(/n/g,'<br />'));
            $("#popup_container").css({
                minWidth:$("#popup_container").outerWidth(),maxWidth:$("#popup_container").outerWidth()
            });
            $.alerts._reposition();
            $.alerts._maintainPosition(true);
            switch(type){
                case'alert':$("#popup_message").after('<div id="popup_panel"><input type="button" value="'+$.alerts.okButton+'" id="popup_ok" /></div>');
                $("#popup_ok").click(function(){
                    $.alerts._hide();
                    callback(true)
                });
                $("#popup_ok").focus().keypress(function(e){
                    if(e.keyCode==13||e.keyCode==27)$("#popup_ok").trigger('click')
                });
                break
            };
            if($.alerts.draggable){
                try{
                    $("#popup_container").draggable({
                        handle:$("#popup_title")
                    });
                    $("#popup_title").css({
                        cursor:'move'
                    })
                }
                catch(e){}
            }
        }
        ,_hide:function(){
            $("#popup_container").remove();
            $.alerts._overlay('hide');
            $.alerts._maintainPosition(false)
        }
        ,_overlay:function(status){
            switch(status){
                case'show':$.alerts._overlay('hide');
                $("BODY").append('<div id="popup_overlay"></div>');
                $("#popup_overlay").css({
                    position:'absolute',zIndex:99998,top:'0px',left:'0px',width:'100%',height:$(document).height(),background:$.alerts.overlayColor,opacity:$.alerts.overlayOpacity
                });
                break;
                case'hide':$("#popup_overlay").remove();
                break
            }
        }
        ,_reposition:function(){
            var top=(($(window).height()/ 2) - ($("#popup_container").outerHeight() /2))+$.alerts.verticalOffset;
            var left=(($(window).width()/ 2) - ($("#popup_container").outerWidth() /2))+$.alerts.horizontalOffset;
            if(top<0)top=0;
            if(left<0)left=0;
            if($.browser.msie&&parseInt($.browser.version)<=6)top=top+$(window).scrollTop();
            $("#popup_container").css({
                top:top+'px',left:left+'px'
            });
            $("#popup_overlay").height($(document).height())
        }
        ,_maintainPosition:function(status){
            if($.alerts.repositionOnResize){
                switch(status){
                    case true:$(window).bind('resize',function(){
                        $.alerts._reposition()
                    });
                    break;
                    case false:$(window).unbind('resize');
                    break
                }
            }
        }
    };
    jAlert=function(message,title,callback){
        $.alerts.alert(message,title,callback)
    }

$link = mysql教程_connect($db_host,$db_user,$db_pass) or die('unable to establish a db connection');
mysql_select_db($db_database,$link);
mysql_query("set names utf8");

    $(function(){alert("hello word!")})
    </script>
    <style>
    #popup_container{font-family:Arial,sans-serif;font-size:12px;min-width:300px;max-width:600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}#popup_title{font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background:#CCC url(images/title.gif) top repeat-x;border:solid 1px #FFF;border-bottom:solid 1px #999;cursor:default;padding:0em;margin:0em;}#popup_content{background:16px 16px no-repeat url(images/info.gif);padding:1em 1.75em;margin:0em;}#popup_content.alert{background-image:url(images/info.gif);}#popup_message{padding-left:48px;}#popup_panel{text-align:center;margin:1em 0em 0em 1em;}#popup_prompt{margin:.5em 0em;}
    </style>
</head>
<body>
</body>
</html>

    $(function(){alert("hello word!")})
    </script>
    <style>
    #popup_container{font-family:Arial,sans-serif;font-size:12px;min-width:300px;max-width:600px;background:#FFF;border:solid 5px #999;color:#000;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;}#popup_title{font-size:14px;font-weight:bold;text-align:center;line-height:1.75em;color:#666;background:#CCC url(images/title.gif) top repeat-x;border:solid 1px #FFF;border-bottom:solid 1px #999;cursor:default;padding:0em;margin:0em;}#popup_content{background:16px 16px no-repeat url(images/info.gif);padding:1em 1.75em;margin:0em;}#popup_content.alert{background-image:url(images/info.gif);}#popup_message{padding-left:48px;}#popup_panel{text-align:center;margin:1em 0em 0em 1em;}#popup_prompt{margin:.5em 0em;}
    </style>
</head>
<body>
</body>
</html>

?>
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" ";
<html xmlns=";
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<title>php ajax拖动购物车源码</title>
<script type="text/网页特效" src=";
<script type="text/javascript" src=";

代码如下: !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "" html xmlns="...

您大概感兴趣的文章:

  • js怎么覆盖原有办法实现重写
  • 在JavaScript中重写jQuery对象的法子实例教程
  • js重写方法的简短完毕

<script>
var purchased=new array();
var totalprice=0;

$(document).ready(function(){
 
 $('.product').simpletip({
  
  offset:[40,0],
  content:'<img src="img/ajax_load.gif" alt="loading" style="margin:10px;" />',
  onshow: function(){
   
   var param = this.getparent().find('img').attr('src');
   
   if($.browser.msie && $.browser.version=='6.0')
   {
    param = this.getparent().find('img').attr('style').match(/src="([^"]+)"/);
    param = param[1];
   }
   
   this.load('ajax/tips教程.php',{img:param});
  }

 });
 
 $(".product img").draggable({
 
 containment: 'document',
 opacity: 0.6,
 revert: 'invalid',
 helper: 'clone',
 zindex: 100
 
 });

 $("div.content.drop-here").droppable({
 
   drop:
     function(e, ui)
     {
      var param = $(ui.draggable).attr('src');
      
      if($.browser.msie && $.browser.version=='6.0')
      {
       param = $(ui.draggable).attr('style').match(/src="([^"]+)"/);
       param = param[1];
      }

      addlist(param);
     }
 
 });

});

function addlist(param)
{
 $.ajax({
 type: "post",
 url: "ajax/addtocart.php",
 data: 'img='+encodeuricomponent(param),
 datatype: 'json',
 beforesend: function(x){$('#ajax-loader').css教程('visibility','visible');},
 success: function(msg){
  
  $('#ajax-loader').css('visibility','hidden');
  if(parseint(msg.status)!=1)
  {
   return false;
  }
  else
  {
   var check=false;
   var cnt = false;
   
   for(var i=0; i<purchased.length;i++)
   {
    if(purchased[i].id==msg.id)
    {
     check=true;
     cnt=purchased[i].cnt;
     
     break;
    }
   }
   
   if(!cnt)
    $('#item-list').append(msg.txt);
    
   if(!check)
   {
    purchased.push({id:msg.id,cnt:1,price:msg.price});
   }
   else
   {
    if(cnt>=3) return false;
    
    purchased[i].cnt++;
    $('#'+msg.id+'_cnt').val(purchased[i].cnt);
   }
   
   totalprice+=msg.price;
   update_total();

  }
  
  $('.tooltip').hide();
 
 }
 });
}

function findpos(id)
{
 for(var i=0; i<purchased.length;i++)
 {
  if(purchased[i].id==id)
   return i;
 }
 
 return false;
}

function remove(id)
{
 var i=findpos(id);

 totalprice-=purchased[i].price*purchased[i].cnt;
 purchased[i].cnt = 0;

 $('#table_'+id).remove();
 update_total();
}

function change(id)
{
 var i=findpos(id);
 
 totalprice+=(parseint($('#'+id+'_cnt').val())-purchased[i].cnt)*purchased[i].price;
 
 purchased[i].cnt=parseint($('#'+id+'_cnt').val());
 update_total();
}

function update_total()
{
 if(totalprice)
 {
  $('#total').html('total: $'+totalprice);
  $('a.button').css('display','block');
 }
 else
 {
  $('#total').html('');
  $('a.button').hide();
 }
}
</script>
<style>
body,h1,h2,h3,p,td,quote,small,form,input,ul,li,ol,label{
 margin:0px;
 padding:0px;
 font-family:arial, helvetica, sans-serif;
}

body{
 color:#555555;
 font-size:13px;
 background-color:#282828;
}

.clear{
 clear:both;
}

#main-container{
 width:700px;
 margin:20px auto;
}

.container{
 margin-bottom:40px;
}

.top-label{
 background:url(img/label_bg.png) no-repeat;
 display:inline-block;
 margin-left:20px;
 position:relative;
 margin-bottom:-15px;
}

.label-txt{
 background:url(img/label_bg.png) no-repeat top right;
 display:inline-block;
 font-size:10px;
 height:36px;
 margin-left:10px;
 padding:12px 15px 0 5px;
 text-transform:uppercase;
}

.content-area{
 background:url(img/container_top.png) no-repeat #fcfcfc;
 padding:15px 20px 0 20px;
}

.content{
 padding:10px;
}

.drag-desired{
 background:url(img/drag_desired_label.png) no-repeat top right;
 padding:30px;
}

.drop-here{
 background:url(img/drop_here_label.png) no-repeat top right;
}

.bottom-container-border{
 background:url(img/container_bottom.png) no-repeat;
 height:14px;
}

.product{
 border:2px solid #f5f5f5;
 float:left;
 margin:15px;
 padding:10px;
}

.product img{
 cursor:move;
}

p.descr{
 padding:5px 0;
}

small{
 display:block;
 margin-top:4px;
}

.tooltip{
 position: absolute;
 top: 0;
 left: 0;
 z-index: 3;
 display: none;

 background-color:#666666;
 border:1px solid #666666;
 color:#fcfcfc;

 padding:10px;
 
 -moz-border-radius:12px;
 -khtml-border-radius: 12px;
 -webkit-border-radius: 12px;
 border-radius:12px;
}

#cart-icon{
 width:128px;
 float:left;
 position:relative;
}

#ajax-loader{
 position:absolute;
 top:0px;
 left:0px;
 visibility:hidden;
}

#item-list{
 float:left;
 width:490px;
 margin-left:20px;
 padding-top:15px;
}

a.remove,a.remove:visited{
 color:red;
 font-size:10px;
 text-transform:uppercase;
}

#total{
 clear:both;
 float:right;
 font-size:10px;
 font-weight:bold;
 padding:10px 12px;
 text-transform:uppercase;
}

#item-list table{
 background-color:#f7f7f7;
 border:1px solid #efefef;
 margin-top:5px;
 padding:4px;
}

a.button,a.button:visited{
 display:none;

 height:29px;
 width:136px;

 padding-top:15px;
 margin:0 auto;
 overflow:hidden;

 color:white; 
 font-size:12px;
 font-weight:bold;
 text-align:center;
 text-transform:uppercase;
 
 background:url(img/button.png) no-repeat center top;
}

a.button:hover{
 background-position:bottom;
 text-decoration:none;
}

a, a:visited {
 color:#00bbff;
 text-decoration:none;
 outline:none;
}

a:hover{
 text-decoration:underline;
}

h1{
 font-size:28px;
 font-weight:bold;
 font-family:"trebuchet ms",arial, helvetica, sans-serif;
}

h2{
 font-weight:normal;
 font-size:20px;
 
 color:#666666;
澳门新濠3559, text-indent:30px;
 margin:20px 0;
}

.tutorialzine h1{
 color:white;
 margin-bottom:10px;
 font-size:48px;
}

.tutorialzine h3{
 color:#f5f5f5;
 font-size:10px;
 font-weight:bold;
 margin-bottom:30px;
 text-transform:uppercase;
}

.tutorial-info{
 color:white;
 text-align:center;
 padding:10px;
 margin-top:-20px;
}

</style>

<!--[if lt ie 7]>
<style type="text/css">
 .pngfix { behavior: url(pngfix/iepngfix.htc);}
    .tooltip{width:200px;};
</style>
<![endif]-->

</head>

<body>
<div id="main-container">

 <div class="tutorialzine">
    <h1>shopping cart</h1>
    <h3>the best products at the best prices</h3>
    </div>

    <div class="container">
   
     <span class="top-label">
            <span class="label-txt">products</span>
        </span>
       
        <div class="content-area">
   
      <div class="content drag-desired">
             
                <?php

    $result = mysql_query("select * from internet_shop");
    while($row=mysql_fetch_assoc($result))
    {
     echo '<div class="product"><img src="img/products/'.$row['img'].'" alt="'.htmlspecialchars($row['name']).'" width="128" height="128" class="pngfix" /></div>';
    }

    ?>
               
               
                <div class="clear"></div>
            </div>

        </div>
       
        <div class="bottom-container-border">
        </div>

    </div>

 

    <div class="container">
   
     <span class="top-label">
            <span class="label-txt">shopping cart</span>
        </span>
       
        <div class="content-area">
   
      <div class="content drop-here">
             <div id="cart-icon">
              <img src="img/shoppingcart_128x128.png" alt="shopping cart" class="pngfix" width="128" height="128" />
     <img src="img/ajax_load_2.gif" alt="loading.." id="ajax-loader" width="16" height="16" />
                </div>

    <form name="checkoutform" method="post" action="order.php">
               
                <div id="item-list">
                </div>
               
    </form>               
                <div class="clear"></div>

    <div id="total"></div>

                <div class="clear"></div>
               
                <a href="" onclick="document.forms.checkoutform.submit(); return false;" class="button">checkout</a>
               
          </div>

        </div>
       
        <div class="bottom-container-border">
        </div>

    </div>
 
</div>
</body>
</html>

tips.php

<?php

 

if(!$_post['img']) die("there is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_post['img'])));

$row=mysql_fetch_assoc(mysql_query("select * from internet_shop where img='".$img."'"));

if(!$row) die("there is no such product!");

echo '<strong>'.$row['name'].'</strong>

<p class="descr">'.$row['description'].'</p>

<strong>price: $'.$row['price'].'</strong>
<small>drag it to your shopping cart to purchase it</small>';
?>

addtocard.php加入购物车

<?php

define('include_check',1);
require "../connect.php";

if(!$_post['img']) die("there is no such product!");

$img=mysql_real_escape_string(end(explode('/',$_post['img'])));
$row=mysql_fetch_assoc(mysql_query("select * from internet_shop where img='".$img."'"));

echo '{status:1,id:'.$row['id'].',price:'.$row['price'].',txt:'

<table width="100%" id="table_'.$row['id'].'">
  <tr>
    <td width="60%">'.$row['name'].'</td>
    <td width="10%">$'.$row['price'].'</td>
    <td width="15%"><select name="'.$row['id'].'_cnt" id="'.$row['id'].'_cnt" onchange="change('.$row['id'].');">
 <option value="1">1</option>
 <option value="2">2</option>
 <option value="3">3</option></slect>
 
 </td>
 <td width="15%"><a href="#" onclick="remove('.$row['id'].');return false;" class="remove">remove</a></td>
  </tr>
</table>'}';
?>

查阅购物车页面

<div id="main-container">

    <div class="container">
   
     <span class="top-label">
            <span class="label-txt">your order</span>
        </span>
       
        <div class="content-area">
   
      <div class="content">
             
                <?php
    
    $cnt = array();
    $products = array();
    
    foreach($_post as $key=>$value)
    {
     $key=(int)str_replace('_cnt','',$key);
    
     $products[]=$key;
     $cnt[$key]=$value;
    }

    $result = mysql_query("select * from internet_shop where id in(".join($products,',').")");
    
    if(!mysql_num_rows($result))
    {
     echo '<h1>there was an error with your order!</h1>';
    }
    else
    {
     echo '<h1>you ordered:</h1>';
     
     while($row=mysql_fetch_assoc($result))
     {
      echo '<h2>'.$cnt[$row['id']].' x '.$row['name'].'</h2>';
      
      $total+=$cnt[$row['id']]*$row['price'];
     }
  
     echo '<h1>total: $'.$total.'</h1>';
    }
    ?>
               
               
                <div class="clear"></div>
            </div>

        </div>
       
        <div class="bottom-container-border">
        </div>

    </div>

</div>

源码下载地址。

编辑:编程 本文来源:复制代码 代码如下,ajax拖动购物车

关键词: