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">&#xe613;</i>
            <span class="cart-txt">購物車</span>
            <span class="cart-line">|</span>
            <span class="cart-txt">0</span>
            <i class="dropdown-arrow iconfont transition">&#xe642;</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:4;
    }
    .dropdown-arrow{
        display: inline-block;
        vertical-align: middle;
        background-repeat: no-repeat;
        line-height:1;/*否則圖示字體會繼承父元素的line-height屬性，占據過多空間*/
    }
    .dropdown-list{
        display: none;
        position: absolute;
        z-index:3;
    }
    .dropdown-left{
        left:0;
        right:auto;
    }
    .dropdown-right{
        right:0;
        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:2;
        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: 0;
        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 >&#xe613;</i>
                    <span >購物車里還沒有商品<br>趕緊去選購吧</span>
                `;
        }else{

            html=`<h2 >最新加入的商品</h2>`;

            for(var i=0;i<data.length;i++){
                html+=`<div >
                            <img src="https://www.cnblogs.com/chenyingying0/p/`+data[i]["img"]+`" >
                            <p >`+data[i]["title"]+`</p>
                            <p >
                                <b>￥<span >`+data[i]["price"]+`</span> x <span >`+data[i]["num"]+`</span></b>
                            </p>                    
                            <a href="https://www.cnblogs.com/chenyingying0/p/#"><i  data-idx="`+i+`">x</i></a>
                        </div>`;

            }
            html+=`<div >
                        <div >
                            共 <b id="totalC">0</b> 件商品 共計￥ <b id="totalP">0.00 </b>
                        </div>
                        <button >去購物車</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"
    }
]

搞定~

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7154.html

標籤：jQuery

上一篇：頭部布局，搜索驗證和AJAX自動搜索提示，并封裝成組件，提高代碼復用性

下一篇：$.getJSON獲取json資料失敗