2012-01-12 3 views
1

저는 슬라이더 범위를 시각적으로 알려주도록 슬라이더 크기 조절 기능을 만들고 싶습니다 (예 : 대부분의 브라우저에서 스크롤 막대처럼).Jquery UI가 슬라이더 핸들 너비를 변경합니까?

인터넷 검색과 답변이 .ui-slider-handle 클래스를 수정 한 것으로 보입니다.

나는이 작업을 수행 한 핸들은 이제 방법 오프 최종 실행 :

var range = 2 + Math.floor(Math.random() * 10); 

$('#slider').slider({max: range}); 

$('.ui-slider-handle').width($('#slider').width()/range); 

또한 여기에 예를 살 수있는 링크는 다음과 같습니다 Example 이 내가 슬라이더를 설정하기 위해 사용하고있는 코드입니다 : http://tcusers.com/examples/6473423467/example.html

마치 라이브러리가 슬라이더의 이전 너비를 사용하는 것처럼 보이므로 원하는 것을 얻기 위해 누구나 제안 사항이 있습니까? 차라리 jQuery UI 라이브러리를 해킹하지 않아도됩니다. 미리

덕분

답변

4

문제는 슬라이더의 핵심이다. 그것을 이동하기 위해 jQueryUI는 "왼쪽"스타일을 0 %에서 100 %로 변경합니다. 원래 슬라이드는 끝 부분을 넘어선 다. 좁은 부분이기 때문에 눈치 채지 못한다. 더 넓게 사용하면 왼쪽에서 100 %로 시작한다는 것을 알게됩니다.

여기에서 읽을 수 있듯이 http://bugs.jqueryui.com/ticket/4398에는 기본 제공 솔루션이 없습니다.

그러나 해결책은 다음과 같습니다. 이것은 핸들이 슬라이더 최소에서 최대 슬라이더로 슬라이드함에 따라 여백을 가변적으로 (0과 핸들 폭 사이에서) 설정하여 수행됩니다. 여기

: http://jquery-ui.googlecode.com/svn/trunk/demos/slider/side-scroll.html

주제에

더 많은 정보 :

http://osdir.com/ml/jquery-ui/2009-03/msg00886.html

+0

와우, 추가 정보에 대한 감사, 그 옆 스크롤 예는 꽤 버그 내가 전환을 한 눈에, 비록입니다 탭은 시궁창을 미끄러 져 움직일 수 있습니다. 시궁창은 IE7 또는 IE9에서 잘 작동하지 않습니다. – Chris

+2

또한 "이것이 설계된 것"이라고 주장 할 수는 없습니다. 가난한 디자인 결정? – Chris

관련 문제