Ползунок JQuery перестал работать после обновления до JQuery 1.7.1

До обновления до JQuery 1.7.1 как вертикальный, так и горизонтальный слайдер работали нормально. Теперь, когда я обновился до 1.7.1, все перестает работать. Ниже мои коды.

$("#HorizontalScrollBar").slider({
    change: HorizontalHandleChange,
    slide: HorizontalHandleSlide,
    min: 0,
    max: 100
});

$("#VerticalScrollBar").slider({    
    orientation: "vertical",
    change: VerticalHandleChange,
    slide: VerticalHandleSlide,
    min: -100,
    max: 0
});

Коды ручек горизонтального слайдера

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({ 
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);    
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").attr("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({ 
        scrollLeft: +ui.value * (maxScroll / 100)   
    });
}

и вертикальные ручки-ползунки

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({ 
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").attr("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({ 
        scrollTop: -ui.value * (maxScroll / 100)   
    });
}

В любом случае, я надеюсь, что кто-нибудь сможет найти для меня решение, чтобы мои ползунки работали с JQuery 1.7.1. Спасибо.

К вашему сведению, ползунки используются на 4 DIV, т.е. Top, MidLeft, MidRight & Bottom, где вертикальный ползунок работает с MidLeft и MidRight, а горизонтальный ползунок работает с MidRight, Top и Bottom, хотя я не думаю, что это может быть причиной проблемы.


slider jquery jquery-ui-slider jquery-1.7
person asyadiqin    schedule 11.01.2012    source источник
comment
С какой версии вы обновлялись? Вы получаете сообщения об ошибках в консоли?   -  person JJJ    schedule 11.01.2012
comment
Начиная с JQuery 1.5.1 и в консоли вообще нет ошибки. Просто перестанет работать. Оба ползунка появляются, и колесико мыши работает, но содержимое в DIV вообще не перемещается/не меняется.   -  person asyadiqin    schedule 11.01.2012

Ответы (1)


arrow_upward
2
arrow_downward

scrollWidth и scrollHeight являются свойствами, используйте метод .prop для их получения и установки.

function HorizontalHandleChange(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").animate({
        scrollLeft: +ui.value * (maxScroll / 100)
    }, 100);
}

function HorizontalHandleSlide(e, ui) {
    var maxScroll = $(".HorizontalScroll").prop("scrollWidth") - $(".HorizontalScroll").width();
    $(".HorizontalScroll").attr({
        scrollLeft: +ui.value * (maxScroll / 100)
    });
}

function VerticalHandleChange(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").animate({
        scrollTop: -ui.value * (maxScroll / 100)
    }, 100);
}

function VerticalHandleSlide(e, ui) {
    var maxScroll = $(".VerticalScroll").prop("scrollHeight") - $(".VerticalScroll").height();
    $(".VerticalScroll").attr({
        scrollTop: -ui.value * (maxScroll / 100)
    });
}

Это изменение пришло из jQuery 1.6, где .attr был разделен на два метода, .attr и .prop, где .attr работает с атрибутами, а .prop работает со свойствами.

person Kevin B    schedule 11.01.2012