历史版本4 :JS实现键盘翻页效果 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 问题描述编辑

当我们将报表做成ppt效果,在演示时想使用键盘的上下键、左右键或空格键实现上下键翻页,该如何实现呢?

2.实现思路编辑

通过JavaScript获取按下按键的键值,判断是否跳转上一页或下一页。

$(document).bind('keydown', function(e) {})  //获取键盘按键按下事件
var key = window.event ? e.keyCode : e.which;  //获取按键键值
contentPane.gotoPreviousPage();  //跳转到上一页
contentPane.gotoNextPage();  //跳转到下一页

键盘按键对照表如下:

  对应按键 按键十进制值 
  空格键(Space键)  32
  Page Up键(PgUp键)  33
  Page Down键(PgDn键) 34 
  LEFT ARROW键(←)37  
  UP ARROW键(38  
  RIGHT ARROW键(→)39  
  DOWN ARROW键(40  

3. 示例编辑

点击菜单模板>模板web属性>分页预览设置,选择“为该模板单独设置”,添加一个“加载结束”事件,编辑加载结束事件,添加下面的js代码:

$(document).bind('keydown', function(e) { var key = window.event ? e.keyCode : e.which; //alert(key); if (key.toString() == "33"|| key.toString() == "37" || key.toString() == "38") { contentPane.gotoPreviousPage(); } else if (key.toString() == "32" || key.toString() == "34"|| key.toString() == "39" || key.toString() == "40") { contentPane.gotoNextPage(); } })
222

保存模板,点击分页预览,当按键为 Page Up键(PgUp键)、LEFT ARROW键(←)、  UP ARROW键(↑),即可跳转到上一页,
当按键为空格键(Space键)、Page Down键(PgDn键)、RIGHT ARROW键(→)、DOWN ARROW键(↓)即可跳转到下一页;