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();
    }
};

程序运行效果如下图:

image

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

posted @ 2012-12-27 21:53  Alexis  阅读(2009)  评论(2编辑  收藏  举报