jquery带下拉列表的购物车组件封装
按照国际惯例先放效果图
安静的时候它长这样
等待加载时它长这样（功能是设置的按需加载，网速慢或者加载数据大时会出现）
加载之后购物车没有商品时这样
有商品长这样
接下来放代码：
cart.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cart</title>
<link rel="stylesheet" href="../css/base.css">
<link rel="stylesheet" href="../css/cart.css">
</head>
<body>
<div class="cart dropdown" data-active="cart" data-load="../js/dropdown-cart.json">
<a href="javascript:;" class="dropdown-toggle link transition">
<i class="cart-icon iconfont"></i>
<span class="cart-txt">购物车</span>
<span class="cart-line">|</span>
<span class="cart-txt">0</span>
<i class="dropdown-arrow iconfont transition"></i>
</a>
<div class="dropdown-list dropdown-right">
<!-- 加载中 -->
<div class="dropdown-loading cart-loading"></div>
</div>
</div>
<script src="../js/jquery.js"></script>
<script src="../js/transition.js"></script>
<script src="../js/showhide.js"></script>
<script src="../js/dropdown.js"></script>
<script src="../js/cart.js"></script>
</body>
</html>
base.css https://www.cnblogs.com/chenyingying0/p/12363689.html
cart.css
/*公共样式 */
.link{
color:#4d555d;
}
a.link:hover{
color:#f01414;
}
.fl{
float:left;
}
.fr{
float:right;
}
/*提取出过渡样式，可公用*/
.transition{
-webkit-transition:all .5s;
-moz-transition:all .5s;
-ms-transition:all .5s;
-o-transition:all .5s;
transition:all .5s;
} /*icon*/
@font-face {
font-family: "iconfont";
src: url('../font/iconfont.eot?t=1582272973653'); /* IE9 */
src: url('../font/iconfont.eot?t=1582272973653#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMgAAsAAAAABxAAAALRAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqBbIFbATYCJAMMCwgABCAFhG0HQRssBsgekiSCCCFEuNlXEQBAPHzt93ru7n5ElURBCR2BR5Bliy51gKpGVNYCG9XxbMSbd+4zPSCMOgTu9Sct57/89MAB8gDg+U2hMJtwk9PLaOlpn+dyehPoQO6qb1lua9nY4/lRL8A4oEDHGrQICiQgT0F2R6CWvJtA25Ik3NGapi7gonAGBeKOLPLApRRRFCnfFOotM4t4zVEzPUnf8Cr+fvy3M1xIapkz8vi1agso+zX5VZFnqjVDIUG9nAvSPDI2AwpxtTVznr2QOHttk0N/eV0R0lLxqiJWmZb6Qf94iahzartgPc0mfvn7coJfFXdIIIM6Co4BTlN2+u4sWkuugcK7XzPWn03hfqHrBFzKHnD9N/PZ4F7P9ffhg8fc2Vs3r7PmkLOEZ8HuotvxoydrARZ8tPZoJtANHTbfLfNt8m1kb0r92n/hum2PejfY0bcssN9up2U/iqlrDF15exnd72H3eLIT35f1BRwJ/n/uTXKjpdzjBd/wyYYk987lMN+Ix9xY6SQYA1D9yB9yEQDktVT2m3/jYS3h8+ig6F+zU8BP8933OFL9KHBL8yaMMVH5U9VgQzG1jjUXXeWrbF+2/QZdCVrXRsUJjP2ZbpnBtYSmWY6kYRFZ0zJZ2M2o6diNuqYDaNukdn7HBGUvSgsbLRKEoZdI+j4jG/pOFvY3aub+om4Y9mg7G/4rdqyG7FZJEc+QBY5PQ1kgBvbszC2p70CiqfG0qI35HkRtchymp6RV87XIQHSJMbYJMYMxDDElOqwh+yFNI9BKiYIEliIxZi1ITcVtD0oRiA7cHEEhPAaxgMZNg2QCwoDD1oxb7fMdEJFJw6M9ooZiD4SykTuH0qVIA8hakwGJHuUemwmiDAyDQRhF6KAa0g3RaAjI2t5NgQiYFNKElFWBVLcZRk0p21v0/9sGbc7KOVLkKJrXiTlpChLymJJ5jVeCMoMREwAAAAA=') format('woff2'),
url('../font/iconfont.woff?t=1582272973653') format('woff'),
url('../font/iconfont.ttf?t=1582272973653') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg'); /* iOS 4.1- */
} .iconfont {
font-family: "iconfont" !important;
font-size: 14px;
font-style: normal;/*i标签自带斜体效果*/
-webkit-font-smoothing: antialiased;/*在webkit内核和火狐浏览器中，抗锯齿*/
-moz-osx-font-smoothing: grayscale;
} /*dropdown下拉组件*/
.dropdown{
position: relative;
}
.dropdown-toggle{
position: relative;
z-index:;
}
.dropdown-arrow{
display: inline-block;
vertical-align: middle;
background-repeat: no-repeat;
line-height:;/*否则图标字体会继承父元素的line-height属性，占据过多空间*/
}
.dropdown-list{
display: none;
position: absolute;
z-index:;
}
.dropdown-left{
left:;
right:auto;
}
.dropdown-right{
right:;
left:auto;
}
.dropdown-loading{
width:32px;
height:32px;
background:url(../img/loading.gif) no-repeat;
margin:20px;
} /*cart的dropdown独有样式*/
.cart{
width:160px;
height:42px;
background-color:#f01414;
line-height:42px;
z-index:;
margin:30px auto;
}
.cart-icon,
.cart-line,
.cart-txt{
display: inline-block;
}
.cart-txt{
margin:0 9px;
}
.cart .dropdown-toggle{
color:#fff;
display: block;
padding:0 0 0 12px;
border-right:1px solid #f3f5f7;
border-left:1px solid #f3f5f7;
}
.cart .dropdown-arrow{
color:#fff;
margin-left:5px;
vertical-align: middle;
}
.cart .dropdown-list{
width:300px;
border: 1px solid #cdd0d4;
padding:0 20px;
background-color: #fff;
top: 40px;
box-shadow: 0 0 3px 3px rgba(100,100,100,.1);
overflow:hidden;
box-sizing:content-box;
}
/*无商品*/
.cart-no-icon{
display: block;
float: left;
font-size: 40px;
color: #ccc;
line-height: 77px;
padding-left:80px;
}
.cart-no-txt{
display: block;
float: right;
color: #ccc;
line-height: 20px;
padding-top: 17px;
padding-right:80px;
}
/*有商品*/
.cart-loading{
padding: 37px 113px;
background-position: center;
}
.cart-list-h2{
font-weight: bold;
font-size: 14px;
}
.cart-item{
height: 70px;
padding: 0 12px;
border-top: 1px solid #ccc;
position: relative;
}
.cart-item-img{
display: block;
top: 14px;
position: absolute;
}
.cart-item-title{
position: absolute;
top: 2px;
left: 68px;
}
.cart-item-price{
position: absolute;
top: 24px;
left: 68px;
}
.cart-close{
position: absolute;
right: 12px;
top: 11px;
font-size:20px;
}
.cart-end{
height: 45px;
border-top: 1px solid #ccc;
padding: 10px 0;
position: relative;
}
.cart-end-txt{
position: absolute;
left: 10px;
}
.totalPrice{
position: absolute;
}
.cart-end-btn{
position: absolute;
right: 4px;
top: 15px;
background: red;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 3px;
cursor: pointer;
} /*鼠标移入*/
.cart:hover{
background-color:#fff;
box-shadow:0 0 3px 3px rgba(100,100,100,.1);
}
.cart-item:hover{
background-color: #f3f5f7;
}
.cart-active .dropdown-toggle{
color:#f01414;
background-color:#fff;
border-color:rgb(209,211,215);
}
.cart-active .cart-icon,
.cart-active .cart-line,
.cart-active .cart-txt,
.cart-active .dropdown-arrow{
color:#f01414;
}
.cart-active .cart-no-icon{
color:#ccc;
} /*showhide*/
.fadeOut{
opacity:;
visibility: hidden;
}
.slideUpDownCollapse{
height:0 !important;/*避免因为优先级不够而无法生效*/
padding-top:0 !important;
padding-bottom:0 !important;
}
.slideLeftRightCollapse{
width:0 !important;/*避免因为优先级不够而无法生效*/
padding-left:0 !important;
padding-right:0 !important;
}
jquery.js
transition.js https://www.cnblogs.com/chenyingying0/p/12363649.html
showhide.js https://www.cnblogs.com/chenyingying0/p/12363707.html
dropdown.js https://www.cnblogs.com/chenyingying0/p/12363739.html
cart.js
// 不要暴露在全局，使用匿名函数自执行
(function($){ "use strict"; //cart
//绑定事件 显示之前加载数据
$(".cart").on("dropdown-show",function(e){
loadOnce($(this),buildCartItem);
}).dropdown({
css3:true,
js:true,
animation:"slideUpDown"
}).on("dropdown-hide",function(){
$(this).find(".dropdown-list").hide();
});
//创建Cart的item结构
function buildCartItem($elem,data){
var list=$elem.find(".dropdown-list");
var html=""; if(!data.length){
html=`<i class="cart-icon iconfont cart-no-icon"></i>
<span class="cart-no-txt">购物车里还没有商品<br>赶紧去选购吧</span>
`;
}else{ html=`<h2 class="cart-list-h2">最新加入的商品</h2>`; for(var i=0;i<data.length;i++){
html+=`<div class="cart-item">
<img src="`+data[i]["img"]+`" class="cart-item-img">
<p class="cart-item-title text-ellipsis">`+data[i]["title"]+`</p>
<p class="cart-item-price">
<b>￥<span class="item1">`+data[i]["price"]+`</span> x <span class="item2">`+data[i]["num"]+`</span></b>
</p>
<a href="#"><i class="cart-close" data-idx="`+i+`">x</i></a>
</div>`; }
html+=`<div class="cart-end">
<div class="cart-end-txt">
共 <b id="totalC">0</b> 件商品 共计￥ <b id="totalP">0.00 </b>
</div>
<button class="cart-end-btn">去购物车</button>
</div>`;
}
list.html(html);
getTotal(); //点击删除
$(".cart-close").on("click",deleteCart);
//删除后计算总价
$(".cart-close").on("click",getTotal); }
//删除商品
function deleteCart(){
var index=$(this).data("idx");
$(".cart-item").eq(index).remove();
setIdx();
}
//计算总价
function getTotal(){ var item1s=$(".item1"),
item2s=$(".item2"),
len=item1s.length,
totalN=0,
totalP=0; for(var i=0;i<len;i++){
totalN+=Number(item2s.eq(i).html());
totalP+=Number(Number(item1s.eq(i).html())*Number(item2s.eq(i).html()).toFixed(2));
} $("#totalC").html(totalN);
$("#totalP").html(totalP);
}
//给.cart-close设置data-idx
function setIdx(){
var i=0;
$(".cart-close").each(function(){
$(this).data("idx",i);
i++;
});
} //加载一次数据
function loadOnce($elem,success){
var dataLoad=$elem.data("load"); if(!dataLoad) return; if(!$elem.data("loaded")){
$elem.data("loaded",true); $.getJSON(dataLoad).done(function(data){
success($elem,data);
}).fail(function(){
$elem.data("loaded",false);
});
}
} })(jQuery);
接下来是数据来源 dropdown-cart.json
[
{
"img":"../img/cart/1.png",
"title":"adidas 训练 男子",
"price":"10",
"num":"1"
},
{
"img":"../img/cart/2.png",
"title":"玉兰油多效修护三部曲",
"price":"10",
"num":"2"
},
{
"img":"../img/cart/3.png",
"title":"apple iphone x",
"price":"10",
"num":"2"
},
{
"img":"../img/cart/4.png",
"title":"飞利浦面条机",
"price":"10",
"num":"4"
},
{
"img":"../img/cart/5.png",
"title":"反馈游戏方向",
"price":"10",
"num":"1"
}
]
搞定~
jquery带下拉列表的购物车组件封装的更多相关文章
- jQuery实现淘宝购物车小组件
我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章将实现淘宝购物车小组件, 用原生js可以实现吗,当然可以,可是就是任性一回,就是想用jQuery 来实现下.HTML代码不多才4行,CSS ...
- jQuery组件封装之return this.each(function () {});
记录一下自己的调试历程 组件封装经常看到这么一段代码 $.fn.plugin = function (options) { return this.each(function (i,t) { new ...
- jQuery.uploadify文件上传组件实例讲解
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
- [WPF]带下拉列表的文本框
控件我已经弄好了,代码比较多,所以没办法全面介绍. 一开始我是直接继承Selector类来实现,做是做出来了,不过发现性能不太好.于是,我就想着自己来实现.毕竟我是做给自己用的,也不考虑过多的东西,也 ...
- 基于JQuery EasyUI的WebMVC控件封装(含源码)
JQuery EasyUI类库,大家不会陌生,出来已经有很多年了.个人感觉还是很好用的,作者更新频率也很快,bug也及时修复. 最近在整理以前的代码,找到了这个组件,它是将EasyUI组件封装成MVC ...
- ReactNative之从HelloWorld中看环境搭建、组件封装、Props及State
开篇呢,先给大家问个好,今天是中秋节,祝大家中秋节快乐!!虽然是中秋节,但是木有回家还是总结一下知识点写写博客吧,想着昨天总结一下的,但是昨天和几个同学小聚了一下,酒逢知己总是千杯少呢,喝的微醺不适合 ...
- 第二百二十三节，jQuery EasyUI，ComboBox(下拉列表框)组件
jQuery EasyUI,ComboBox(下拉列表框)组件,可以远程加载数据的下拉列表组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 C ...
- [开源] 基于Layui组件封装的后台模版，HG-Layui-UI通用后台管理框架V1.0版
HG框架简介 HG-Layui-UI框架,是基于layui最新版UI搭建的一套通用后台管理框架,借鉴了市面上各大主流框架风格,采用iframe标签页实现,保留了传统开发模式的简单实用性. 为快速开发减 ...
- 循序渐进VUE+Element 前端应用开发(20）--- 使用组件封装简化界面代码
VUE+Element 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- Kettle自定义jar包供javascript使用
我们都知道 Kettle 是用 Java 语言开发,并且可以在 JavaScript 里面直接调用 java 类方法.所以有些时候,我们可以自定义一些方法,来供 JavaScript 使用. 本篇文章 ...
- 【java面试】算法篇
1.冒泡排序 /** * 冒泡排序 * 比较相邻的元素.如果第一个比第二个大,就交换他们两个. * 对每一对相邻元素作同样的工作,从开始第一对到结尾的最后一对.在这一点,最后的元素应该会是最大的数. ...
- 频繁插入(insert)的业务，用什么存储引擎更合适？ | 数据库系列（转）
本文来自微信公众号 继续回答星球水友提问: 沈老师,MyISAM只支持表锁,但网上文章却说,在并发插入量比较大的时候,比较适合使用MyISAM,这矛盾吗? 这个问题,涉及MySQL表锁的一些细节,借着 ...
- 基于python的感知机
一. 1.感知机可以描述为一个线性方程,用python的伪代码可表示为: sum(weight_i * x_i) + bias -> activation #activation表示激活函数,x ...
- 啥叫ORM
名字: object / relation map 对象关系映射 定义: 通过(描述对象和数据库之间映射的)元数据把对象自动转为关系数据 一般都是作为中间件 优缺: 优点是自动化,屏蔽了SQL语句,而 ...
- iOS开发tip-图片方向
概述 相信稍微接触过iOS图片相关操作的同学都遇到过图片旋转的问题,另外使用AVFoundation进行拍照的话就会遇到前后摄像头切换mirror问题就让人更摸不着头脑了.今天就简单和大家聊一下iOS ...
- win10打开相机提示我们找不到你的相机
- Day2-Python3基础-文件操作
1. 字符编码与转码 需知: 1.在python3默认编码是unicode 2.unicode 分为 utf-32(占4个字节),utf-16(占两个字节),utf-8(占1-4个字节), so ut ...
- Static、Final、static final
Static.Final.static final final可以修饰:属性,方法,类,局部变量(方法中的变量) 用final关键字修饰的变量,只能进行一次赋值操作,并且在生存期内不可以改变它的值. ...
- CTF--HTTP服务--路径遍历（拿到www-data用户权限）
开门见山 1. 扫描靶机ip,发现PCS 172.18.4.20 2. 用nmap扫描靶机开放服务及版本 3. 再扫描靶机的全部信息 4. 用nikto工具探测http服务敏感信息 5. 用dirb工 ...