Форум

PashPP · #1 (**permalink**) 27.08.2012, 01:56

Собственно. что я делаю не так? Первые два слайдера не работают. Спотыкается все на 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>

PashPP · #2 (**permalink**) 27.08.2012, 01:59

Перезаписывается document.onmousedown ?
Как обойти тогда?

update
-----------------
Действительно. Решил это так. Чтоб тема даром не висела, расскажите, что я сделал вообще криво и не так?

<!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.getElementById(sliderId).onmousedown = mouseClick;
   function mouseClick(event){
           start = event.pageX
   }
   document.getElementById(sliderId).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>

nerv_ · #3 (**permalink**) 27.08.2012, 10:09

PashPP, на первый взгляд ООП маловато. Код похож на одну большую свалку. Кстати, конструкторы пишутся с заглавной. Это только мое мнение.

PashPP · #4 (**permalink**) 27.08.2012, 11:52

Сообщение от nerv_

ООП маловато

Как это?

Сообщение от nerv_

Код похож на одну большую свалку

Почему?
Ну не на большую же, на маленькую пока что )

Сообщение от nerv_

конструкторы пишутся с заглавной.

Запомню.

nerv_ · #5 (**permalink**) 27.08.2012, 12:27

Сообщение от PashPP

Почему?

потому, что

Сообщение от nerv_

ООП маловато

Сообщение от PashPP

Как это?

Вы создаете объект. У объекта, как правило, должны быть свойства и методы, по средством которых с ним будет осуществляться взаимодействие. То, что относиться непосредственно к созданию объекта, вынесите в процедуру инициализации.
http://learn.javascript.ru/widgets-oop

p.s.: хардкода тоже хватает

Цитата:

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';

Форум

Справочник

Discord чат

Курсы javascript