JQuery STEP 10 - JQuery Slider

★ Slider을 이용해서 상품 목록 만들기

• range : true, 버튼을 두개 생성
• slide() : 슬라이더에 따른 금액 표시

■ HTML 코드

<h1>List</h1>

<div id="search">
    가격 : <span>35,000원 ~ 70,000원</span>
    <div id="price"></div>
</div>

<div id="list">

    <div class="item">
        <img src="images/rect_icon01.png">
        <div>상품명</div>
        <div>15000</div>
    </div>

    <!-- (div.item>(img[src=images/rect_icon$$.png])+(div>lorem3)+(div{$$$}))*18 -->
    <div class="item">
        <img src="images/rect_icon01.png" alt="">
        <div>Lorem, ipsum dolor.</div>
        <div>50000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon02.png" alt="">
        <div>Blanditiis, eum nostrum.</div>
        <div>100000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon03.png" alt="">
        <div>Cum, cupiditate omnis.</div>
        <div>50000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon04.png" alt="">
        <div>Eos, odio eum.</div>
        <div>40000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon05.png" alt="">
        <div>Iure, eligendi blanditiis.</div>
        <div>30000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon06.png" alt="">
        <div>Praesentium, maiores provident!</div>
        <div>20000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon07.png" alt="">
        <div>Saepe, dicta modi!</div>
        <div>90000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon08.png" alt="">
        <div>Rerum, doloremque voluptate.</div>
        <div>80000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon09.png" alt="">
        <div>Consequuntur, rerum eum?</div>
        <div>70000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon10.png" alt="">
        <div>Distinctio, quas reprehenderit.</div>
        <div>30000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon11.png" alt="">
        <div>Deleniti, in exercitationem!</div>
        <div>90000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon12.png" alt="">
        <div>Nobis, optio quas.</div>
        <div>100000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon13.png" alt="">
        <div>Laboriosam, molestias eveniet?</div>
        <div>80000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon14.png" alt="">
        <div>Modi, impedit corporis.</div>
        <div>10000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon15.png" alt="">
        <div>Dolores, nobis soluta!</div>
        <div>80000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon16.png" alt="">
        <div>Id, deleniti esse.</div>
        <div>90000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon17.png" alt="">
        <div>Fugiat, aut veniam!</div>
        <div>70000</div>
    </div>
    <div class="item">
        <img src="images/rect_icon18.png" alt="">
        <div>Nam, reprehenderit nulla?</div>
        <div>99999</div>
    </div>

</div>

<div id="adddialog">
    <table id="add">
        <tr>
            <th>이미지</th>
            <td><input type="file" id="txtimg"></td>
        </tr>
        <tr>
            <th>상품명</th>
            <td><input type="text" id="txtname"></td>
        </tr>
        <tr>
            <th>가격</th>
            <td><input type="number" id="txtprice" min="10000" max="100000" step="1000"></td>
        </tr>
    </table>

    <input type="button" value="추가하기" id="btnadd">
</div>

<input type="button" value="추가하기" id="btndialog">

 

■ CSS 코드

<style>

    body {
        width : 880px;
        margin : 20px auto;
    }

    #list::after {
        content : '';
        display : block;
        clear : both;
    }

    #list .item {
        border : 1px solid #999;
        width : 150px;
        height : 220px;
        text-align: center;
        padding : 20px 10px;
        margin : 15px;
        float : left;
    }

    #list .item img {
        display : block;
        margin : 0 auto;
        width : 126px;
        height: 126px;
        object-fit: cover;
    }

    #list .item div:nth-child(2) {
        margin-top : 20px;
        font-weight: bold;
        color : #555;
    }

    #list .item div:nth-child(3) {
        color : tomato;
    }

    #search {
        border : 1px solid #999;
        border-radius: 5px;
        padding : 15px;
        margin : 15px;
        width : 745px;
    }

    #price {
        margin : 15px;
    }

    #add {
        border : 1px solid #CCC;
        border-collapse: collapse;
        margin-bottom : 10px;
        margin-left : 15px;
    }

    #add th, #add td {
        border : 1px solid #CCC;
        padding : 5px;
    }

    #btnadd {
        margin-left : 15px;
    }

</style>

 

■ JavaScript

<script src="js/jquery-3.6.4.js"></script>
<script src="js/jquery-ui.js"></script>
<script>

    $('.item').each((index, item) => {
        //자바스크립트
        //- 숫자.toLocaleString()
        let price = parseInt($(item).children().eq(2).text()).toLocaleString();

        $(item).children().eq(2).text(price);
    });

    $('#price').slider({
        range : true,
        min : 10000,
        max : 100000,
        step: 1000,
        values : [ 35000, 70000],
        slide : function(event, ui) {
            // $('#search > span').text(ui.value.toLocaleString());
            $('#search > span').text(
                ui.values[0].toLocaleString()
                + "원 ~ " +
                ui.values[1].toLocaleString()
                + "원"
            );

            $('#list .item').each((index, item) => {

                //30000 > 30,000

              let price = parseInt($(item).children().eq(2).text().replace(/,/g, ''));

              if(price >= parseInt(ui.values[0])
                        && price <= parseInt(ui.values[1])) {
                            $(item).show();
                        } else {
                            $(item).hide();
                        }

            });

        }
    });

    $('#btnadd').click(function() {
    // alert($('#txtimg').val().replace('C:\\fakepath\\', ''));

    // $('#txtimg').val();
    // $('#txtname').val();
    // $('#txtprice').val();

    $('#list').append(
        `
        <div class="item">
            <img src="images/${$('#txtimg').val().replace('C:\\fakepath\\', '')}" alt="">
            <div>${$('#txtname').val()}</div>
            <div>${parseInt($('#txtprice').val()).toLocaleString()}</div>
        </div>
        `
    );

    $('#txtimg').val('');
    $('#txtname').val('');
    $('#txtprice').val('');

    $('#adddialog').dialog('close');

    });

    $('#adddialog').hide();

    $('#btndialog').click(function() {
        $('#adddialog').dialog({
            width : 450,
            height : 250,
            title : '상품추가',
            resizable : false,
            // draggable : false
            modal : true
        });

        /*

            대화상자
            1. modeless
                - 대화상자가 열려있어도, 부모창이 포커스를 가질 수 있다.
                - 작업 > 병렬(부모, 자식)
            2. modal
                - 대화상자가 열려있으면, 부모창이 포커스를 가질 수 없다.
                - 작업 > 직렬(자식 > (완료) > 부모)

        */
    });



</script>

 

■ 실행 결과

실행 결과

 

상품 추가