北极寒流 » 网络资源 » WordPress 博客实现方向键翻页功能 - 2014.08.11

WordPress 博客实现方向键翻页功能

如果希望WordPress 博客实现左右方向键翻页功能,你只要按下面的操作即可。

引入 jQuery 库(如果之前引入过,则此步跳过;若不确定,则此步骤做)

在 </head> 前添加以下 jQuery 引入代码:

<script src="<?php bloginfo("template_url");?>/js/1.9.1/jquery.min.js"></script>

<script type="text/javascript" src="<?php bloginfo("template_url");?>/js/fastKeyCode.js"></script>

fastKeyCode.js的内容如下

jQuery(document).ready(function(){

// 在文章页按 Tab 键快速定位到评论框

if ( $("#respond").length > 0 )

{

if ( $("body").attr('class').indexOf('logged-in') == -1 )

{

$("#respond form p input#author").attr('tabIndex','1');

$("#respond form p input#email").attr('tabIndex','2');

$("#respond form p input#url").attr('tabIndex','3');

$("#respond form p textarea#comment").attr('tabIndex','4');

$("#respond form p input#submit").attr('tabIndex','5');

}

else

{

$("#respond form p textarea#comment").attr('tabIndex','1');

$("#respond form p input#submit").attr('tabIndex','2');

$("#wpadminbar .screen-reader-shortcut").attr('tabIndex','3');

}

}

// 快捷键

function do_function_by_keycode()

{

var key = event.keyCode;

var activeElement = document.activeElement.tagName.toLowerCase();

if ( activeElement != 'input' && activeElement != 'textarea' ) // 在任何输入框内不响应快捷键

{

if ( key == '36' ) //    按 Home 键回到首页

{

window.location.href = $(".header-content .logo a").attr('href');

event.returnValue = false;

}

else if ( key == '83' ) // 按 s 使搜索框获得焦点

{

$(".search-block-2 input#s").focus();

event.returnValue = false;

}

else if ( key == '37' ) // 按 方向左 时

{

if ( $(".content article.post .post-inner").length > 0 ) // 在文章页按方向左切换到上一篇文章

{

var prevlink = $(".post-navigation .post-previous a").attr('href');

if ( prevlink.indexOf('http://') != -1 )

{

window.location.href = prevlink;

event.returnValue = false;

}

}

}

else if ( key == '39' ) // 按 方向右 时

{

if ( $(".content article.post .post-inner").length > 0 ) // 在文章页按方向右切换到下一篇文章

{

var nextlink = $(".post-navigation .post-next a").attr('href');

if ( nextlink.indexOf('http://') != -1 )

{

window.location.href = nextlink;

event.returnValue = false;

}

}

}

}

}

window.onkeydown = function(){ do_function_by_keycode(); }

});

 

注意将里面的对象名改成自己主题的。( $(对象名)

资料来源:http://www.ipeld.net/archives/6411.html

11

WordPress 博客实现方向键翻页功能

分享到: