1. 程式人生 > >淘寶購物車效果(加,減,刪除,全選)

淘寶購物車效果(加,減,刪除,全選)

效果:

 

 

頁面需要引入jquery,ArtTemplate 

 

頁面用假資料進行渲染

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
 margin: 0;
 padding: 0;
 }
 a{
 color: #666;
 text-decoration: none;
 }
 body{
 padding:20px;
 color: #666;
 }
 .fl{
 float: left;
 }
 .fr{
 float: right;
 }
 table{
 border-collapse: collapse;
 border-spacing: 0;
 border: 0;
 text-align: center;
 width: 937px;
 }
 th,td{
 border: 1px solid #cadeff;
 }
 th{
 background: #e2f2ff;
 border-top: 3px solid #a7cbff;
 height: 30px;
 }
 td{
 padding: 10px;
 color: #444;
 }
 tbody tr:hover{
 background: RGB(238,246,255);
 }
 .checkbox{width: 60px;}
 .goods{width: 300px;}
 .goods span{
 width: 180px;
 margin-top: 20px;
 text-align: left;
 float: left;
 }
 .price{width: 130px;}
 .count{width: 90px;}
 .count .add, .count input, .count .reduce{
 float: left;
 margin-left: -1px;
 position: relative;
 z-index: 0;
 }
 .count .add, .count .reduce{
 height: 23px;
 width: 17px;
 border: 1px solid #e5e5e5;
 background: #f0f0f0;
 text-align: center;
 line-height: 23px;
 color: #444;
 }
 .count .add:hover, .count .reduce:hover{
 color: #f50;
 z-index: 3;
 border-color: #f60;
 cursor: pointer;
 }
 .count input{
 width: 50px;
 height: 15px;
 line-height: 15px;
 border: 1px solid #aaa;
 color: #343434;
 text-align: center;
 padding: 4px 0;
 background-color: #fff;
 z-index: 2;
 }
 .subtotal{
 width: 150px;
 color: red;
 font-weight: bold;
 }
 .operation{width: 80px;}
 .operation span:hover, .a:hover{
 cursor: pointer;
 color: red;
 text-decoration: underline;
 }
 img{
 width: 100px;
 height: 80px;
 margin-right: 10px;
 float: left;
 }
 .foot{
 width: 935px;
 margin-top: 10px;
 color: #666;
 height: 48px;
 border: 1px solid #c8c8c8;
 background-image: linear-gradient(RGB(241,241,241),RGB(226,226,226));
 position: relative;
 z-index: 8;
 }
 .foot div, .foot a{
 line-height: 48px;
 height: 48px;
 }
 .foot .select-all{
 width: 100px;
 height: 48px;
 line-height: 48px;
 padding-left: 5px;
 color: #666;
 }
 .foot .closing{
 border-left: 1px solid #c8c8c8;
 width: 100px;
 text-align: center;
 color: #000;
 font-weight: bold;
 background: RGB(238,238,238);
 cursor: pointer;
 }
 .foot .total{
 margin: 0 20px;
 cursor: pointer;
 }
 .foot #priceTotal, .foot #selectedTotal{
 color: red;
 font-family: "微軟雅黑";
 font-weight: bold;
 }
 .foot .select{
 cursor: pointer;
 }
 .foot .select .arrow{
 position: relative;
 top: -3px;
 margin-left: 3px;
 }
 .foot .select .down{
 position: relative;
 top: 3px;
 display: none;
 }
 .show .select .down{
 display: inline;
 }
 .show .select .up{
 display: none;
 }
 .foot .select:hover .arrow{
 color: red;
 }
 .foot .selected-view{
 width: 935px;
 border: 1px solid #c8c8c8;
 position: absolute;
 height: auto;
 background: #fff;
 z-index: 9;
 bottom: 48px;
 left: -1px;
 display: none;
 }
 .show .selected-view{display: block;}
 .foot .selected-view div{height: auto;}
 .foot .selected-view .arrow{
 font-size: 16px;
 line-height: 100%;
 color: #c8c8c8;
 position: absolute;
 right: 330px;
 bottom: -9px;
 }
 .foot .selected-view .arrow span{
 color: #fff;
 position: absolute;
 left: 0;
 bottom: 1px;
 }
 #selectedViewList{
 padding: 20px;
 margin-bottom: -20px;
 }
 #selectedViewList div{
 display: inline-block;
 position: relative;
 width: 100px;
 height: 80px;
 border: 1px solid #ccc;
 margin: 10px;
 }
 #selectedViewList div span{
 display: none;
 color: #fff;
 font-size: 12px;
 position: absolute;
 top: 0;
 right: 0;
 width: 60px;
 height: 18px;
 line-height: 18px;
 text-align: center;
 background: RGBA(0,0,0,.5);
 cursor: pointer;
 }
 #selectedViewList div:hover span{
 display: block;
 }
    </style>
