1. <div id="11111"></div>

    1. <div id="11111"></div>

      1. <div id="11111"></div>

        键盘操作代替鼠标,实现WordPress翻页

        日期: 标签:javascript,WordPress教程 37 条留言
        如需帮忙改代码,或者WordPress二次开发、PHP网站建设等需求,可联系我购买付费服务:  点此联系我
        文章目录

             鼠标点击WordPress博客下方的页码导航来翻页,很麻烦?如果使用键盘的翻页键或左右箭头键来实现翻页,你觉得是不是比用鼠标更方便一些呢?有疑问的童鞋请自觉在最百科体验一下利用键盘进行翻页的效果吧!

             昨日偶然看到中关村在线的文章内分页增加了对键盘翻页的支持,效果很不错。查看了一下源码,和自己想的一样,这个效果是通过一段js代码来实现的。那么WordPress是否也能实现这个翻页效果呢?

             照例先放狗搜,果不其然,《WordPress 帖内 左右 翻页 代码 JS》就给我们提供了这么一段js:

        document.onkeydown = chang_page;
        function chang_page() {
            if (event.keyCode == 37 || event.keyCode == 33)
                location = "<?php echo get_permalink(get_adjacent_post(false, '', false)); ?>";
            if (event.keyCode == 39 || event.keyCode == 34)
                location = "<?php echo get_permalink(get_adjacent_post(false, '', true)); ?>";
        }

             将代码插入到single.php文件内,IE下可以实现按"→"或者"pagedown"切换到下一篇文章,按"←"或者"pageup"切换到上一篇文章??上У氖?,该代码也仅限于在IE浏览器下有效,Firefox等浏览器下使用键盘翻页是没有任何反应的。

        如何兼容

             我们首先了解一下如何初始化该键盘事件,基本语句如下:

        document.onkeydown = chang_page;

             当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫chang_page()函数。

             目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,也就是Trident,而FireFox是基于Gecko内核的。首先说说FF,因为FireFox的实现要比IE麻烦一点点。我们可以给chang_page()函数添加一个参数,这里使用字母"e"来表示这个参数:

        chang_page(e)

             变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性:

        e.which

             而IE不需要e变量,用event.keyCode来代替e.which

        var keycode = event.keyCode;

             搞明白上面的区别和用法,接下来想办法整合一下,让代码既适用于IE,又能在FF下使用:

        document.onkeydown = chang_page;
        function chang_page(e) {
            var e = e || event, 
            keycode = e.which || e.keyCode;
        
            if (keycode == 37 || keycode == 33)
                location = "<?php echo get_permalink(get_adjacent_post(false, '42', false)); ?>";
            if (keycode == 39 || keycode == 34)
                location = "<?php echo get_permalink(get_adjacent_post(false, '42', true)); ?>";
        }

             将上面给出的翻页代码复制到single.php内保存,无论是IE还是FF,均能完美实现键盘翻页。说明:get_adjacent_post()函数中的42是指排除分类ID为42的文章——也就是说,在翻页过程中会自动跳过该分类下的文章(因为本站ID=42的分类被用于改造个人微博,并不想与文章一起翻页展示)。如果没有特殊要求,这个参数留空即可,读者可根据个人博客的实际需要自行修改。

        举一反一

             文章列表页面(如首页、分类页面、存档页面等)是否也可以实现键盘翻页呢?我们只需使用get_previous_posts_page_link()和get_next_posts_page_link()代替上述代码中的get_adjacent_post()函数即可达到目的:

        document.onkeydown = chang_page;
        function chang_page(e) {
            var e = e || event,
            keycode = e.which || e.keyCode;
        
            if (keycode == 37 || keycode == 33)
                location = "<?php echo get_previous_posts_page_link(); ?>";
            if (keycode == 39 || keycode == 34)
                location = "<?php echo get_next_posts_page_link(); ?>";
        }

        将上面的代码放置到相应页面,自己试试吧!

        此处省略n个字...

        感谢最百科的投稿,本文略有删改;
        原文链接:http://www.zuibaike.com/2011/05/04/WordPress-keyboard-pagenavi/

        -- 完 --

        本文采用 「CC BY-NC-SA 4.0」创作共享协议,转载请标注以下信息:
        原文出处:露兜博客 http://www.szeverich.net.cn/wordpress-keyboard-javascript-pagenavi.html
        露兜
        kaapass@outlook.com  QQ 825533758

        业余编程爱好者,主业是淘宝店主,卖些工艺品,感兴趣可以到我的淘宝店看看(旺旺不提供技术咨询):西西弗sisyphe

        37 条留言

        点此留言
        1 2 308
        1. 随之长风

          你好,问下,翻译DIV标签在没有翻页情况下如何隐藏该DIV标签,如评论翻页,求指点!

        2. ennea

          阿,網上到處找教程呢

        1 2

        发表留言

        可以挣钱的游戏 354| 746| 981| 674| 637| 429| 945| 257| 359| 271| 458| 449| 26| 734| 317| 156| 562| 435| 26| 813| 898| 325| 449| 488| 93| 448| 250| 546| 120| 88| 339| 793| 110| 513| 594| 294|