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 前端应用,比较不错的一点就是界面组件化,我们可以根据重用的指导方针,把界面内容拆分为各个不同的组合,每一个模块可以是一个组件,也可以是多个组件的综合体,而且这一个过程非常方便. ...
随机推荐
- ZJCTF预赛一个.py的逆向题
#!/usr/bin/env python # -*- coding:utf-8 -*- from hashlib import sha256 def xor(a,b): result = [] fo ...
- java小心机(4)| 继承与组合的爱恨情仇
在java中,有两种主要复用代码的方法:继承和组合. 继承,是OOP的一大特性,想必大家都非常熟悉了;组合,其实也很常见,只是不知道它的名字罢了. 继承 子类拥有父类的基本特性,需使用extend关键 ...
- nuxt.js学习初探
项目目标 把我个人博客的前端界面部分使用nuxt框架进行服务端渲染 nuxt介绍 nuxt可以把spa根据路由将单页面分割成多页面,比起vue的ssr渲染要更容易使用 nuxt的使用 项目创建 npx ...
- 使用postman测试接口
1.什么是接口测试 其实接口测试就和普通功能测试没什么区别,区别就是功能测试是在页面上点点点,在页面上输入值,提交数据看结果,而接口测试没有页面,通过接口规范文档上的调用地址.请求参数,拼接报文,然后 ...
- MySQL 高可用之主从复制
MySQL主从复制简介 Mysql的主从复制方案,都是数据传输的,只不过MySQL无需借助第三方工具,而是自带的同步复制功能,MySQL的主从复制并不是磁盘上文件直接同步,而是将binlog日志发送给 ...
- java操作数组转list集合删除元素报错ConcurrentModificationException
public static void main(String[] args) { ArrayList<String> list = new ArrayList<String>( ...
- JS中for...in循环陷阱及遍历数组的方式对比
JavaScript中有很多遍历数组的方式,比较常见的是for(var i=0;i<arr.length;i++){},以及for...in...循环等,这些遍历都有各自的优缺点,下面来看看各种 ...
- springIOC源码接口分析(六):ResourceLoader
参考博客: https://www.cnblogs.com/jixp/articles/10702486.html 一 定义方法 Spring提供了ResourceLoader接口用于实现不同的Res ...
- vue2.x中子组件修改父组件通过pops传递过来的值
首先,父组件向子组件传值 这里面主要是在传值的时候,加上.sync 然后子组件通过 $emit 修改 如此即可完成对父组件的数据操作
- 如何最快实现物流即使查询功能-物流轨迹查询API
上一篇文章我们介绍了一个物流服务提供商,推荐大家使用快递鸟接口,主要介绍了如何注册账号,获得密钥,找不到注册地址的,我在发一下: http://kdniao.com/reg 今天我们来聊如何利用快递鸟 ...