jq ui 购物车

最新推荐文章于 2021-01-17 17:53:22 发布

原创最新推荐文章于 2021-01-17 17:53:22 发布 · 759 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery ui

学习专栏收录该内容

9 篇文章

订阅专栏

这篇博客演示如何利用jQuery UI的accordion组件组织商品目录，如T-Shirts、Bags和Gadgets，并实现拖放功能将商品添加到可排序的购物车中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Products

T-Shirts

Lolcat Shirt
Cheezeburger Shirt
Buckit Shirt

Bags

Zebra Striped
Black Leather
Alligator Leather

Gadgets

iPhone
iPod
iPad

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>jQuery UI Droppable - Shopping Cart Demo</title>
	<link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
	<script src="../../jquery-1.10.2.js"></script>
	<script src="../../ui/jquery.ui.core.js"></script>
	<script src="../../ui/jquery.ui.widget.js"></script>
	<script src="../../ui/jquery.ui.mouse.js"></script>
	<script src="../../ui/jquery.ui.draggable.js"></script>
	<script src="../../ui/jquery.ui.droppable.js"></script>
	<script src="../../ui/jquery.ui.sortable.js"></script>
	<script src="../../ui/jquery.ui.accordion.js"></script>
	<link rel="stylesheet" href="../demos.css">
	<style>
	h1 { padding: .2em; margin: 0; }
	#products { float:left; width: 500px; margin-right: 2em; }
	#cart { width: 200px; float: left; margin-top: 1em; }
	/* style the list to maximize the droppable hitarea */
	#cart ol { margin: 0; padding: 1em 0 1em 3em; }
	</style>
	<script>
	$(function() {
	    $("#catalog").accordion({header:">h2"}); // 有accordion部件，能根据头部选择项目。
	    $("#catalog").accordion({ active: -1});//打开默认选择最后一行展示
	    //$("#catalog").accordion({ event: "mouseover" });//鼠标移入展示效果
	    // 有拖拉的组件
	    // 拖拉时，原来内容原地有，拖拉处也有。
	    $("ul li").draggable({ helper: "clone" });

	    $("#cart ol").droppable({// 有接收的组件
	        accept: "#catalog li",// 设定接收条件
	        activeClass: "ui-state-hover",// activeClass 填充效果
	        hoverClass: "ui-state-active",// hoverClass 悬停效果
	        
	        drop: function (event, ui) {// 拖放后发生的事件
	            $(".placeholder").remove();
	            var i = $("ol li:contains(" + ui.draggable.text() + ")").length;//投放内容的长度
	            if (i != 0) {
	                i++;
	                $("ol li:contains(" + ui.draggable.text() + ")").hide();
	                $("<li></li>").text(ui.draggable.text() + "* "+i).appendTo(this);         
	            } else {
	                $("<li></li>").text(ui.draggable.text()).appendTo(this);

	            }
	            //$("#cart li").draggable({ revert: 'valid' });

	        }
	    });
	    $("#cart ol").sortable({// 有排序组件
	        cursor: "move",//鼠标样式
            opacity:0.5//透明度
	    });
	    $("#cart").disableSelection({// 有排序组件

	    });
	    // 指定排序条件
	    // 排序时发生的事件
	    $("ul li").sortable();

	});
	</script>
</head>
<body>

<div id="products">
	<h1 class="ui-widget-header">Products</h1>
	<div id="catalog">
		<h2><a href="#">T-Shirts</a></h2>
		<div>
			<ul>
				<li>Lolcat Shirt</li>
				<li>Cheezeburger Shirt</li>
				<li>Buckit Shirt</li>
			</ul>
		</div>
		<h2><a href="#">Bags</a></h2>
		<div>
			<ul>
				<li>Zebra Striped</li>
				<li>Black Leather</li>
				<li>Alligator Leather</li>
			</ul>
		</div>
		<h2><a href="#">Gadgets</a></h2>
		<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 class="ui-widget-content">
		<ol>
			<li class="placeholder">Add your items here</li>
		</ol>
	</div>
</div>

<div class="demo-description">
<p>Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.</p>
</div>
</body>
</html>

Shopping Cart

Add your items here

Demonstrate how to use an accordion to structure products into a catalog and make use of drag and drop for adding them to a shopping cart, where they are sortable.