Jquery Tools Scrollable: остановите его на последнем элементе

В основном я пытаюсь исправить странную привычку Jquery Tools 1.2.6 Scrollable прокручивать последний элемент, если количество элементов неравномерно делится на размер прокрутки.

Другими словами, если у меня есть виджет, содержащий 11 элементов, и он настроен на отображение 2 за раз, и каждый раз, когда нажимается следующая кнопка для прокрутки к следующим 2 элементам, когда дело доходит до одиннадцатого элемента, он будет прокручиваться, поэтому отображается одиннадцатый элемент, но с пустым пространством справа, где был бы двенадцатый элемент, если бы он был один. По сути, прокручивая следующие 2 в представлении, несмотря на отсутствие второго элемента

Здесь у меня есть jsFiddle, демонстрирующий мое исправление: http://jsfiddle.net/natepers/6kmuE/21/

Мне удалось заставить его остановиться на последнем элементе, сбросив scroll-size на оставшееся количество элементов меньше, чем scroll-size;

Проблема в том, что я не могу вернуться к первому элементу.

Вот javascript:

var scrollable = $(".scrollable").data("scrollable");
var size = scrollable.getConf().size;

// Catch any requests for items at the end of the list
scrollable.onSeek(function(event, index) {

    var self_size = this.getSize();

    // Last vsisible item
    var last = index + size;

    // How many to the last item
    var difference = self_size - last;

     // How many more than the scroll size
    var remainder = index%size;

    //reset scroll size for each request
    scrollable.getConf().size = size;


    // If next request has items but less than the scroll size
    if ( remainder == 0 && difference < size && difference > 0 ) {

            // Set the scroll size to th enumber of items left
           scrollable.getConf().size = difference;
    }
    //If we're at the end
    if (index++ === self_size - size) {

            // Set disabled style on next button
             $("a.next").addClass("disabled");   
    }
    //If the items are not evenly divided by the scroll size we know we're at the end
    if (remainder != 0) {

            // Set scroll size to the what's left 
            scrollable.getConf().size = remainder;        
    }
});

// Stop scrolling at last item
scrollable.onBeforeSeek(function(event, index) {
  var self_index = this.getIndex();
  var self_size = this.getSize();
  var last = self_index + size;
    //If the last visible item is the last item
  if (last == self_size) {
      // If the next requested item is >= the last item do nothing
      if (index > self_index) { return false; }
  }
});

Спасибо за любые предложения или помощь.


person natepers    schedule 02.11.2011    source источник


Ответы (3)


Недавно у меня была такая же проблема. Решение в этом сообщении в блоге ниже, похоже, хорошо работает для меня в jQuery Tools 1.2.6.

http://www.jasoncarr.com/technology/jquery-tools-scrollable-stop-scrolling-past-the-end

person chrishall78    schedule 10.11.2011

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

Но что, если количество отображаемых элементов может варьироваться? Моя задача заключалась в том, чтобы показать кучу прокручиваемых ссылок, которые будут прокручивать одну ссылку за раз. Неизменно текст ссылок будет различаться по длине. У меня не было способов узнать, сколько элементов будет отображаться в одной точке.

Вот решение плагина, которое я придумал:

    $.fn.restrictScroll = function () {

    var api = $(this).data("scrollable");
    var container = this;

    Init();

    // Initialization method.
    function Init() {
        // Subscribe to events we are interested in.
        api.onBeforeSeek(function (event, index) {
            return isScrollable(index);
        });
        api.onSeek(function (event, index) {
            changeNavButtonState(index);
        });
        $(window).resize(function () {
            var index = api.getIndex();
            changeNavButtonState(index);
        });

        // set up initial state of the nav button
        var index = api.getIndex();
        changeNavButtonState(index);
    }

    function changeNavButtonState(index) {
        var conf = api.getConf();
        $(conf.next).toggleClass(conf.disabledClass, !isScrollable(index));
    }

    function isScrollable(index) {

        var answer = false;
        var currentIndex = api.getIndex();

        if (index < currentIndex) { // if navigating back, always allow scroll.
            answer = true;
        }
        else {
            var items = api.getItems();
            var itemsWidth = 0;

            for (var i = currentIndex; i < items.length; i++) {
                itemsWidth += $(items[i]).width();
            }

            answer = itemsWidth > $(container).width();
        }

        return answer;
    }
}

А вот как использовать этот плагин:

$("#scrollable").scrollable().restrictScroll();

Пример HTML:

    <div class="slidingTabs">
    <!-- "previous page" action -->
    <a class="prev browse left"></a>

    <div class="scrollable" id="scrollable">

        <!-- root element for the items -->
        <div class="items"">
            <div><a href="#">1 | Some small text</a></div>
            <div><a href="#">2 | Some long tab name</a></div>
            <div><a href="#">3 | Three is a crowd</a></div>
            <div><a href="#">4 | quick brown fox jumps</a></div>
            <div><a href="#">5 | Bollywood music is awesome</a></div>
            <div><a href="#">6 | Nicky Minaz is weird looking</a></div>
            <div><a href="#">7 | Tab number 7</a></div>
            <div><a href="#">8 | Tab number 8</a></div>
            <div><a href="#">9 | This one has real long name</a></div>
        </div>
    </div>

    <!-- "next page" action -->
    <a class="next browse right"></a>
</div>
person IndusCreed    schedule 05.10.2012
comment
Похож на начальника! Спасибо. Мне пришлось использовать это для вертикальной прокрутки, и все, что мне нужно было сделать, это изменить вызов width() на height(); - person Pablo S G Pacheco; 16.10.2013

Я искал что-то еще, когда наткнулся на этот вопрос, и я понимаю, что это немного поздно, но несколько месяцев назад у меня была аналогичная проблема, и я нашел этот ответ Рене Шуберт. Предложенное решение сработало для меня очень хорошо:

Инструменты jQuery Прокручиваемый: 3 элемента на экране, но прокручивайте по одному

Ваше здоровье

person Óscar Palacios    schedule 31.05.2013