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

最新推荐文章于 2023-10-07 16:57:22 发布

xjmlyun

最新推荐文章于 2023-10-07 16:57:22 发布

阅读量3.5k

点赞数

文章标签： jquery ui function javascript class html

[html] view plain copy print ?

<span style="font-size:18px;">效果图</span>

[html] view plain copy print ?

<!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>
<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>
<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>
<li class="placeholder" id="placeholder">Add your items here</li>
</ol>
</div>
</div>
</div>
</body>
</html>

xjmlyun

关注

0
点赞
踩
0

收藏

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

[html] view plaincopyprint?span style="font-size:18px;">效果图span> 效果图[html] view plaincopyprint?> html xmlns="http://www.w3.org/1999/xhtml"> head> meta http-equiv="Content
复制链接

扫一扫