使用jQuery插件实现简单购物

原创 2012年03月21日 22:08:00

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="_3._21拖拽购物车.WebForm2" %>

<!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 runat="server">
    <title></title>
<style type="text/css">
 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>
    <script src="js/Jquery1.7.js" type="text/javascript"></script>
    <script src="js/jquery.ui.core.js" type="text/javascript"></script>
    <script src="js/jquery.ui.widget.js" type="text/javascript"></script>
    <script src="js/jquery.ui.mouse.js" type="text/javascript"></script>
    <script src="js/jquery.ui.draggable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.droppable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.sortable.js" type="text/javascript"></script>
    <script src="js/jquery.ui.accordion.js" type="text/javascript"></script>
 <script type="text/javascript">
     $(function () {
         $("#catalog").accordion();
         $("#catalog li").draggable({
             appendTo: "body",
             helper: "clone"
         });
         $("#cart ol").droppable({
             activeClass: "ui-state-default",
             hoverClass: "ui-state-hover",
             accept: ":not(.ui-sortable-helper)",
             drop: function (event, ui) {
                 $(this).find(".placeholder").remove();
                 $("<li></li>").text(ui.draggable.text()).appendTo(this);
             }
         }).sortable({
             items: "li:not(.placeholder)",
             sort: function ();
                 $(this).removeClass("ui-state-default");
             }
         });
     });
 </script>
</head>
<body>

<div class="demo">
 
<div id="products">
 <h1 class="ui-widget-header">产品</h1> 
 <div id="catalog">
  <h3><a href="#">家电用具</a></h3>
  <div>
   <ul>
    <li>空调</li>
    <li>冰箱</li>
    <li>电脑</li>
   </ul>
  </div>
  <h3><a href="#">衣服</a></h3>
  <div>
   <ul>
    <li>鞋子</li>
    <li>风衣</li>
    <li>裤子</li>
   </ul>
  </div>
  <h3><a href="#">学习用品</a></h3>
  <div>
   <ul>
    <li>钢笔</li>
    <li>橡皮</li>
    <li>铅笔</li>
   </ul>
  </div>
 </div>
</div>

<div id="cart">
 <h1 class="ui-widget-header">购物车</h1>
 <div class="ui-widget-content">
  <ol>
   <li class="placeholder">Add your items here</li>
  </ol>
 </div>
</div>
</div>
<div class="demo-description">
<p>快乐购物,,欢乐你我</p>
</div>
</body>
</html>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

自写jQuery插件,实现简单网页遮罩层/弹出层功能,兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能:...

jQuery插件 简单日期设置

  • 2015-03-30 18:32
  • 63KB
  • 下载

JQuery插件之jQuery-easing的简单使用

图片及文字滚动特效,目前:
  • rzg813
  • rzg813
  • 2014-07-24 14:53
  • 2018

3个简单的JQUERY插件

  • 2011-01-26 21:47
  • 2.25MB
  • 下载

标签云的实现(使用jQuery插件jqcloud)

jqcloud 是jQuery的一个插件,用于生成标签云。本网站侧边栏的标签云就是用这个实现的。github地址:https://github.com/lucaong/jQCloud用法1.确保引入j...

使用HTML5和jQuery插件Quicksand实现一个超酷的星际争霸2兵种分类展示效果

日期:2011/11/01 来源:GBin1.com 因为本人是星际争霸系列游戏的忠实拥簇,所以在今天的jQuery教程中,我们将使用HTML5和jQuery插件Quicksand来创建一个超酷...
  • jjfat
  • jjfat
  • 2011-11-01 19:08
  • 858
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

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