jQuery 플러그인 슬라이더는 드래그 슬라이더를 구현하여 가격대를 선택합니다._jquery

일부 제품 견적 웹사이트에서는 사용자가 필터링할 수 있도록 일련의 가격대를 제공해야 합니다. 필터링된 범위 외에 맞춤 가격대를 추가하여 사용자에게 하나의 선택권을 더 제공합니다. 이 기사에서는 CSS와 결합된 jQuery 플러그인을 사용하여 슬라이더를 사용하여 가격 범위를 선택합니다. 설명을 보려면 이 기사를 읽어보세요.

jQuery UI에는 매우 유용한 드래그 슬라이더 플러그인인 슬라이더 플러그인이 있습니다. 슬라이더 드래그를 구현하려면 페이지 헤드에 다음 js를 로드해야 합니다.

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.core.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.widget.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.mouse.js"></script> 
<script type="text/javascript" src="js/ui/jquery.ui.slider.js"></script> 

물론, 프로젝트 운영 효율성을 고려한다면 위의 여러 js를 하나의 js로 압축할 수 있습니다. 대규모 WEB 애플리케이션 프로젝트에서는 이를 고려해야 합니다.
이러한 관련 js는 jquery ui 공식 웹사이트
에서 다운로드할 수 있습니다. 다음으로 기본 HTML 코드를 작성합니다.

<ul class="price_list"> 
  <li class="title">价格范围：</li> 
  <li><a href="#">3000元以下</a></li> 
  <li><a href="#">3000-4000元</a></li> 
  <li><a href="#">4000-5000元</a></li> 
  <li><a href="#">5000-6000元</a></li> 
  <li><a href="#">6000-7000元</a></li> 
  <li><a href="#">7000-8000元</a></li> 
  <li><a href="#">8000-9000元</a></li> 
  <li><a href="#">9000-10000元</a></li> 
  <li><a href="#">10000元以上</a></li> 
  <li id="custom"><a href="javascript:;" id="show">自定义</a> 
    <div id="slider_wrap"> 
     <div id="slider"> 
       <div id="range"></div> 
     </div> 
     <p><input type="text" class="input" id="start" value="0" /> - 
     <input type="text" class="input" id="end" value="3000" /> 
     <input type="button" class="btn" id="btn_ok" value="确 定" /></p> 
    </div> 
  </li> 
</ul> 

가격 범위는 일련의 li로 구성됩니다. 마지막 li에는 사용자 정의 세트 ID를 제공하고 슬라이더 선택을 표시해야 하는 div #slider_wrap을 포함합니다. 물론 이 div는 기본적으로 숨겨져 있습니다. . 모양 효과를 얻으려면 CSS를 사용해야 합니다.

CSS

CSS를 통해 페이지를 멋지게 보이게 만드세요.

.price_list{list-style:none} 
.price_list li{float:left; line-height:22px; margin-right:10px; padding:2px 6px} 
.price_list li.title{display:block; width:60px; height:60px;} 
#custom{border:1px solid #d3d3d3; padding:0 16px 0 2px; background:url(images/icon.gif) 
 no-repeat right 8px; position:relative;} 
.custom_show{background:url(images/icon.gif) no-repeat right 18px;} 
#show{width:100%; height:26px} 
.input{width:66px; height:20px; line-height:20px; border:1px solid #d3d3d3} 
.btn{width:54px; height:24px; line-height:24px; background:url(images/btn_bg.gif) 
repeat-x; border:1px solid #d3d3d3; cursor:pointer} 
#slider_wrap{width:250px; height:80px; padding:10px; position:absolute; left:-1px; 
top:22px; border:1px solid #d3d3d3; background:#fff; display:none; z-index:1001} 
#slider{width:230px; height:40px; margin:5px auto; border:none; background: 
url(images/line_bg.gif) no-repeat} 
#range{width:220px; margin-left:4px} 
#slider_wrap p{width:230px; margin:4px auto} 

드롭다운 div를 팝업시켜 슬라이딩 선택 범위의 CSS를 표시하고, 절대 및 상대 위치 지정을 통해 표시 레이어의 위치를 ​​결정하는 것이 핵심입니다.
표시 레이어에 있는 슬라이더 플러그인의 CSS는 jquery ui에 포함된 CSS에서 가져온 것이며, 약간의 수정을 가했습니다.

.ui-slider {position:relative; text-align:left;} 
.ui-slider .ui-slider-handle {position:absolute; z-index:2; width:11px; height:14px; 
cursor: default; background:url(images/arr.gif) no-repeat } 
.ui-slider .ui-slider-range {position:absolute; z-index:1; display:block; border:0; 
background:#f90} 
.ui-slider-horizontal {height:10px; } 
.ui-slider-horizontal .ui-slider-handle {top:14px; margin-left:0; } 
.ui-slider-horizontal .ui-slider-range {top:20px; height:4px; } 
.ui-slider-horizontal .ui-slider-range-min {left:0; } 
.ui-slider-horizontal .ui-slider-range-max {right:0; } 

jQuery

먼저 "사용자 정의"를 클릭하면 슬라이더 범위에 표시된 레이어를 아래로 내려야 합니다. "사용자 정의"를 클릭하면 드롭다운 레이어가 표시되고, 다시 클릭하면 드롭다운 레이어가 숨겨집니다.

$(function(){ 
  $("#show").click(function(){ 
    if($("#slider_wrap").css("display")=="none"){ 
      $("#slider_wrap").show(); 
      $("#custom").css("background-position","right -18px"); 
    }else{ 
      $("#slider_wrap").hide(); 
      $("#custom").css("background-position","right 8px"); 
    } 
  }); 
}); 

어떤 학생들은 왜 클릭 대신 토글 방법을 사용하지 않는지 궁금해할 수 있습니다. 시도해 봤는데 효과가 있었지만 나중에 드롭다운 레이어를 숨기려면 드롭다운 레이어에서 '확인'을 클릭해야 합니다. 토글 방식을 사용하는 경우 "확인" 버튼을 클릭한 후 드롭다운 레이어를 팝업하려면 두 번 클릭해야 하므로 이 문제를 해결하기 위해 클릭 방식 + 판단을 선택했습니다.
그런 다음 슬라이더 플러그인을 호출하세요.

$("#range").slider({ 
  min: 0, 
  max: 10000, 
  step: 500, 
  values: [0, 3000], 
  slide: function(event, ui){ 
    $("#start").val(ui.values[0]); 
    $("#end").val(ui.values[1]); 
  } 
}); 

슬라이더 최대값은 최대 10000, 최소값 최소값은 0, 슬라이더 각 슬라이드의 거리 단계는 500, 기본 초기 범위 값은 0~3000으로 설정했습니다. 슬라이더를 밀 때 두 개의 텍스트 상자 #start 및 #end에 값을 할당합니다. 더 많은 매개변수 설정 및 메소드 호출에 대해서는 jquery ui 공식 웹사이트를 확인하세요:
마지막으로 가격대를 선택한 후 "확인" 버튼을 클릭하여 슬라이더 선택 상자를 닫고 "사용자 지정" 상태를 변경합니다.

$("#btn_ok").click(function(){ 
  $("#slider_wrap").hide(); 
  $("#custom").css("background-position","right 8px"); 
  var start = $("#start").val(); 
  var end = $("#end").val(); 
  $("#show").html(start+"-"+end); 
}); 

이렇게 하면 우리가 원하는 효과를 볼 수 있으니 직접 가서 시도해 보세요.

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.