2011-09-07 4 views
1

사용자 지정 디자인으로 간단한 슬라이더를 설정하려고하지만 슬라이더 핸들이 작동하지 않습니다. 나는 내가 꽤 졸 렸던 무엇인가 쉬운 cuz를 놓쳤다라고 생각한다. 샘플 코드를 살펴볼 수 있다면 기쁩니다.jQuery 슬라이더 핸들이 슬라이드되지 않습니다.

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
     <title></title> 
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script> 
     <script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script> 

     <style type="text/css" rel="stylesheet"> 
      body { background-color: green; } 

      #slider { 
       float: left; 
       width: 19px; height: 338px; 
       background-image: url('images/bg_scroller.png'); 
       background-position: center center; 
       background-repeat: no-repeat; 
      } 

      #slider-handle { 
       position: absolute; cursor: pointer; 
       width: 19px; height: 31px; 
       background-image: url('images/scroller.png'); 
       background-position: center center; 
       background-repeat: no-repeat; 
      } 
     </style> 

     <script type="text/javascript"> 
      $(document).ready(function(){ 
       $('#slider').slider({ 
        orientation: "vertical", 
        min: 0, 
        max: 100, 
        handle: '#slider-handle', 
        stop: function (event, ui) { 
         console.log("stop",ui) 
         //ul.animate({'left' : ui.value * -1}, 500); 
        }, 
        slide: function (event, ui) { 
         console.log("slide",ui) 
         //ul.css('left', ui.value * -1); 
        } 
       }); 
      }); 
     </script> 

    </head> 

    <body> 

     <div id="slider"> 
      <div id="slider-handle"></div> 
     </div> 

    </body> 
</html> 

샘플 코드도 여기에 배치됩니다. http://www.zpnd.com/sak/slider.php

+2

졸린 시간에는 코드를 작성하지 마십시오! – ShankarSangoli

+0

물론, 왜 안 되니? 나는 잠자리를 얻으려면 새로운 직업이 필요하거나 복권에 당첨 될뿐입니다. – Tim

답변

2

jQuery 슬라이더 위젯이 사용하지 않는 핸들을 만들고 있습니다. 이 밖으로 시도 :

http://jsfiddle.net/petersendidit/YkjGN/2/

+0

고맙습니다. 내 CSS에는 필요한 CSS가 없습니다. – Tim

+0

누락 된 CSS는 무엇입니까? jquery-ui CSS 또는 CSS? 어쩌면 다른 사람들도 그 CSS를 놓치고 있을까요? stackoverflow는 qustions를 요구하는 사람들뿐만 아니라 모든 사용자에게 이익을 주어야합니까? – anneb

0

이유 #slider-handlewidth#sliderwidth19px와 동일하다. 핸들 width은 덜 움직여야 움직이는 것을 볼 수 있습니다.

+0

#slider에 대해 더 큰 너비를 시도했지만 아무런 변화가 없습니다. 나는 이것을 수직으로 작업하기를 원했다. – Tim

2

'핸들'는 jQuery를 UI의 슬라이더에 대한 옵션이 아닙니다.

슬라이더 핸들 div와 'handle'옵션을 제거하고 대신 CSS를 'ui-slider-handler '로 변경하면 올바르게 작동합니다.

여기에서 슬라이더 문서를 볼 수 있습니다. http://jqueryui.com/demos/slider/#option-animate

+1

나는 이것에 두번째 ... @Tim, 당신은 틀린 css 것을 얻었다 ... 여기있다 [민주당 원] (http://jsfiddle.net/reigel/d5Hrs/) ... 당신은 기본 CSS를 포함하고 싶을 수도있다 너무.... – Reigel

관련 문제