Модификация пользовательского интерфейса для jQuery scrollTo: элементы управления Fade Prev/Next, когда нечего прокручивать

http://cambridgeuplighting.com/portfolio

Я пытаюсь создать функцию, которая будет отображать элементы управления Next и Prev для функции scrollTo, когда слайд-шоу достигнет любого конца. У меня хорошее начало, но оно не работает так, как я хочу. Мне нужно, чтобы элементы управления заглушали щелчок ДО того, как он достигнет конца. Прямо сейчас он достигает конца, затем следующий щелчок (который не будет прокручиваться, потому что он в конце) приведет к исчезновению элемента управления.

Вот мой код, заранее большое спасибо!

jQuery (см. приведенную выше ссылку на сайт для HTML и CSS)

 jQuery(function( $ ){
    var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    //set the width of the container depending on how many post items are there
    $('#postContainer').css({'width': containerWidth })
    //find the relative position of the end point by getting the negative value of the container width minus 961 (extra pixel is to account for IE difference)
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        $('.newerEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('.olderEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('+=960', 700 );
        }   
    });

    $('.newerEvents').click(function () {
        $('.olderEvents').fadeTo(350, 1.0)
        var slidePos = $('#postContainer').position();
            //relative position of 0 means the slideshow is at the other end
        if (slidePos.left==0) {
            $('.newerEvents').fadeTo(350, 0.1)
        } else {
            $('#slideScreen').scrollTo('-=960', 700 );
        }
    });
});

user-interface jquery scrollto controls
person HandiworkNYC.com    schedule 13.02.2010    source источник

Ответы (2)


arrow_upward
1
arrow_downward

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

В данном случае это должно позволить пользователю использовать этот элемент управления для навигации по списку в обратном порядке. Подойдите к этому как к попытке предоставить пользователю наиболее полезный инструмент для навигации по вашему контенту.

Подумайте об этом так: как лучше всего использовать/просматривать/сортировать стопку книг? Выстроить их в ряд и попросить пользователя двигать ряд вперед и назад, или расположить книги на ленивом сьюзен и позволить пользователю вращать их?

Метафора здесь больше о том, чтобы позволить пользователю просматривать контент как неразрывную цепочку, а не как строку с концами, и меньше о визуальном представлении круга или строки.

Соответствующий пример этой методологии представлен здесь: http://www.ndoherty.biz/demos/coda-slider/2.0/

person S16    schedule 15.02.2010

arrow_upward
0
arrow_downward

@ greg-J: я согласен с вашими комментариями об эффективности отключения элементов управления. Вот мой код, который прокручивает назад к первому элементу, как только вы дойдете до конца списка. Посмотреть пример @ http://cambridgeuplighting.com/portfolio

jQuery(function( $ ){
        var itemSize = $('div.portfolioPost').size();
    var containerWidth = itemSize*240;
    $('#postContainer').css({'width': containerWidth })
    var endPoint = 0-containerWidth+961;
    $('.olderEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left<=endPoint) {
            $('#slideScreen').scrollTo('-='+containerWidth, 1000 );
        } else {
            $('#slideScreen').scrollTo('+=480', 500 );
        }   
    });

    $('.newerEvents').click(function () {
        var slidePos = $('#postContainer').position();
        if (slidePos.left==0) {
            $('#slideScreen').scrollTo('+='+containerWidth, 1000);
        } else {
            $('#slideScreen').scrollTo('-=480', 500 );
        }
    });
});
person HandiworkNYC.com    schedule 17.02.2010