这几天一直在做毕业设计,我的毕业设计是自选题,我选择使用 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 代码要放置在模板文件中才能生效。
感谢你的赏识与认可

支付宝

微信支付
使用手机访问这篇文章
本文许可协议 © CC BY-NC-SA 4.0 转载请注明来源
- 上一篇: 太子湾的郁金香开了
- 下一篇: ThinkPHP模板输出常量的方法及网站面包屑导航的制作
可以试着后台只给数据,然后其他的全部由前端来完成 = =