杰奇cms章节页按键监听研究,基本思路

其实这个功能官网的代码是有案例的,就算是开发模板的过程中,也可以直接拿来改完字段名称就用,原理特别简单,就是调用上一章,下一章的链接,然后绑定到键盘按下事件配合event.keyCode对应的按键号码,就可以实现跳转了。其实除了1.7需要对章节的路径格式自行组合,以上的版本都是可以自动根据后台伪静态设置来生成的,所以非常方便。但是实际的操作上,可能还涉及更加复杂的地方,比如定义快捷键收藏和推荐之类的,需要更加自由的定义模式。
建议用原生js去写,因为一般情况下都没有引入jquery这些花里胡哨的东西。
具体的按键码对应关系,可以参考博客园文章:event.keyCode用法及列表

官方的代码如下:

<script type="text/javascript">
var url_preview = "{?$url_preview?}";   //通过杰奇自带标签,定义上一章路径
var url_next = "{?$url_next?}";  //通过杰奇自带标签,定义下一章路径
var url_index = "{?$url_index?}";   ////通过杰奇自带标签,定义目录路径

function jumpPage() {    //定义方法
  var event = document.all ? window.event : arguments[0];    //对整个dom层进行匹配操作
  if (event.keyCode == 37) location = url_preview;     //keyCode的37号对应左方向键,按下后执行跳转上一章字段
  if (event.keyCode == 39) location = url_next;    //keyCode的39号对应右方向键,按下后执行跳转下一章字段
  if (event.keyCode == 13) location = url_index;   //keyCode的13号对应enter键,按下后执行跳转到目录
}
document.onkeydown=jumpPage;    //监听键盘的操作,并且执行方法
</script>

那么可以有哪些玩法?

按D加入收藏,按F推荐

<script type="text/javascript">
function sc(){
    //忽略那些收藏代码
    alert("收藏成功");
}
function tj(){
    //忽略那些推荐代码
    alert("推荐成功");
}
function event() {
    var event = document.all ? window.event : arguments[0];
    if (event.keyCode == 68) sc(); 
    if (event.keyCode == 70) tj(); 
}
</script>

大概就是定义两个方法,一个收藏,一个推荐,很多时候杰奇或者其它人开发的模板,会自带一些便捷的执行方法,所以直接丢上去就好了。其实我还想折腾一下组合键的问题,等什么时候有了点灵感再补充到这篇文章吧。
timg.jpg

规则之树版权所有,转载请注明来源,标明作者及原文链接

发表评论
加载中...

相关文章