</head>

<body>
    <form action="">
        <table id="cartTable">
            <thead>
                <tr>
                    <th><label><input class="check-all check" type="checkbox" /> 全選</label></th>
                    <th>商品</th>
                    <th>單價</th>
                    <th>數量</th>
                    <th>小計</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="J_newsListContainer">
                <script id="ListContainer" type="text/html">
                    {{each list as value i}}
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                <td class="goods"><img src="images/1.jpg" alt="" /><span>{{value.name}}</span></td>
                <td class="price">{{value.price}}</td>
                <td class="count"><span class="reduce">-</span><input class="count-input" type="text" value="{{value.num}}" /><span class="add">+</span></td>
                <td class="subtotal">{{value.price * value.num}}</td>
                <td class="operation"><span class="delete">刪除</span></td>
            </tr>
            {{/each}}
            </script>
                <!--   <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                <td class="goods"><img src="images/2.jpg" alt="" /><span>Canon/佳能 PowerShot SX50 HS</span></td>
                <td class="price">3888.50</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
                <td class="subtotal">3888.50</td>
                <td class="operation"><span class="delete">刪除</span></td>
            </tr>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                <td class="goods"><img src="images/3.jpg" alt="" /><span>Sony/索尼 DSC-WX300</span></td>
                <td class="price">1428.50</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
                <td class="subtotal">1428.50</td>
                <td class="operation"><span class="delete">刪除</span></td>
            </tr>
            <tr>
                <td class="checkbox"><input class="check-one check" type="checkbox" /></td>
                <td class="goods"><img src="images/4.jpg" alt="" /><span>Fujifilm/富士 instax mini 25</span></td>
                <td class="price">640.60</td>
                <td class="count"><span class="reduce"></span><input class="count-input" type="text" value="1" /><span class="add">+</span></td>
                <td class="subtotal">640.60</td>
                <td class="operation"><span class="delete">刪除</span></td>
            </tr> -->
            </tbody>
        </table>
        <div class="foot" id="foot">
            <label class=" fl select-all"><input type="checkbox" class="check-all check" /> 全選</label>
            <a class="fl delete" id="deleteAll" href="javascript:;" rel="external nofollow" >刪除</a>
            <div class="fr closing">結 算</div>
            <div class="fr total">合計:¥<span id="priceTotal">0.00</span></div>
            <div class="fr select" id="selected">已選商品<span id="selectedTotal">0</span>件<span class="arrow up">︽</span><span class="arrow down">︾</span></div>
            <div class="selected-view">
                <div id="selectedViewList" class="clearfix">
                    <div><img src="images/1.jpg"><span>取消選擇</span></div>
                </div>
                <span class="arrow">◆<span>◆</span></span>
            </div>
        </div>
    </form>
</body>

</html>

</html>
<script src="react-demos-master/build/jquery.min.js"></script>
<script src="ArtTemplate.js"></script>
<script src="index.js"></script>
//index.js

