Слайдер jquery не работает с jquery-1.6!

Question

Этот код слайдера отлично работает с более старой версией jquery, такой как jquery-1.5.Но он не работает должным образом, когда я пытался интегрировать его с последней версией jquery - jquery-1.6.

Вы можете попробовать здесь - содержимое не прокручивается, когда вы вдольслайдер.Контент должен прокручиваться вдоль ползунка, когда вы перетаскиваете и перемещаете его вперед и назад.

Вот часть кода,

function init_scrollbar ()
{
    //scrollpane parts
    scroll_frame = $('#scroll-frame'); // scroll-frame
    scroll_content = $('#scroll-content'); // scroll-content
    scroll_location_pixel = 0;
    original_location_scroll_handle = 0;
    original_width_scroll_content = scroll_content.width();

    scrollbar = $('#content-slider').slider({
        min: 0,
        animate: true,
        create: on_scrollcreate,
        change: on_scrollchange,
        slide: on_scrollslide
    });
}

Я думаю, что это событие slide делаетне работает, вот код

function on_scrollslide(event, ui)
{
    var scroll_maximum = scroll_content.width() - scroll_frame.width();
    scroll_frame.attr({scrollLeft: ui.value * (scroll_maximum / 100) });
}

Есть идеи, что я сделал не так?подскажите как это исправить?

Спасибо.

Answer 1

Для jQuery 1.6 :

Начиная с jQuery 1.6, метод .attr () возвращает неопределенные атрибуты, которые не были установлены.Кроме того, .attr () не должен использоваться для простых объектов, массивов, окна или документа.Чтобы получить и изменить свойства DOM, используйте метод .prop ().

Вот рабочая скрипка .

Answer 2

Я думаю, что вы должны игнорировать версию 1.6 и перейти непосредственно к 1.6.1. Согласно блогу jQuery:

При обновлении с 1.5.2 до 1.6.1 вам не нужно менять какой-либо код атрибута.

Источник: http://blog.jquery.com/

Answer 3

jQuery теперь правильно различает атрибуты и свойства с помощью нового метода .prop().

В функции on_scrollslide измените scroll_frame.attr({ на scroll_frame.prop({:

function on_scrollslide(event, ui)
{
    //var scroll_maximum = scroll_frame.attr("scrollWidth") - scroll_frame.width();
    var scroll_maximum = scroll_content.width() - scroll_frame.width();

      // change---vv
    scroll_frame.prop({scrollLeft: ui.value * (scroll_maximum / 100) });
}