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

效果图

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

jQuery UI 实现仿购物车功能简洁的js相关推荐

使用jQuery实现简单的购物车功能
使用jQuery实现简单的购物车功能 <!DOCTYPE html> <html><head><title>购物车</title><m ...
JQuery UI的拖拽功能
JQuery UI是JQuery官方支持的WebUI 代码库,包含底层交互.动画.特效等API,并且封装了一些Web小部件(Widget).同时,JQuery UI继承了jquery的插件支持,有大量 ...
js购物车功能php,使用JS实现购物车功能步骤详解
这次给大家带来使用JS实现购物车功能步骤详解,使用JS实现购物车功能的注意事项有哪些,下面就是实战案例,一起来看一下. 我们肯定都很熟悉商品购物车这一功能,每当我们在某宝某东上购买商品的时候,看中了哪 ...
html+css+jquery实现简单的购物车功能
HTML网页代码 <!DOCTYPE html> <html lang="en"> <head> </head> <body& ...
jQuery UI基础学习笔记
1.jQuery UI下载与使用在jQuery里有第一部分 1.jQuery UI介绍认识jQuery UI 1.jQuery UI: 是以jQuery为基础的JavaScript网页用户 ...
jquery ui放大缩小_jQuery UI 实例
jQuery UI 实例 - 缩放(Resizable) 使用鼠标改变元素的尺寸. 如需了解更多有关 resizable 交互的细节,请查看 API 文档可调整尺寸小部件(Resizable Wid ...
ajax动态选项卡,如何将动态生成的ajax内容附加到jquery ui选项卡中新添加的选项卡？...
我在侧面板上有以下表格的表格: one two three four 当有人点击该列的某一行时,该行的标题将作为参数传递给在主面板中显示搜索结果的函数. $("#content-displa ...
[转]JQuery ui 实现类似于confirm的功能
本文转自:http://www.cnblogs.com/JerryWang1991/archive/2011/08/04/2127503.html 今天在改进参加一个全国比赛的项目作品时,发现使用了大 ...
html 输入框自动缩短一行内显示,JQuery UI组合框自动补全功能改进版（即时全部显示+input内容保存）...
JQuery UI Autocomplete(自动补全)功能在input前端设计中非常有用,最近一个项目正好用到,仔细研究了下组合框(combobox)的自动补全部分,官方地址是:https://jq ...

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

jQuery UI 实现仿购物车功能简洁的js相关推荐

最新文章

热门文章

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

jQuery UI 实现 仿购物车功能 简洁的js相关推荐

最新文章

热门文章

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

jQuery UI 实现仿购物车功能简洁的js相关推荐