var index = {
    proList: [
        { "name": 'Casio/卡西歐 EX-TR350', "price": 20, "num": 1 },
        { "name": '大衣', "price": 37.4, "num": 1 },
        { "name": '手套', "price": 85.00, "num": 2 },
        { "name": '襪子', "price": 12.00, "num": 2 },
        { "name": '佳能 PowerShow', "price": 100, "num": 1 },
        { "name": '索尼 DSC-WX300', "price": 120.22, "num": 1 }
    ],
    init: function() {
        var self = index;
        self.renderProList();
        self.checkAll();
        self.add();
        self.reduce();
        self.delete();
    },

    /*渲染商品列表*/
    renderProList: function() {
        var self = index;
        var data = { "list": self.proList };
        var html = template('ListContainer', data);
        $('#J_newsListContainer').html(html);


    },

    /*全選控制*/
    checkAll: function() {
        $("body").on('change', '.check', function() {
            if ($(this).hasClass("check-all")) { //全選按鈕
                var list = $('#J_newsListContainer tr');
                var numAll = 0; //總數量
                var tollAll = 0; //總價格
                list.each(function(index, value) {
                    var count_input = +($(value).find('.count-input').val());
                    tollAll += count_input;
                    numAll += +($(value).find('.subtotal').html()) * count_input;

                })
                if ($(this).prop('checked')) { //選中
                    $(".check-all").prop("checked", true) //下面的全選也選中
                    $("#J_newsListContainer .check").prop("checked", true) //複選框全部選中
                    $("#selectedTotal").html(tollAll)
                    $("#priceTotal").html(numAll)
                } else { //未選中
                    $(".check-all").prop("checked", false) //下面的全選也不選中
                    $("#J_newsListContainer .check").prop("checked", false) //複選框全部不選中
                    $("#selectedTotal").html(0)
                    $("#priceTotal").html(0)

                }
            } else { //單選按鈕
                var all = $("#J_newsListContainer tr").length;
                var list = $('#J_newsListContainer input:checked');
                var num = 0;
                var price = 0;

                list.each(function(index, value) {
                    var count_input = +($(value).parents("tr").find('.count-input').val());
                    num += count_input;
                    price += +($(value).parents("tr").find('.subtotal').html()) * count_input;

                })

                // 單選控制全選
                if (all == list.length) {
                    $(".check-all").prop("checked", true) //全選選中
                } else {
                    $(".check-all").prop("checked", false) //全選不選中
                }
                if ($(this).prop('checked')) { //選中
                    $("#selectedTotal").html(num)
                    $("#priceTotal").html(price)


                } else { //未選中

                    $("#selectedTotal").html(num)
                    $("#priceTotal").html(price)
                }

            }

        })
    },

    /*加數量*/
    add: function() {
        $("#J_newsListContainer").on('click', '.add', function() {
            var count = $(this).parents('tr').find('.count-input').val();
            count = +(count) + 1;
            $(this).parents('tr').find('.count-input').val(count);
            var list = $('#J_newsListContainer input:checked');
            var num = 0;
            var price = 0;

            list.each(function(index, value) {
                var count_input = +($(value).parents("tr").find('.count-input').val());
                num += count_input;
                price += +($(value).parents("tr").find('.subtotal').html()) * count_input;
            })

            $("#selectedTotal").html(num)
            $("#priceTotal").html(price)


        })
    },

    /*減數量*/
    reduce: function() {
        $("#J_newsListContainer").on('click', '.reduce', function() {
            var count = $(this).parents('tr').find('.count-input').val();
            if (count > 1) {
                count = +(count) - 1;
                $(this).parents('tr').find('.count-input').val(count);
                var list = $('#J_newsListContainer input:checked');
                var num = 0;
                var price = 0;

                list.each(function(index, value) {
                    var count_input = +($(value).parents("tr").find('.count-input').val());
                    num += count_input;
                    price += +($(value).parents("tr").find('.subtotal').html()) * count_input;
                })

                $("#selectedTotal").html(num)
                $("#priceTotal").html(price)
            }


        })
    },

    /*刪除*/
    delete: function() {
        $("#J_newsListContainer").on('click', '.delete', function() {
            $(this).parents('tr').remove();
            var list = $('#J_newsListContainer input:checked');
            var num = 0;
            var price = 0;

            list.each(function(index, value) {
                var count_input = +($(value).parents("tr").find('.count-input').val());
                num += count_input;
                price += +($(value).parents("tr").find('.subtotal').html()) * count_input;
            })

            $("#selectedTotal").html(num)
            $("#priceTotal").html(price)

        })
    }

}

index.init();