Question

我正在尝试实现JQ UIslider - 但我一直遇到问题，所以我希望有人可以提供帮助。

我试图在没有“滑块”按钮的JQUI图像的情况下这样做。我可以到目前为止，但我不能让它“正常”工作。我的代码是这样的：

HTML：

<div id="scroll-pane" class="clearfix" >
<div id="pagination" class="clearfix"></div>
<div class="scroll-bar-wrap">
<div class="scroll-bar"></div></div>
</div>

的CSS：

.scroll-bar { background-color:#00FFFF; width: 50px; height: 20px; }
#pagination { width: 2440px; float: left; }
#scroll-pane { overflow: auto; width: 99%; float:left; }
.scroll-bar-wrap { clear: left; padding: 0 4px 0 2px; margin: 0 -1px -1px -1px; background: #FFCC00; width: 400px; }
.scroll-bar-wrap .ui-slider { border:0; height: 2em; margin: 0 auto; background: #FF0000; width: 20px;}

和JQ是这样的:(顺便说一句，我不明白任何一个！）

$(document).ready(function() {

    var scrollPane = $( "#scroll-pane" ),
    scrollContent = $( "#pagination" );
    var scrollbar = $( ".scroll-bar" ).slider({
        slide: function( event, ui ) {
            if ( scrollContent.width() > scrollPane.width() ) {
                scrollContent.css( "margin-left", Math.round(
                    ui.value / 100 * ( scrollPane.width() - scrollContent.width() )
                ) + "px" );
            } else {
                scrollContent.css( "margin-left", 0 );
            }
        }
    });

    //append icon to handle
    var handleHelper = scrollbar.find( ".ui-slider-handle" )
    .mousedown(function() {
        scrollbar.width( handleHelper.width() );
    })
    .mouseup(function() {
        scrollbar.width( "100%" );
    })
    .append( "<span class='ui-icon ui-icon-grip-dotted-vertical'></span>" )
    .wrap( "<div class='ui-handle-helper-parent'></div>" ).parent();

    //change overflow to hidden now that slider handles the scrolling
    scrollPane.css( "overflow", "hidden" );

    //size scrollbar and handle proportionally to scroll distance
    function sizeScrollbar() {
        var remainder = scrollContent.width() - scrollPane.width();
        var proportion = remainder / scrollContent.width();
        var handleSize = scrollPane.width() - ( proportion * scrollPane.width() );
        scrollbar.find( ".ui-slider-handle" ).css({
            width: handleSize,
            "margin-left": -handleSize / 2
        });
        handleHelper.width( "" ).width( scrollbar.width() - handleSize );
    }

    //reset slider value based on scroll content position
    function resetValue() {
        var remainder = scrollPane.width() - scrollContent.width();
        var leftVal = scrollContent.css( "margin-left" ) === "auto" ? 0 :
            parseInt( scrollContent.css( "margin-left" ) );
        var percentage = Math.round( leftVal / remainder * 100 );
        scrollbar.slider( "value", percentage );
    }

    //if the slider is 100% and window gets larger, reveal content
    function reflowContent() {
            var showing = scrollContent.width() + parseInt( scrollContent.css( "margin-left" ), 10 );
            var gap = scrollPane.width() - showing;
            if ( gap > 0 ) {
                scrollContent.css( "margin-left", parseInt( scrollContent.css( "margin-left" ), 10 ) + gap );
            }
    }

    //change handle position on window resize
    $( window ).resize(function() {
        resetValue();
        sizeScrollbar();
        reflowContent();
    });
    //init scrollbar size
    setTimeout( sizeScrollbar, 10 );//safari wants a timeout
});

#pagination的内容是“动态”生成的。我遇到的问题是.scroll-bar-wrap .ui-slider没有滑动（动画）。只是“触摸它”会使幻灯片内容移动太快太快而且很难“恢复”。

我需要的只是一个“简单的滑块情况”，其中#pagination向左/向左移动以显示/隐藏页面编号。有些东西告诉我JQUI代码“过于复杂” - 我可能错了 - 但到目前为止，这已经占用了很多时间，应该是一件简单的事情 - 好的，我不是JQ / JS类型的人。 .JQUI示例link text工作正常，这是它的代码。我只是不想要背景/滑块按钮。

Answer 1

如果这太复杂，您可以使用slideTo插件：http://plugins.jquery.com/project/slideto

在分页div中的每个页码周围包裹一个span或div，以确保scrollto可以滚动到它。

<div id="pagination">
  <span class="pagenumber">1</span>
  <span class="pagenumber">2</span>
  <span class="pagenumber">3</span>
</div>

然后，您可以构建一个jQuery对象，使用一些滚动功能扩展div＃pagination，这样您就可以记住滚动状态并执行以下操作：

pageNumbers = $("#pagination").find("span.pagenumber");
...
$("#pagination").scrollTo(pageNumbers.next());

你必须获得一些jQuery知识才能让它正常工作！如果你能更彻底地解释你想要达到的目标，我可以帮助你。

JQuery滑块问题

1 个答案: