WinJS实用开发技巧（3）：仿微博信息流JK快捷键滚动

Twitter、微博、Google Reader等网页版都有一套快捷键，J：快速查看上一条；K：快速查看下一条。

数据基于上一篇博客。增加当前项的样式：宽度为2的白色边框：

.current-comment {
    border: 2px solid #fff;
}

那么我们需要在初始化数据后，将第一条数据设置当前项的样式：

var container = $('#container');
container.append(template('DT_Template', data));
container.children().first().addClass('current-comment');

同时，我们要注册键盘输入事件以便获取键入的是那个值，数值74为J、数值75为K：

document.onkeydown = function (e) {
    var code = e.code || e.which;
    switch (code) {
        case 74:
            jump(true);
            break;
        case 75:
            jump(false);
            break;
        default:
    }
};

jump函数即处理J、K快捷键，传入一个bool类型的参数，表示当前是键入的J还是K。 在jump函数中，我们用到一个jQuery插件，jQuery.scrollIntoView.js。jump函数中，我们获取当前项，如果键入的是J，判断下一条项不为空，则将当前项的样式去掉，下一项添加当前样式，同时将下一项滚动至顶部；键入K也类似。

function jump(isDown) {
    var className = 'current-comment';
    var current = $('.' + className).first(),
    next = undefined;
    next = isDown ? current.next() : current.prev();
    if (next && next.length) {
        current.removeClass(className);
        next.addClass(className);
        next[0].scrollIntoView();
    }
};

程序运行效果如下图：

你可以在这里找到本篇的示例代码。