0

jScrollPaneを使用して水平方向の画像スライダーを実装し、horizo​​ntalDragMinWidth設定を使用してドラッグハンドル（.jspDrag）の最小幅を63に設定しようとしています。

残念ながら、それは機能しておらず、理由はわかりません。助けていただければ幸いです。

この問題はhttp://tmcdomains.com/jScrollPane/static.htmlで確認できます。

次のスクリプトは、私のフッターのタグのすぐ上にあります。

<script type="text/javascript">
$(function () {
$("img").wrap('<div class="item" />');
var $conveyor = $("#conveyor");
var $item = $(".item", $conveyor);
var $viewer = $("#viewer");
var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

var imagesWidth = 0;
$($item).each(function (index, image) {
    var $image = $(image);
    imagesWidth += $image.outerWidth() + parseInt($item.css("margin-right"), 10);
});
$($conveyor).width(imagesWidth);

function scrollByItem(direction) {
    var xPos = api.getContentPositionX();
    var viewerHalfWidth = $viewer.width() / 2;
    var pixels = 0;
    $($item).each(function (i) {
        pixels += $(this).outerWidth(true);
        if (pixels >= (xPos + viewerHalfWidth)) {
            if (direction == "right" && $item[i + 1]) {
                api.scrollToX(($($item[i + 1]).outerWidth(true) / 2) + pixels - viewerHalfWidth, true);
            } else {
                if (direction == "left" && $item[i - 1]) {
                    api.scrollToX(pixels - $(this).outerWidth(true) - viewerHalfWidth - ($($item[i - 1]).outerWidth(true) / 2), true);
                }
            }
            return false;
        }
    });
    return false;
}
$("#prev").click(function () {
    scrollByItem("left");
});
$("#next").click(function () {
    scrollByItem("right");
});

$viewer.each(
    function()
    {
        $(this).jScrollPane();
        var api = $(this).data('jsp');
        var throttleTimeout;
        $(window).bind(
            'resize',
            function()
            {
                if ($.browser.msie) {
                    // IE fires multiple resize events while you are dragging the browser window which
                    // causes it to crash if you try to update the scrollpane on every one. So we need
                    // to throttle it to fire a maximum of once every 50 milliseconds...
                    if (!throttleTimeout) {
                        throttleTimeout = setTimeout(
                            function()
                            {
                                api.reinitialise();
                                throttleTimeout = null;
                            },
                            50
                        );
                    }
                } else {
                    api.reinitialise();
                }
            }
        );
    }
);    

});
</script>
4

1 に答える 1

1

jScrollPaneを2回初期化する理由がよくわかりません。

初めて：

var api = $viewer.bind("jsp-scroll-x").jScrollPane({animateScroll: true,horizontalDragMinWidth: 63}).data("jsp");

2回目：

$(this).jScrollPane();

しかし、私がそれをデバッグした後。jScrollPaneは2回初期化されました（jScrollPane.jsの448行目から453行目は2回実行されます）。2回目は、初期化時に設定の一部としてnohorizontalDragMinWidthが指定されているため、horizo​​ntalDragMinWidthはデフォルトで0になっています。私の勘は、これが問題だということです。

于 2012-01-17T23:55:33.990 に答える