Почему не работает код
<!DOCTYPE HTML>
<html>
<head>
<style>
#s1, #s2, #s3 {
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
width: 310px;
height: 15px;
margin: 15px;
}
#p1, #p2, #p3 {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 10px;
top: -5px;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="s1">
<div id="p1"></div>
</div>
<div id="s2">
<div id="p2"></div>
</div>
<div id="s3">
<div id="p3"></div>
</div>
<script>
function func() {
func.sliders = function(event) {
var parent = this.parentNode; // контейнер ползунка
var thumbCoords = this.getBoundingClientRect();
var shiftX = event.pageX - thumbCoords.left;
var sliderCoords = parent.getBoundingClientRect();
document.onmousemove = function(event) {
var newLeft = event.pageX - shiftX - sliderCoords.left;
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = parent.offsetWidth - this.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
this.style.left = newLeft + 'px';
};
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
};
document.getElementById("p1").onmousedown = func.sliders;
document.getElementById("p2").onmousedown = func.sliders;
document.getElementById("p3").onmousedown = func.sliders;
}
func();
</script>
</body>
</html>
Хочу чтоб три слайдера работали от одной функции, которая должна быть методом общей функции. Как ни пытался не получается. Помогите разобраться в чем причина? |
dmitry111, во-первых нету контейнера p3
во-вторых функция вызывается до определения соответствующих контейнеров в DOM (нужно вызывать после div-ов) |
lord2kim,
извините, всю ночь разбирался в этих this и наследовании.. Исправил, но скрипт все равно не работает ( За основу взят пример из учебника. И модифицирован для работы с множеством слайдеров. В примере используются: - this - это объект (ползунок слайдера). - this.parentNode - родитель ползунка. |
<!DOCTYPE HTML>
<html>
<head>
<style>
#s1, #s2, #s3 {
border-radius: 5px;
background: #E0E0E0;
background: -moz-linear-gradient(left top , #E0E0E0, #EEEEEE) repeat scroll 0 0 transparent;
background: -webkit-gradient(linear, left top, right bottom, from(#E0E0E0), to(#EEEEEE));
background: linear-gradient(left top, #E0E0E0, #EEEEEE);
width: 310px;
height: 15px;
margin: 15px;
}
#p1, #p2, #p3 {
width: 10px;
height: 25px;
border-radius: 3px;
position: relative;
left: 10px;
top: -5px;
background: blue;
cursor: pointer;
}
</style>
</head>
<body>
<div id="s1">
<div id="p1"></div>
</div>
<div id="s2">
<div id="p2"></div>
</div>
<div id="s3">
<div id="p3"></div>
</div>
<script>
function func() {
func.sliders = function(event) {
var self = this;
var parent = this.parentNode; // контейнер ползунка
var thumbCoords = this.getBoundingClientRect();
var shiftX = event.pageX - thumbCoords.left;
var sliderCoords = parent.getBoundingClientRect();
document.onmousemove = function(event) {
var newLeft = event.pageX - shiftX - sliderCoords.left;
if (newLeft < 0) {
newLeft = 0;
}
var rightEdge = parent.offsetWidth - self.offsetWidth;
if (newLeft > rightEdge) {
newLeft = rightEdge;
}
self.style.left = newLeft + 'px';
};
document.onmouseup = function() {
document.onmousemove = document.onmouseup = null;
};
};
document.getElementById("p1").onmousedown = func.sliders;
document.getElementById("p2").onmousedown = func.sliders;
document.getElementById("p3").onmousedown = func.sliders;
}
func();
</script>
</body>
</html>
Работает! В чем была ошибка: Если вложенная функция вызывается как функция, то значением this будет либо глобальный объект (в нестрогом режиме), либо undefined (в строгом режиме). Соответственно, если переменной присвоить значение this в родительской функции, то можно манипулировать этой переменной и соответственно this во вложенных функциях! |
эммм.. а как тут поставить себе плюсик? :)
|
Цитата:
|
необходимость!!!
две ночи просидел над кодом, чтоб понять в чем ошибка :write: |
Нах тебе плюсик, купи пива :D
PS: считай, что я тебе два раза подряд поставил за усидчивость |
:agree: так с пивом и сидел. Сидел бы без пива за полчаса бы управился :)
ок, спасибо ;) |
| Часовой пояс GMT +3, время: 11:28. |