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 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- KALI美化-设置CONKY开机启动
简介 Conky 是一个应用于桌面环境的系统监视软件,可以在桌面上监控系统运行状态.网络状态等一系列参数 https://github.com/brndnmtthws/conky/ 详细配置文档:ht ...
- 通过示例学习rholang（下部：课程8-13）
课程8——状态通道和方法 保存数据 到现在为止,你已经很擅长于发送数据到元组空间和从元组空间中获取数据.但是无论你在什么时候进行计算,你有时需要把一些数据放在一边晚点才使用.几乎所有编程语言都有变量的 ...
- WEB打印控件LODOP的使用
有人说她是Web打印控件,因为她能打印.在浏览器中以插件的形式出现,用简单一行语句就把整个网页打印出来: 有人说她是打印编程接口,因为她介于浏览器和打印设备之间,是个通道和桥梁,几乎能想到的打印控制事 ...
- P4语言环境安装（一）前端编译器p4c、后端编译器p4c-bm2-ss
这个P4安装环境是在2020-2-8安装的,安装环境卡了我好几天,把遇到的问题记录下来,有需要的同学可以参考一下,要是说错了或者有问题的话,评论或mail:guidoahead@163.com联系我都 ...
- Python黑客编程知识点整理
Python转义字符 转义字符 意义 ASCII码值(十进制) \a 响铃(BEL) 007 \b 退格(BS) ,将当前位置移到前一列 008 \f 换页(FF),将当前位置移到下页开头 012 \ ...
- Kubelet 中的 “PLEG is not healthy” 到底是个什么鬼？
原文链接:深入理解 Kubelet 中的 PLEG is not healthy 在 Kubernetes 社区中,PLEG is not healthy 成名已久,只要出现这个报错,就有很大概率造成 ...
- 开源虚拟机Bochs安装以及踩坑
因为想要写一个简单的操作系统,所以需要安装虚拟机来模拟出硬件,VMware不适合这个场景,因为会使用硬件级别的虚拟化,而bochs这个开源虚拟机,是用软件虚拟了所有的硬件,所以调试可以做到非常细的粒度 ...
- WTL对话框添加背景图片
WTL91_5321_Final + VS2013 + WIN7 // MainDlg.h : interface of the CMainDlg class // ///////////////// ...
- 当你的程序在朋友的机器上显示丢失msvcr100d.dll的时候
0. 给朋友发了个DEMO,收到提示:丢失 msvcr100d.dll 1. 一看是运行库文件,赶紧让朋友下载并安装vc++ 2010 redistribution,朋友反馈还是提示丢失这个dll文件 ...
- qt客户端程序使用svg图片资源的几种方法
直接使用svg格式文件资源的情况 1. 直接在UI控件属性面板中选择部分支持icon图标的控件的icon来源,这样图标可以显示 2.给toolbutton添加样式 qproperty-icon: ur ...