zblog用键盘上的左右箭头(←和→)实现快速翻页这个功能是用js实现的,加上这个好听点说就是优化了用户体验。实现起来也非常简单,有动手能力的朋友可以尝试下。
zblog现在分为zblogasp和zblogphp两个版本,js代码都是一样的,html代码略有不同。
zblogphp版,将以下代码和最下面的js代码添加到post-single.php合适的位置:
<p>{if $article.Prev} <a href="{$article.Prev.Url}" title="{$article.Prev.Title}" class="up" id="up" >上一篇</a> {/if}</p> <p>{if $article.Next} <a href="{$article.Next.Url}" title="{$article.Next.Title}" class="next" id="next">下一篇</a> {/if}</p> <p>试试用"←"或"→"方向键快速翻页把 \(^o^)/</p>
zblogasp版,在模板文件夹里面新建两个文件,分别是“b_article_navbar_l.html”和“b_article_navbar_r.html“,如果模板内已有这两个文件的仅需需求代码和下面的代码保持一致即可。
b_article_navbar_r.html:
<p>下一篇:<a href="<#article/nav_r/url#>" title="<#article/nav_r/name#>" class="up" id="up"><#article/nav_r/name#></a></p>
b_article_navbar_l.html:
<p>下一篇:<a href="<#article/nav_l/url#>" title="<#article/nav_l/name#>" class="up" id="up"><#article/nav_l/name#></a></p>
然后在b_article-single.html合适的位置添加以下代码和js代码即可。
<#template:article_navbar_l#> <#template:article_navbar_r#>
最后上js代码,zblogasp版和zblogphp版的js代码都是一样的。
<script language="javascript"> last=document . getElementById("up").href; next=document.getElementById("next").href; function keyUp(e) { if(navigator.appName == "Microsoft Internet Explorer"){ var keycode = event.keyCode;var realkey = String.fromCharCode(event.keyCode); }else{ var keycode = e.which;var realkey = String.fromCharCode(e.which); } if(keycode==39){window.location.href=next;} if(keycode==37){window.location.href=last;} } document.onkeyup = keyUp; </script>
最后的最后,按照自己的需求美化下css就是大功告成了,上个演示截图:
相关推荐
- vue3项目引入vant报错的错误原因和解决办法03-12
- zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 微信支付JSPAI调起支付后提示“该订单已过期,请重新下单”的解决办法06-11
- 宝塔一键迁移提示“连接服务器失败”的原因和解决办法05-16
- 微信小程序报错:operateWXDataForAd:fail的原因和解决办法05-14
- php保存添加bom头的txt文件和读取时去除txt的bom头05-02
- 小程序使用mp-html组件后输出空白的原因和解决办法04-08
- zblog获取全部分类列表函数GetCategoryList的参数和使用方法介绍说明03-30
- emlog通过分类id获取指定分类的标题链接等数据03-20
- 小皮面板(phpstudy)提示No input file specified的原因和解决办法03-07
欢迎 你 发表评论: 取消回复
- 最新文章
- 热文排行
- 最多评论
- 1天兴工作室2025年春节放假公告01-25
- 2天兴用户中心插件“微信通知”功能设置教程11-09
- 3阿里云2024双11活动推荐 通过本站链接参与另外赠送本站代金券11-05
- 4天兴工作室官网购物活动:全场8折优惠券 不限次数不限金额04-17
- 5天兴工作室zblog纯博客主题 vue3+小程序双版本03-19
- 6vue3项目引入vant报错的错误原因和解决办法03-12
- 7天兴工作室zblog百科主题 可搭配会员插件实现知识付费盈利03-06
- 8zblog怎么截取指定字数的摘要?zblog摘要自定义截取方法介绍02-29
- 9天兴工作室2023双11活动:五折优惠券大放送11-05
- 标签聚合
- ×1dedecms编码×1红色企业模板×1邮件通知×1文件超出大小×3zblog商城×1UEditor编辑器×1主机服务商×1搜索×1cn域名×1修改logo×3zblog最新版×3zblog主题安装×1dedecms字段调用×1后台密码×1子分类列表×3zblog淘宝客×4zblogasp模板×2zblog问答×1拒绝IE浏览器×1红褐黄配色
最新评论
-
天兴工作室
并没有任何限制 -
访客
请问 zblog淘客主题 对使用者的要求是必须是企业吧? -
阿浩
大佬们,丢几个除了作者以外的演示站,我想看看大家的布局设置 -
有趣生活
一直想开发zblog的功能,zblog的敷在不知道够够不够 -
访客
发布文章时候,那怎么改默认状态呢比如改成默认审核状态?
有 2 位网友评论:
天兴工作室网友 9年前 (2015-12-28) 回复
能不能稍微详细一点,截图什么的。 这样新手实在是看不懂。。例如js代码放在哪里。
天兴工作室 9年前 (2015-12-28) 回复
如果是这样,那么不建议动手修改...