Question

跟进我之前提到的post。我找到了所有要点的答案。但我仍然有一个小小的调整，我无法正确 -

这是我需要将其传递给滑块的百分比值 -

var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
scrollbar.slider("value",percentage);

每次将滑块手柄向右移动时，百分比应该会增加。当我加载前两个ajax页面（百分比增加）时很好，但在前两个之后，百分比开始下降直到负值。

如何找到正确的百分比？

你可以尝试here，看看我的意思。

以下是整个jquery代码：

$(document).ready(function(){

    loadSlide ();

});


function loadSlide ()
{
    //scrollpane parts
    scrollPane = $('#scroll-pane'); // scroll-pane
    scrollContent = $('#scroll-content'); // scroll-content

    //alert(scrollContent.width());

  scrollbar = $("#content-slider").slider({
    min: 0,
    create: loadContent,
    animate: true,
    change: handleSliderChange,
    slide: handleSliderSlide
  });
}

function handleSliderChange(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);

}

function handleSliderSlide(event, ui)
{

  var maxScroll = scrollContent.width() - scrollPane.width();
  scrollPane.attr({scrollLeft: ui.value * (maxScroll / 100) });

}

function loadContent(event, ui) 
{
    $('.load-content').click(function(){

        var path = $(this).attr('href');
        var parent = $(this).parents('.content-item');

        parent.after('<div class="wrapper"></div>');

        var target = $('.wrapper').css({float:'left'});
        target.load(path, function(){

            var width_loaded_content = target.width();
            var offset = target.offset();
            var position = target.position();
            scrollContent.css({width: (scrollContent.width() + width_loaded_content) + 'px'});

            var percentage = Math.round(offset.left / (scrollContent.width() - scrollPane.width()) * 100);
            alert(percentage);
            scrollbar.slider("value",percentage);

            exitContent (target);
        });

        return false;
    });
}

function exitContent (target)
{
    $('.exit-content').click(function(){
        scrollbar.slider("value",0);
        scrollContent.css({width: (1500) + 'px'});
        target.remove();
        return false;
    });
}

另一个问题是，乳清有时会在加载ajax页面后发出两次警报，但有时却没有？它应该总是提醒一次。

有什么想法吗？

jquery ui：ajax页面+滑块内容（第2部分）

0 个答案: