设为首页收藏本站

PHPIN.NET

 找回密码
 立即注册
查看: 713|回复: 0

[函数] 帝国CMS输出全站栏目树函数(结合JQuery前台)

[复制链接]

374

主题

381

帖子

2558

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2558
发表于 2014-11-13 16:39:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
帝国CMS输出全站栏目树函数(结合JQuery前台)
本文关键字词:帝国CMS全站栏目,帝国CMS栏目树,帝国CMS树形菜单

本函数结合JQuery前台能树形输出全站栏目带折叠展开。

userfun.php函数代码:
  1. /*********************帝国CMS输出全站栏目树函数(结合JQuery前台)***************************/
  2. function YL_Class_Trees($bclassid){
  3. global $empire,$dbtbpre,$class_r;
  4. $sql=$empire->query("select classid,classname,bname,bclassid,islast,wburl,showclass from {$dbtbpre}enewsclass where bclassid='$bclassid' order by myorder,classid");
  5. $i=0;
  6. while($r=$empire->fetch($sql)){
  7. $i++;
  8. $classurl=$r['wburl']?$r['wburl']:sys_ReturnBqClassUrl($class_r[$r['classid']]);//判断是外部栏目使用外部栏目地址
  9. if(!$r['islast']&&!$r['wburl']&&$r['showclass']==0){//判断非终极就输出非终极样式并且继续执行查询
  10. $rdata.='<li><span><b class="Off"><a href="'.$classurl.'">'.$r['classname'].'</a></b></span><ul style="display:none;">'.YL_Class_Trees($r['classid']).'</ul></li>';
  11. }elseif(($r['islast']||$r['wburl'])&&$r['showclass']==0){//判断是终极就输出终极样式
  12.     $rdata.='<li><span><b><a href="'.$classurl.'">'.$r['classname'].'</a></b></span></li>';
  13. }
  14. }
  15. return $rdata;
  16. }
复制代码


使用方法:
  1. <?=YL_Class_Trees(0)?>
复制代码


html实例代码:
  1. <!doctype html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="utf-8" />
  5. <title>帝国CMS全站栏目树形折叠菜单(无限级)</title>
  6. <style type="text/css">
  7. a{color:#333;text-decoration:none;outline:none;}
  8. a:hover{color:#f60;}
  9. ul{list-style:none;padding:0;}
  10. #menu .tree1{padding:14px 14px 14px 39px;color:#6F93FF;font-size:16px;font-family:"黑体";border-bottom:solid 1px #eee;}
  11. #menu #tree_root{overflow:auto;}
  12. #menu #tree_root li span{display:block;height:18px;line-height:18px;color:#222;cursor:pointer;padding:6px 0;}
  13. #menu li .hover,#menu li span:hover{background-color:#e9edf6;}
  14. #menu ul{overflow:hidden;}
  15. #menu ul li{padding-left:20px;}
  16. #menu ul li b{font-weight:normal;position:relative;padding-left:16px;}
  17. #menu ul li b:before{display:block;font-size:0;top:5px;left:0;content:"";width:4px;height:4px; border:solid 1px transparent;transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-webkit-transform:rotate(45deg);position:absolute;}
  18. #menu ul li .On:before,#menu ul li .On2Off:before{top:3px;border-bottom-color:#999;border-right-color:#999;}
  19. #menu ul li .Off:before{top:5px;border-top-color:#999;border-right-color:#999;}
  20. #menu ul li .On2Off:before{transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}

  21. </style>
  22. </head>
  23. <body>
  24. <div id="menu">
  25. <h1 class="tree1">本站所有栏目</h1>
  26. <ul id="tree_root">
  27. <?=YL_Class_Trees(0)?>
  28. </ul>
  29. </div>
  30. <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
  31. <script>
  32. $(function(){//目录树折叠按钮 -------------------------------
  33. function setTreeStyle(obj){
  34. var objStyle = obj.children("b");
  35. var objList = obj.siblings("ul");
  36. if(objList.length == 1){
  37. var style = objStyle.attr("class");
  38. objStyle.attr("class","On2Off");
  39. setTimeout(
  40. function(){
  41. if(style == "Off"){
  42. objList.parent().siblings("li").children("span").children(".On").each(function(){
  43. setTreeStyle($(this).parent());
  44. });
  45. var H = objList.innerHeight()
  46. objList.css({display:"block",height:"0"});
  47. objList.animate({height:H},300,function(){$(this).css({height:"auto"});});
  48. objStyle.attr("class","On");
  49. }
  50. else if(style == "On"){
  51. objList.find("li").children("span").children(".On").each(function(){
  52. setTreeStyle($(this).parent());
  53. });
  54. var H = objList.innerHeight()
  55. objList.animate({height:0},300,function(){$(this).css({height:"auto",display:"none"})});
  56. objStyle.attr("class","Off");}},42);}}
  57. $("#tree_root").find("li").children("span").click(function(){
  58. setTreeStyle($(this));
  59. });
  60. })
  61. </script>
  62. </body>
  63. </html>
复制代码


效果截图:
测试截图.png 具体使用请自行扩展开发即可。本函数预留足够大的发挥空间。


您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|PHPIN.NET ( 冀ICP备00000001号 )|网站地图  

GMT+8, 2016-12-10 20:38

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表