time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > 【WinJS开发教程】3、仿微博信息流JK快捷键滚动示例

【WinJS开发教程】3、仿微博信息流JK快捷键滚动示例

时间:2012-12-28 21:42 点击:1778次 字体:[ ]




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

程序运行效果如下图:

【WinJS开发教程】3、仿微博信息流JK快捷键滚动示例_www.fengfly.com

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



本文地址 : http://www.fengfly.com/plus/view-211193-1.html
标签: 开发教程 滚动 示例 WinJS 仿微博信息流 JK快捷键
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: