가격범위 슬라이드
본문
http://happycgi.com/program/detail.php?number=17178
위 링크를 사용하여 가격범위 슬라이드를 만드려고 하는데
혹시 가격이 나오는게 이런식으로 따라다닐 수 있는지요?
<!DOCTYPE HTML>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
<title> jQuery </title>
<script src="pay.min.js"></script>
<script src="jquery-ui.js"></script>
<!-- 스타일 -->
<style type="text/css">
.slider-price-wrap {
margin: 0 auto;
width: 100%;
}
.slider-price {
position: relative;
margin: 0 auto;
width: 100%;
height: 4px;
background: #ccc;
}
.slider-price .ui-slider-handle {
position: absolute;
top: -5px;
width: 10px;
height: 10px;
margin-left: -5px;
border-radius: 50%;
border: 1px solid #007C4F;
background: #fff;
box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
outline: none;
}
.slider-price .ui-slider-range {
position: absolute;
height: 4px;
background: #007C4F;
}
.slider-price-wrap .slider-result {
margin-top: 20px;
width: 240px;
font-size: 14px;
}
.slider-price-wrap .slider-result:after {
content: "";
display: block;
clear: both;
}
.slider-price-wrap .slider-result .left {
float: left;
width: 50%;
}
.slider-price-wrap .slider-result .right {
float: right;
width: 50%;
text-align: right;
}
.slider-price-wrap .slider-result .num {
font-size: 14px;
color: #000000;
width: inherit;
}
.slider-price-wrap .slider-result .right .num {
text-align: right;
}
</style>
<!-- // 스타일 -->
</head>
<body>
<div id="wrap">
<div class="slider-price-wrap">
<div id="priceRangeSet" class="slider-price"></div>
<div class="slider-result">
<p class="left">
<input type="text" class="num" id="priceRangeMin" name="priceRangeMin" title="가격 최소값(숫자만 입력 가능)"
style="ime-mode:disabled;" onkeypress="txtOnlyNum(event)"
onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" />
</p>
<p class="right">
<input type="text" class="num" id="priceRangeMax" name="priceRangeMax" title="가격 최대값 (숫자만 입력 가능)"
style="ime-mode:disabled;" onkeypress="txtOnlyNum(event)"
onkeyup="this.value=this.value.replace(/[^0-9]/g,'')" />
</p>
</div>
</div><!-- // slider-price-wrap -->
</div>
<!-- // wrap -->
<!-- 스크립트 -->
<script>
var numberSetComma = function (val) {
while (/(\d+)(\d{3})/.test(val.toString())) {
val = val.toString().replace(/(\d+)(\d{3})/, '$1' + ',' + '$2');
}
return val;
};
var numberDelComma = function (val) {
return parseInt(val.replace(/,/g, ""));
};
var txtOnlyNum = function (e) {
var keycode = (window.netscape) ? e.which : e.keyCode;
if (!(keycode == 0 || keycode == 8 || (keycode >= 48 && keycode <= 57))) {
if (window.netscape) {
e.preventDefault();
} else {
e.returnValue = false;
}
}
}
var initPriceRange = function (minVal, maxVal) {
//슬라이더 init
var priceRS = $("#priceRangeSet");
var priceRMax = $("#priceRangeMax");
var priceRMin = $("#priceRangeMin");
priceRS.slider({
range: true,
min: minVal,
max: maxVal,
values: [minVal, maxVal],
slide: function (event, ui) {
priceRMin.val(numberSetComma(ui.values[0]));
priceRMax.val(numberSetComma(ui.values[1]));
}
});
//텍스트 폼에 최초 최대값 세팅
priceRMin.val(numberSetComma(priceRS.slider("values", 0))).attr("title", "가격 최소값(숫자만 입력 가능, " +
numberSetComma(priceRS.slider("values", 0)) + " 이상)");
priceRMax.val(numberSetComma(priceRS.slider("values", 1))).attr("title", "가격 최대값(숫자만 입력 가능, " +
numberSetComma(priceRS.slider("values", 1)) + " 이하)");
//접근성 처리를 위한 텍스트 폼과 slider UI 연동
priceRMin.bind({
keyup: function () {
if ($(this).val().length > 0) {
$(this).val(numberSetComma(numberDelComma($(this).val())));
}
},
blur: function () {
var originNum = numberDelComma($(this).val());
var maxFormVal = numberDelComma(priceRMax.val());
if (originNum < minVal) {
alert("최소 기준가격은 " + numberSetComma(minVal) + "원 입니다. 최소 기준가격 이상으로 입력해주세요.");
$(this).val(numberSetComma(minVal));
$(this).focus();
}
if (originNum >= maxFormVal) {
alert("가격 검색 시작값이 끝값보다 크거나 같습니다. 끝값인 " + priceRMax.val() + "보다 작은 값을 입력해주세요.");
$(this).val(numberSetComma(minVal));
$(this).focus();
}
priceRS.slider({
values: [numberDelComma(priceRMin.val()), numberDelComma(priceRMax.val())]
});
}
});
priceRMax.bind({
keyup: function () {
if ($(this).val().length > 0) {
$(this).val(numberSetComma(numberDelComma($(this).val())));
}
},
blur: function () {
var originNum = numberDelComma($(this).val());
var minFormVal = numberDelComma(priceRMin.val());
if (originNum > maxVal) {
alert("최대 기준가격은 " + numberSetComma(maxVal) + "원 입니다. 최대 기준가격 이하로 입력해주세요.");
$(this).val(numberSetComma(maxVal));
$(this).focus();
}
if (originNum <= minFormVal) {
alert("가격 검색 끝값이 시작값보다 작거나 같습니다. 시작값인 " + priceRMin.val() + "보다 큰 값을 입력해주세요.");
$(this).val(numberSetComma(maxVal));
$(this).focus();
}
priceRS.slider({
values: [numberDelComma(priceRMin.val()), numberDelComma(priceRMax.val())]
});
}
});
};
$(function () {
initPriceRange(0, 300000); //로드시 혹은 로드 후 리스팅된 상품가격의 최소 최대값
});
</script>
<!-- //스크립트 -->
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
