Показать сообщение отдельно
  #1 (permalink)  
Старый 27.08.2012, 01:56
Профессор
Отправить личное сообщение для PashPP Посмотреть профиль Найти все сообщения от PashPP
 
Регистрация: 26.07.2012
Сообщений: 281

Проблема с конструктором слайдера.
Собственно. что я делаю не так? Первые два слайдера не работают. Спотыкается все на path, вроде.

<!DOCTYPE html>
<style>
body {
   padding-left: 40px;
}

#knobId {
   background-color: #7f9;
}
</style>
<body>
<div id='sl1'></div>
<div id='sl2'></div>
<div id='sl3'></div>

</body>
<script type="text/javascript">
function addSlider(width, sliderId) {
   var sliderWidth = width;

   var slider = document.createElement('div')
   slider.id = sliderId + '_sliderId';
   slider.style.width= sliderWidth + 'px';
   slider.style.height= 15 + 'px';
   slider.style.border = '3px solid #777';
   slider.style.position = 'relative';
   document.getElementById(sliderId).appendChild(slider);

   var knob = document.createElement('div');
   knob.id = sliderId +'_knobId'
   knob.className= 'knob'
   knob.style.width = 24 +'px';
   knob.style.height = 15+ 'px';
   knob.style.border= '3px solid black';
   knob.style.position = 'relative';
   knob.style.top= -3 +'px';
   knob.style.left = 0 + 'px';

   slider.appendChild(knob);

   function setValue(x) {
      knob.style.left = x + 'px';
   };

   knob.addEventListener('mousedown', startListen, true)

   var start;
   var end;
   var path;
   document.onmousedown = mouseClick;
   function mouseClick(event){
           start = event.pageX
   }
   document.onmousemove = mouseUp;
   function mouseUp(event){
      end = event.pageX
      path = end-start
   }
   var pos;
   function startListen(e) {
      pos = parseInt(knob.style.left, 10)
      slider.addEventListener('mousemove', changeKnobPos, true);
   };

   function changeKnobPos(e) {
      console.log(sliderId+" "+ path +" "+ pos)
      if (pos + path +29 < sliderWidth && pos + path >=0 ){
         knob.style.left = pos + path +'px';
      }
   }

   document.addEventListener('mouseup', endListen, true)
   function endListen() {
      slider.removeEventListener('mousemove', changeKnobPos, true);
   }
   this.getValue= function() {return parseInt(knob.style.left, 10)};
   this.setValue= function(x) {knob.style.left = x + 'px'};
}
var bb = new addSlider(300, 'sl1');
var gg = new addSlider(400, 'sl2');
var ff = new addSlider(500, 'sl3');

</script>
Ответить с цитированием