Несколько ползунков jQuery, перемещающих каждый div на одной странице, как упростить код?

У меня есть страница с несколькими ползунками (от http://www.switchonthecode.com/tutorials/using-jquery-slider-to-scroll-a-div), и поскольку каждый из них представляет собой разные элементы div, я просто продублировал код и изменил его на уникальные классы, которые приносят это код:

    $(document).ready(function(){
  $(".slider1").slider({
    animate: true,
    handle: ".handle1",
    change: handleSliderChange1,
    slide: handleSliderSlide1
  });

  $(".slider2").slider({
    animate: true,
    handle: ".handle2",
    change: handleSliderChange2,
    slide: handleSliderSlide2
  });

  $(".slider3").slider({
    animate: true,
    handle: ".handle3",
    change: handleSliderChange3,
    slide: handleSliderSlide3
  });

});

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

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



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

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


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

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

Хотя это тоже отлично работает, у меня есть около 7 таких слайдов (только 3 показаны выше), и мне немного неловко повторять в основном один и тот же код...

может есть способ упростить этот код?


slider jquery simplify jquery-ui
person Hansol Kim    schedule 03.04.2011    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Похоже, что демонстрация слайдера довольно старая, и слайдер является одним из виджетов пользовательского интерфейса jQuery. Похоже, что демонстрация слайдера пользовательского интерфейса jQuery с боковой прокруткой наиболее точно соответствует демонстрационной странице, на которую указывает ссылка. в вашем вопросе.

Я поэкспериментировал, чтобы посмотреть, смогу ли я имитировать старую демонстрационную страницу в пользовательском интерфейсе jQuery, и придумал эту демонстрацию.. Не уверен, что это то, что вам нужно.

person andyb    schedule 03.04.2011
comment
Круто, это было именно то, что я искал. Хотя в этом случае ползунок должен быть перед скользящим контентом... так как я могу справиться с этим с помощью css, это не проблема :D Большое спасибо! :D - person Hansol Kim; 04.04.2011
comment
Если вам нужно, чтобы ползунок и контент располагались по-другому, вы можете просто изменить sibling, который ищет jQuery. Возможно использование prev() вместо next(), если ползунок и контент являются родственными. - person andyb; 04.04.2011

arrow_upward
1
arrow_downward

Вы можете включить его в функцию и передать все необходимые переменные:

function divSlider(Handle, divId) {

  this.slider({
    animate: true,
    handle: Handle,
    change: handleSliderChange(e, ui, divId);
    slide: handleSliderSlide(e, ui, divId)  });

function handleSliderChange(e, ui, divId)
{
  var maxScroll = divId.attr("scrollWidth") - divId.width();
  divId.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

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

}

тогда вы могли бы назвать это

$('slider1').divSlider('.handle1', $('.gal1'));

Я не уверен на 100%, что это сработает... но я думаю, это направит вас в правильном направлении.

person Lauw    schedule 03.04.2011
comment
хм, только что попробовал, и почему-то не работает.. не знаю, почему - person Hansol Kim; 03.04.2011
comment
Хм, я тоже нечасто им пользовался, попробуйте прочитать здесь: blogs.microsoft.co.il/blogs/basil/archive/2008/09/22/ и попробуйте оставить функции handleslider за пределами divslider функция слишком - person Lauw; 03.04.2011