Проблема с конструктором слайдера.
Собственно. что я делаю не так? Первые два слайдера не работают. Спотыкается все на 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> |
Перезаписывается 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> |
PashPP, на первый взгляд ООП маловато. Код похож на одну большую свалку. Кстати, конструкторы пишутся с заглавной. Это только мое мнение.
|
Цитата:
Цитата:
Ну не на большую же, на маленькую пока что ) Цитата:
|
Цитата:
Цитата:
Цитата:
http://learn.javascript.ru/widgets-oop p.s.: хардкода тоже хватает Цитата:
|
Часовой пояс GMT +3, время: 22:15. |