JQuery Slider 이벤트 처리기 콜백

Question

머리글 첫 번째 jquery를 통해 작업 중이며 jquery UI를 다루는 장이 있습니다. 특히이 예제는 슬라이더 위의 해당 슬라이더 값을 표시하는 jquery 슬라이더를 통해 걷고 있습니다. 스크린 샷 : http://i.imgur.com/ahRRy.png?1 그러나, 나는 큰 어려움 코드를 이해하는 데 :

html로 :

<h3>Distance from Creature (in ft.):</h3> 
       <input type="text" id="distance" class="just_display" name="creature_distance" readonly="readonly"/> 
       <div id="slide_dist"></div> 

<h3>Creature Weight (in lbs.):</h3> 
       <input type="text" id="weight" class="just_display" name="creature_weight" readonly="readonly"/> 
       <div id="slide_weight"></div> 

<h3>Creature Height (in ft.):</h3> 
       <input type="text" id="height" class="just_display" name="creature_height" readonly="readonly"/> 
       <div id="slide_height"></div> 

JQuery와 :

//3a. slide_dist 
     $("#slide_dist").slider({ 
      value:0, 
      min: 0, 
      max: 500, 
      step: 10, 
      slide: function(event, ui) { 
       $("#distance").val(ui.value); 
      } 
     }); 
    $("#distance").val($("#slide_dist").slider("value")); 



     //3b. slide_weight 

     $("#slide_weight").slider({ 
      value:0, 
      min: 0, 
      max: 5000, 
      step: 5, 
      slide: function(event, ui) { 
       $("#weight").val(ui.value); 
      } 
     }); 

     $("#weight").val($("#slide_weight").slider("value")); 

     //3c. slide_height 
     $("#slide_height").slider({ 
      value:0, 
      min: 0, 
      max: 20, 
      step: 1, 
      slide: function(event, ui) { 
       $("#height").val(ui.value); 
      } 
     }); 

     $("#height").val($("#slide_height").slider("value")); 

내가 심각하게 슬라이더 방법 슬라이드 매개 변수에 의해 혼란 스러워요 :

slide: function(event, ui) { 
     $("#height").val(ui.value); 
    } 

내가 말할 수있는 바로는, 이것은 chan 슬라이더 위의 값을 슬라이더의 값과 일치하도록 지정하십시오. 그러나 그런 경우라면 슬라이더 메서드 다음의 라인은 무엇을해야합니까?

$("#height").val($("#slide_height").slider("value")); 

같은 작업을하는 것은 무엇입니까? 모든 입력이 감사하겠습니다.

Answer 1

이 줄 : jQueryUI에 의해 정의 된

slide: function(event, ui) { 
    $("#height").val(ui.value); 
} 

은 "슬라이드"이벤트에 대한 이벤트 처리기를 정의한다. 이벤트 처리기는 슬라이드 중에 마우스가 움직일 때마다 슬라이더의 업데이트 된 값으로 #height을 업데이트합니다.

(당신이 준 상황에서)이 줄 :

$("#height").val($("#slide_height").slider("value")); 

는 단순히 처음 0에 #height의 값을 설정인가 (슬라이더의 초기 값이 0, 당신의 value 옵션을 볼 수 있습니다 각 슬라이더는 0으로 초기화되고 value:0으로 초기화됩니다.

두 가지의 차이점은 마우스가 슬라이더를 움직일 때마다 실행되고 두 번째는 슬라이더가 초기화 된 직후에 한 번 실행되어 #height 요소 (이 경우)의 초기 값을 제공한다는 것입니다.

또 다른 방법은 두 번째 코드 단편이 없으면 0 요소가 처음에는 표시되지 않는다는 뜻입니다.