jQuery UI Slider проблема - PullRequest
Новая
       24

jQuery UI Slider проблема

1 голос
/ 22 мая 2011

У меня проблемы с виджетом слайдера пользовательского интерфейса jQuery.Я могу заставить слайдер работать, но он не будет скользить по содержимому.Вы можете увидеть сайт, над которым я работаю, здесь: проблема с ползунком jquery

Я хочу, чтобы div с полями с голубой рамкой скользил по слайду с обработчиком, но япросто не могу заставить его работать.Это отметка, которую я сейчас использую: 

<div id="content-scroll" class="reference-scroller">
<div id="content-holder" class="reference-content">
  <div id="content-slider"></div>
  <ul>
    <li class="content-item">test1</li>
    <li class="content-item">test2</li>
    <li class="content-item">test3</li>
    <li class="content-item">test4</li>
    <li class="content-item">test5</li>
     .....
  </ul>
</div>
</div>

И плагин слайдера запускается так: 

$("#content-slider").slider({
animate: true,
change: handleSliderChange,
slide: handleSliderSlide
});

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

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

Кто-нибудь получил предложение по этому поводу?:-) Любой вклад приветствуется!

Всего наилучшего,

Бо

1 Ответ

2 голосов
/ 22 мая 2011

Наконец-то нашли недостаток! : -)

jQuery 1.6.1 различает attr () и prop (), поэтому я изменил: 

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

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

Кому: 

function handleSliderChange(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui)
{
    var maxScroll = $("#content-scroll").prop("scrollWidth") - $("#content-scroll").width();
    $("#content-scroll").prop({scrollLeft: ui.value * (maxScroll / 100) });
}

А теперь все работает как надо!

...