PHP程序员站--PHP编程开发平台

AJAX/PHP/JQuery/CSS设计拖拉式购物车

来源：PHP程序员站作者：PHP程序员站发布时间：2011-04-14

在电子商务网站的建设中，购物车这个功能是不能缺少的。而编写购物车的方法也是多种多样，有的简单有的复杂，而在本文中，将带领大家使用PHP,JQuery和CSS和AJAX技术，去设计一个拖拉式的购物车，这个购物车的效果比较酷，当你选择好要购买的商品后，直接用鼠标拖拉到一

在电子商务网站的建设中，购物车这个功能是不能缺少的。而编写购物车的方法也是多种多样，有的简单有的复杂，而在本文中，将带领大家使用PHP,JQuery和CSS和AJAX技术，去设计一个拖拉式的购物车，这个购物车的效果比较酷，当你选择好要购买的商品后，直接用鼠标拖拉到一个购物篮的图标中去，则完成一次购物的过程，跟在超市购物的过程有点相像。本文将使用MySQL数据库，并且用到了jQuery中的一个很好用的插件simpletip(地址：http://craigsworks.com/projects/simpletip/)，接下来会介绍其详细的用法。

　　步骤1、建立Mysql数据库

　　首先，为我们的购物车应用建立如下的mysql数据库文件，下面给出表结构，并添加一些样例数据：

CREATE TABLE IF NOT EXISTS `internet_shop` (
`id` int(6) NOT NULL auto_increment,
`img` varchar(32) collate utf8_unicode_ci NOT NULL default '',
`name` varchar(64) collate utf8_unicode_ci NOT NULL default '',
`description` text collate utf8_unicode_ci NOT NULL,
`price` double NOT NULL default '0',
PRIMARY KEY (`id`),
UNIQUE KEY `img` (`img`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci AUTO_INCREMENT=7 ;

INSERT INTO `internet_shop` VALUES(1, 'iPod.png', 'iPod', 'The original and popular iPod.', 200);
INSERT INTO `internet_shop` VALUES(2, 'iMac.png', 'iMac', 'The iMac computer.', 1200);
INSERT INTO `internet_shop` VALUES(3, 'iPhone.png', 'iPhone', 'This is the new iPhone.', 400);
INSERT INTO `internet_shop` VALUES(4, 'iPod-Shuffle.png', 'iPod Shuffle', 'The new iPod shuffle.', 49);
INSERT INTO `internet_shop` VALUES(5, 'iPod-Nano.png', 'iPod Nano', 'The new iPod Nano.', 99);
INSERT INTO `internet_shop` VALUES(6, 'Apple-TV.png', 'Apple TV', 'The new Apple TV. Buy it now!', 300);
这里我们只是简单地设计了商品的属性表，其中包括了商品的图片，名称，价格和描述，在实际的应用中，可能会设计更复杂的商品属性。
步骤2、设计页面结构

　　接下来，我们开始设计我们的页面结构，HTML代码如下：

<div class="tutorialzine"> <!—标题 -->
<h1>Shopping cart</h1>
<h3>The best products at the best prices</h3>
</div>

<span class="top-label">
<span class="label-txt">Products</span> <!—显示Products的标题div -->
</span>

</div>
<div class="container"> <!—购物车的div层>

<span class="top-label">
<span class="label-txt">Shopping Cart</span>
</span>

</div>
</form>

<!--结帐的按钮?
<a href="" onclick="document.forms.checkoutForm.submit(); return false;" class="button">Checkout</a>
</div>
</div>

</div>
　　在这个页面中，在上半部分，设置了一个div层，用于显示各种商品，并且在页面下半部分，另外设置了一个用于接收用户拖拽商品到购物车的层，只要用户把商品拖拽到这个层中的任意区域(不限于拖拽到购物车内)，都被认为是用户把商品放到了购物车中。
步骤3、设计CSS

　　将CSS的名称命名为demo.css，代码如下：

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{...}{ /**//* 商品列表层和购物车区域的div设置 */
margin-bottom:40px;
}

.top-label{...}{    /**//* 这是页面上部products的样式*/
    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{...}{    /**//* 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{...}{    /**//* 商品的简单介绍用到的样式，这个样式jQuery 的simpletip plugin插件会用到 */
    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;
}
　　以上的样式中给出了关键部分的注释，其中注意的是使用了CSS3中的圆角效果样式border-radius,接下来再看剩余的其他样式部分：

#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;
}
　　为了兼容IE 6浏览器，我们特别添加如下的CSS样式代码，以让IE 6支持PNG下背景透明的特性：

将其中的iepngfix.htc和blank.gif解压缩到合适的目录内，.htc即Html Components，该文件需要在CSS中被调用;blank.gif是一个1×1像素的透明GIF图片。

　　最后，我们的页面效果做出来应该是这样的：

AJAX/PHP/JQuery/CSS设计拖拉式购物车

延伸阅读:
JavaScript 拖拉缩放效果
 使用jQuery简化Ajax开发

Tags: ajax php jQuery css 拖拉式 购物车

顶一下

上一篇：jQuery网格插件 jqGrid
下一篇：能说明你的Javascript技术很烂的五个原因

在百度中搜索 "AJAX/PHP/JQuery/CSS设计拖拉式购物车" 更多相关内容
在谷歌中搜索 "AJAX/PHP/JQuery/CSS设计拖拉式购物车" 更多相关内容

站内搜索

站内搜索百度搜索谷歌搜索