JQuery UI - Slider

Question

jQuery UI Slider를 사용하려고합니다. 그리고 내가하고 싶은 것은 슬라이더의 각 단계마다 슬라이더 막대에 점 (.)을 그려야한다는 것입니다. 내가 넣고 싶은 요점은 내가 가지고있는 이미지입니다.

제안 사항?

도움에 감사드립니다. 친애하는.

Answer 1

작은 트릭으로이 작업을 수행 할 수 있습니다. 이 같은 사업부 설정할 수 있습니다

#imgSlider {width:100px; background:url('path/to/img.gif') repeat-x top left;} 

을 그리고 슬라이더의 슬라이드 기능에 해당 사업부의 폭을 조정할 수 있습니다, 당신은 그 일부만 공개하는이 방법에 의해

// ... slider settings .... 
slide: function (event, ui) { 
    $('#imgSlider').width = ui.value; 
} 

을 div를 사용하면 개별 이미지를 추가/삭제하는 환상을 만들 수 있습니다. 일종의 정적 배경이 필요하다면, #imgSlider를 다른 div에 랩핑하고 배경을 지정하십시오.

또는

당신은이 방법으로 그것을 할 수 있습니다 (내 첫 번째 아이디어) :

1. 추가 또는 div에 이미지를 제거하는 '그리기'기능을, 만들기를 (또는 요소).
2. 해당 함수에 매개 변수를 추가하면 이미지를 추가하거나 제거할지 여부를 결정합니다 (간단한 부울이 수행함).
3. 슬라이더를 사용하여 기능을 허용하는 slide 옵션을 사용하십시오 (jQuery UI 예제 페이지에서 볼 수있는 것처럼).
4. 그 slide 함수에서 현재 값이 새 값보다 낮거나 큰지 확인하십시오. 참/거짓 값을 얻을 수 있습니다 (즉, 새 슬라이더 값이 작거나 같습니까?).
5. 값을 비교하여 방금 가져온 매개 변수로 '그리기'기능을 호출하십시오. 이제는 이미지를 추가하거나 제거해야하는 경우가됩니다.

최소 및 최대 값 처리와 같은 미세 조정을 수행합니다. 그러나 논리는 효과가있다.