jquery带下拉列表的购物车组件封装

按照国际惯例先放效果图

安静的时候它长这样

 

 等待加载时它长这样(功能是设置的按需加载,网速慢或者加载数据大时会出现)

 

 加载之后购物车没有商品时这样

 

 有商品长这样

 接下来放代码:

cart.html

<!DOCTYPE html>
<html lang="en"head>
    meta charset="UTF-8"title>cart</link rel="stylesheet" href="../css/base.css"="../css/cart.css"bodydiv class="cart dropdown"  data-active="cart" data-load="../js/dropdown-cart.json">
        a href="javascript:;" class="dropdown-toggle link transition">
            i ="cart-icon iconfont">&#xe613;ispan ="cart-txt">购物车span="cart-line">|>0="dropdown-arrow iconfont transition">&#xe642;a="dropdown-list dropdown-right"<!-- 加载中 -->
            ="dropdown-loading cart-loading"></divscript src="../js/jquery.js"script="../js/transition.js"="../js/showhide.js"="../js/dropdown.js"="../js/cart.js"html>

base.css https://www.cnblogs.com/chenyingying0/p/12363689.html

cart.css

/*公共样式 */
    .link{
        color:#4d555d;
    }
    a.link:hover{#f01414;
    }
    .fl{
        float:left;
    }
    .fr{right;
    }
    提取出过渡样式,可公用
    .transition{
        -webkit-transition:all .5s;
        -moz-transition:
        -ms-transition:
        -o-transition:
        transition:all .5s;
    }

icon
    @font-face {
      font-family: "iconfont";
      src: url('../font/iconfont.eot?t=1582272973653');  IE9 */ 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'),1)"> chrome,firefox,opera,Safari,Android,iOS 4.2+ 
      url('../font/iconfont.svg?t=1582272973653#iconfont') format('svg');  iOS 4.1- */
    }

    .iconfont { "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{ relative;
        z-index:4;
    }
    .dropdown-arrow{
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
        line-height:1;否则图标字体会继承父元素的line-height属性,占据过多空间
    .dropdown-list{ none; absolute;3;
    }
    .dropdown-left{
        left:0;
        right:auto;
    }
    .dropdown-right{
    .dropdown-loading{
        width:32px;
        height:
        background:url(../img/loading.gif) no-repeat;
        margin:20px;
    }

cart的dropdown独有样式
    .cart{160px;42px;
        background-color:#f01414;2;30px auto;
    }
    .cart-icon,.cart-line,.cart-txt{ inline-block;
    }
    .cart-txt{0 9px;
    }
    .cart .dropdown-toggle{#fff; block;
        padding:0 0 0 12px;
        border-right:1px solid #f3f5f7;
        border-left:1px solid #f3f5f7;
    }
    .cart .dropdown-arrow{
        margin-left:5px; middle;
    }
    .cart .dropdown-list{300px;
        border: 1px solid #cdd0d4;0 20px; #fff;
        top: 40px;
        box-shadow: 0 0 3px 3px rgba(100,100,.1);
        overflow:hidden;
        box-sizing:content-box;
    }
    无商品
    .cart-no-icon{ left;
        font-size: #ccc; 77px;
        padding-left:80px;
    }
    .cart-no-txt{ right; 20px;
        padding-top: 17px;
        padding-right:80px;
    }
    有商品
    .cart-loading{ 37px 113px;
        background-position: center;
    }
    .cart-list-h2{
        font-weight: bold; 14px;
    }
    .cart-item{ 70px; 0 12px;
        border-top: 1px solid #ccc;
    .cart-item-img{ absolute;
    }
    .cart-item-title{ 2px; 68px;
    }
    .cart-item-price{ 24px;
    .cart-close{ 12px; 11px;20px;
    }
    .cart-end{ 45px; 10px 0;
    .cart-end-txt{ 10px;
    }
    .totalPrice{
    .cart-end-btn{ 4px; 15px; red; 10px 15px;
        border-radius: 3px;
        cursor: pointer;
    }

    鼠标移入
    .cart:hover{0 0 3px 3px rgba(100,.1);
    }
    .cart-item:hover{ #f3f5f7;
    }
    .cart-active .dropdown-toggle{
        border-color:rgb(209,211,215);
    }
    .cart-active .cart-icon,.cart-active .cart-line,.cart-active .cart-txt,.cart-active .dropdown-arrow{
    .cart-active .cart-no-icon{#ccc;
    }

showhide
    .fadeOut{
        opacity: 0;
        visibility: hidden;
    }
    .slideUpDownCollapse{0 !important;避免因为优先级不够而无法生效0 !important;
        padding-bottom:0 !important;
    }
    .slideLeftRightCollapse{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",(e){
        loadOnce($(this),buildCartItem);
    }).dropdown({
        css3:true,js:
    }).on("dropdown-hide",1)">(){
        $(this).find(".dropdown-list").hide();
    });
    创建Cart的item结构
     buildCartItem($elem,data){
        var list=$elem.find(".dropdown-list");
        var html="";

        if(!data.length){
            html=`<i class="cart-icon iconfont cart-no-icon">&#xe613;</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"删除后计算总价
        $(".cart-close").on("click"删除商品
     deleteCart(){
        var index=$(this).data("idx");
        $(".cart-item").eq(index).remove();
        setIdx();
    }
    计算总价
     getTotal(){    

        var item1s=$(".item1"item1s.length,totalN=0var 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
     setIdx(){
        var i=0;
        $(".cart-close").each((){
            $(;
        });
    }

    加载一次数据
     loadOnce($elem,success){
        var dataLoad=$elem.data("load");

        if(!dataLoad) returnif(!$elem.data("loaded")){
            $elem.data("loaded",1)">);

            $.getJSON(dataLoad).done((data){
                success($elem,data);
            }).fail((){
                $elem.data("loaded",1)">false);
            });    
        }    
    }


})(jQuery);

接下来是数据来源 dropdown-cart.json

[
    {
        "img":"../img/cart/1.png"
    },{
        "img":"../img/cart/2.png"
    }
]

搞定~

 

相关文章

1.第一步 设置响应头 header(&#39;Access-Control-Allow...
$.inArray()方法介绍 $.inArray()函数用于在数组中搜索指定的...
jquery.serializejson.min.js的妙用 关于这个jquery.seriali...
JS 将form表单数据快速转化为object对象(json对象) jaymou...
jQuery插件之jquery.spinner数字智能增减插件 参考地址:http...