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

最新推荐文章于 2022-04-25 19:29:47 发布

HUMHSX

最新推荐文章于 2022-04-25 19:29:47 发布

阅读量6.6k

点赞数

文章标签： jquery ui javascript stylesheet class function

本文链接：https://blog.csdn.net/HUMHSX/article/details/7409372

版权

效果图

<!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 添加了拖拽效果

HUMHSX

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI 实现仿购物车功能简洁的js

效果图无标题文档$(function (){$("#catalog").accordion(); //手风琴效果 $("#products li").draggable({ //添加拖拽效果 connectToSortable:"#ui-widget-content ol", //向ol中添加元素 appendTo:"bod
复制链接

扫一扫