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带下拉列表的购物车组件封装

最新文章

热门文章