使用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 插件编写

jQuery如此流行,各式各样的jQuery插件也是满天飞。你有没有想过把自己的一些常用的JS功能也写成jQuery插件呢?如果你的答案是肯定的,那么来吧!和我一起学写jQuery插件吧! ...
  • xingxing513234072
  • xingxing513234072
  • 2012年07月09日 18:28
  • 1860

Android实现简单购物页面

1.课题——模仿淘宝等电商的购物车页面 2.需要使用视图树(即在一个视图中建立多层嵌套结构,满足摆列的美观性),下面给出我的一个课堂设计的作品: layout.xml ...
  • liu16659
  • liu16659
  • 2017年03月16日 20:52
  • 635

java中集合的运用,实现一个简单的购物程序

这个程序实现了集合中的数据相加,和集合的增删//泛型封装类 public class Phone { String name=""; int id=0; int price=0;...
  • Dr_abandon
  • Dr_abandon
  • 2016年09月28日 11:39
  • 1576

JQuery插件使用小结

在前台对数据的验证处理,Jquery起着非常强大的作用。首先Jquery是对JS的代码的封装,相当于我们前台的框架,但是它只是一个基础的js框架,能够实现一些简单的功能,而对于一些比较复杂的功能,我们...
  • liujiahan629629
  • liujiahan629629
  • 2014年04月03日 23:40
  • 15386

JAVA简单项目"购物系统"的整个开发过程详解(内含源码和注释)

1. 购物系统的需求分析和类划分     购物系统本身是一个十分复杂的系统,有很多细节问题如果深究会更加复杂,并且一般购物系统都是网页类型的,要有一个友好的界面,但是作为一个简单项目,该项目只是为...
  • dan15188387481
  • dan15188387481
  • 2015年10月28日 10:47
  • 11817

Session简单实现购物车功能

Session简单实现购物车功能这个小程序主要就3个页面,一个商品列表页面(HomeServlet),一个是提示加入购物车页面(AddCartTipServlet),一个是显示购物车清单页面(Show...
  • qq_33689414
  • qq_33689414
  • 2017年03月01日 13:22
  • 1343

一个非常简洁的 jQuery 图片轮播插件

http://wuzhuti.cn/644.html Slides 是一个非常简洁的 jQuery 图片轮播插件,其特点是自动循环播放、图片预加载以及自动分页功能。 Sli...
  • xj626852095
  • xj626852095
  • 2015年07月02日 16:30
  • 9883

终极完美《简易商城购物车系统》揭秘--MVC设计模式

www.cnblogs.com/yejiurui/archive/2012/10/06/2713464.html
  • wuyanwen888
  • wuyanwen888
  • 2013年03月26日 10:32
  • 1569

模拟购物车的实现过程(详细讲解)

我们把购物车的步骤分为了三步 一、加入购物车 二、购物车中物品数量的控制 三、计算金额下面为实现的代码;(代码也是按照上面的思路写的大家可以看看,看不懂可以参照上面的图片上的步骤) ...
  • Liveor_Die
  • Liveor_Die
  • 2017年07月27日 19:04
  • 658

最简单的jquery插件开发示例

页面三个DIV,一个按钮。 点击按钮后,三个DIV的高度调整为相同。 div { width: 40px; float: left; ...
  • dongflying
  • dongflying
  • 2016年12月27日 15:23
  • 405
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:使用jQuery插件实现简单购物
举报原因:
原因补充:

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