Library
JQuery STEP 10 - JQuery Slider
IT의 큰손
2023. 5. 2. 12:46
728x90
★ 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>
■ 실행 결과
728x90