jQuery UI 实现 仿购物车功能 简洁的js

原创 2012年03月29日 23:38:30

 

效果图
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<!-- 引入js类库 -->
<script language="javascript" src="js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="javascript" src="js/jquery-ui-1.8.18.custom.min.js" type="text/javascript"></script>
<!-- 引入css类库 -->
<link rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" />
<script type="text/javascript" language="javascript">
$(function (){
$("#catalog").accordion();  //手风琴效果
	$("#products li").draggable({   //添加拖拽效果
		connectToSortable:"#ui-widget-content ol",   //向ol中添加元素
		appendTo:"body",    //追加到body中
		 helper:"clone",   //克隆
		 revert:true      //是否返回原来的地方
		});
		
	$("#ui-widget-content ol").sortable({
		sort:function(event,ui){    //触发事件
			$(this).find("#placeholder").remove();  //触发事件时进行删除
			}
		});
     });
	</script>
  <style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>  
    
</head>

<body>
<div class="demo">
	
<div id="products">
	<h1 class="ui-widget-header">Products</h1>	
	<div id="catalog">
		<h3><a href="#">T-Shirts</a></h3>

		<div>
			<ul>
				<li>Lolcat Shirt</li>
				<li>Cheezeburger Shirt</li>
				<li>Buckit Shirt</li>
			</ul>
		</div>

		<h3><a href="#">Bags</a></h3>
		<div>
			<ul>
				<li>Zebra Striped</li>
				<li>Black Leather</li>
				<li>Alligator Leather</li>
			</ul>

		</div>
		<h3><a href="#">Gadgets</a></h3>
		<div>
			<ul>
				<li>iPhone</li>
				<li>iPod</li>
				<li>iPad</li>

			</ul>
		</div>
	</div>
</div>

<div id="cart" >
	<h1 class="ui-widget-header">Shopping Cart</h1>
	<div id="ui-widget-content">
		<ol>  <!--ol 表示有序列表 -->
			<li class="placeholder" id="placeholder">Add your items here</li>
        </ol>
	</div>
</div>

</div><!-- End demo -->



 

</body>
</html>
注:此文实现仿购物车的添加功能,可以添加,加入自己购买的东西。暂时还不能删除,应用了简单的js。

  应用UI中的accordion 的手风琴效果  draggable 添加了拖拽 效果
 

Jquery仿美团外卖等食品选择页面购物车数量加减功能实现

先上图: HTML部分:  营养套餐 酒水饮料 酒水饮料 酒水饮料 ...
  • zx_001
  • zx_001
  • 2017年06月07日 09:32
  • 2054

购物车Jquery的实现

效果图 html部分 当当网购物车页面               根据您挑选的商品,当当为您推荐      ...
  • qfxsxhfy
  • qfxsxhfy
  • 2015年04月01日 09:36
  • 1169

javascript购物车实现详细代码讲解

我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪件商品,就会加入购物车中,最后结算。购物车这一功能,方便消费者对商品进行管理,可以添加商品,删除商品,选中购物车中的某一...
  • zhongguohaoshaonian
  • zhongguohaoshaonian
  • 2016年09月27日 21:13
  • 37037

利用jQuery实现购物车功能

购物车----jQuery h1 { text-align:center; } table { margin:0...
  • wangqing84411433
  • wangqing84411433
  • 2017年04月27日 16:52
  • 6847

用css和jQuery实现简单的购物车功能

首先导入各种jar包和样式bootstrap.min.css angular.min.js bootstrap.min.js jquery-3.2.1.min.js布局和样式 ...
  • Cyq_0927
  • Cyq_0927
  • 2017年11月29日 14:35
  • 195

购物车功能实现 语言: php+MySQL+jQuery+Ajax

准备3个文件: 1.cart.php     // 前端显示文件 2.cart_ajax.php  // ajax处理数据 3.config.php    //数据库配置 一、cart.php...
  • scenewood
  • scenewood
  • 2015年09月07日 16:32
  • 2877

jQuery实现购物车功能

我写的这篇文章呢,主要功能就是可以减少或者添加商品数量,并且自动计算商品总价格,我是后台程序员,前台的知识就相对弱一些,所以我就记录下来这些前台知识,也希望这篇文章可以帮助到大家。 ...
  • wyl1401672169
  • wyl1401672169
  • 2016年09月18日 14:14
  • 2157

原生JS实现购物车结算功能代码

  • 2015年11月11日 16:24
  • 92KB
  • 下载

用JS模拟购物车(jQuery实现)

jQueryShoppingCart.htmljQueryCart.html 购物车 h1 { text-align:center; ...
  • dumzp13
  • dumzp13
  • 2016年04月08日 22:01
  • 324

jquery.fly.js实现添加购物车效果、实现抛物线运动

一、JQuery.fly.js整理 1.Git源代码地址: https://github.com/amibug/fly 2.Demo演示地址:http://codepen.io/hzxs199022...
  • u011127019
  • u011127019
  • 2017年03月15日 22:01
  • 4885
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jQuery UI 实现 仿购物车功能 简洁的js
举报原因:
原因补充:

(最多只允许输入30个字)