Добавление управления с клавиатуры в ScrollTo Post - PullRequest
Новая
       14

Добавление управления с клавиатуры в ScrollTo Post

1 голос
/ 23 июля 2011

Я использую этот скрипт scrollTo из webdesignerwall и пытаюсь добавить управление с клавиатуры.

Оригинальный скрипт: 

$(function () {
    function scroll(direction) {
        var scroll, i, positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

        collection.each(function () {
            positions.push(parseInt($(this).offset()['top'], 10));
        });
        for (i = 0; i < positions.length; i++) {
            if (direction == 'next' && positions[i] > here) {
                scroll = collection.get(i);
                break;
            }
            if (direction == 'prev' && i > 0 && positions[i] >= here) {
                scroll = collection.get(i - 1);
                break;
            }
        }
        if (scroll) {
            $.scrollTo(scroll, {
                duration: 750
            });
        }
        return false;
    }
    $("#next,#prev").click(function () {
        return scroll($(this).attr('id'));
    });
});

А для управления клавиатурой я пытаюсь добавить что-то вроде этого: 

$(window).keypress(function(event) {
    switch (event.keyCode) {
        case 38: // key is up
            return scroll($(this).attr('id'));
        case 40: // key is down
            return scroll($(this).attr('id'));
    }
});

Спасибо за вашу помощь.

Ответы [ 2 ]

1 голос
/ 23 июля 2011

С помощью Брока Адамса этот сценарий завершен: 

function scroll(direction) {

    var scroll, i,
            positions = [],
            here = $(window).scrollTop(),
            collection = $('.post');

    collection.each(function() {
        positions.push(parseInt($(this).offset()['top'],10));
    });

    for(i = 0; i < positions.length; i++) {
        if (direction == 'next' && positions[i] > here) { 
scroll = collection.get(i); 
break; 
 }
        if (direction == 'prev' && i > 0 && positions[i] >= here) { 
scroll = collection.get(i-1); 
break; 
 }
    }

    if (scroll) {
        $.scrollTo(scroll, {
            duration: 700       
        });
    }

    return false;
}


$(function() {
    $("#next,#prev").click(function() {        
        return scroll($(this).attr('id'));    
    });
});


$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
    else {
        switch (event.keyCode) {
            case 37: // key is left
        case 38: // key is up
                scroll ('prev');
                break;
            case 39: // key is right
        case 40: // key is down
                scroll ('next');
                break;
        }
    }
});
1 голос
/ 23 июля 2011

Это должно быть: 

$(window).keydown (function(event) {
    if (event.altKey) {
        switch (event.which) {
            case 78:  // Alt-N = next
            case 110: // Alt-n = next
                scroll ('next');
                break;
            case 80:  // Alt-P = prev
            case 112: // Alt-p = prev
                scroll ('prev');
                break;
        }
    }
})


См. Это в действии на jsFiddle. (Щелкните в любом месте в Результат панель для активации управления с клавиатуры.)

Примечание: не переопределяйте общие клавиши пользовательского интерфейса, такие как стрелки, для подобных вещей!Это приведет к хаосу с пользователями клавиатуры (или со всеми пользователями, если когда-либо используются текстовые поля).Кроме того, в этом случае это в любом случае вызовет «нервное» поведение.

Я переназначил функциональность на Alt N и Alt P .
(В демонстрационной версии jsFiddle я оставил клавиши со стрелками, чтобы вы могли увидеть некоторые проблемы с этим отображением.)

...