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