免费的QQ技术网,残梦资源网,QQ教程网

网站首页 编程案例 PHP实例 正文

ThinkPHP制作导航高亮和当前页高亮显示的最佳方法

2018-05-29 PHP实例 486 ℃ 0 评论

这几天一直在做毕业设计,我的毕业设计是自选题,我选择使用 ThinkPHP 框架开发一个小型网站,先做后台再做前台,几乎没遇到啥阻力,不过,还是在制作前端的一些细节方面犯了难,比如说 ThinkPHP 制作网页中的导航的高亮显示当前页面的问题。

解决这个问题无非三种方案:

第一种是为每个页面做对应选项的高亮,但是这种做法简直是愚蠢到家,更何况,导航一般都是复用的,统一写好了,让其他页面引用,不需要为每个页面单独编写;

第二种是在后台传输数据给前台,然后前台对应进行处理,这样的好处是不用修改大量模板,但是需要给每个方法写对应的输出,编写还是繁琐,而且对后台资源占用的比较多。

第三种就是纯前台处理了,这种方式不用在后台单独为导航写任何一行代码,利用强大的 jQuery 来搞定这些。

第三种方案的缺点就是可能会消耗一些用户的设备资源,但是,第一显然这个时代不会有太多的用户用速度很慢的设备了;第二,这种运算基本上是毛毛雨,不会影响到客户的浏览。

凡事都要考虑到平衡问题,在网站设计的过程中,相对于昂贵的服务器资源,还是优先将运算推送给用户的设备来做是比较妥当的。

对于解决 ThinkPHP 制作当前页面导航高亮的问题,我的思路是,只需要 ThinkPHP 在前端输出一个常量,即当前的 Action 地址,然后再找到这个页面对应的网址链接,动态地为其增加css样式,达到加量的效果。

ThinkPHP 模板中输出当前 Action 的语句是 __ACTION__。

假设我的导航如下:

<div class="list"> 
    <ul> 
        <li><a href="__URL__/avatar">这是链接</a></li> 
        <li><a href="__URL__/repwd">这是链接</a></li> 
        <li><a href="__URL__/mylog">这是链接</a></li> 
        <li><a href="__URL__/info">这是链接</a></li> 
    </ul> 
</div>

对应的 jQuery 可以这样写:

$(function(){  
    var curr = $('.list').find('a[href="__ACTION__"]');  
    cuur.attr('class','lcurr');  
})

这样一来,每次页面打开,都可以直接添加 class 为 lcurr 的样式。

值得注意的是,这行 jQuery 代码要放置在模板文件中才能生效。

20180529201450.jpg

Tags:PHP例子PHP案例ThinkPHP5PHP教程

本文暂时没有评论,来添加一个吧(●'◡'●)

欢迎 发表评论:

网站分类
标签列表
最近发表