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

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

0 голосов
/ 03 апреля 2011

У меня есть страница с несколькими ползунками (от 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 показаны выше), и я чувствую себя немного плохо, повторяя в основном тот же код ...

мог бы быть способупростить этот код?

Ответы [ 2 ]

1 голос
/ 03 апреля 2011

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

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%, работает ли это.. но я думаю, что это направит вас в правильном направлении

0 голосов
/ 04 апреля 2011

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

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

...