帝国CMS输出全站栏目树函数（结合JQuery前台）
帝国CMS输出全站栏目树函数（结合JQuery前台）本文关键字词：帝国CMS全站栏目，帝国CMS栏目树，帝国CMS树形菜单
本函数结合JQuery前台能树形输出全站栏目带折叠展开。
userfun.php函数代码：/*********************帝国CMS输出全站栏目树函数（结合JQuery前台）***************************/
function YL_Class_Trees($bclassid){
global $empire,$dbtbpre,$class_r;
$sql=$empire->query("select classid,classname,bname,bclassid,islast,wburl,showclass from {$dbtbpre}enewsclass where bclassid='$bclassid' order by myorder,classid");
$i=0;
while($r=$empire->fetch($sql)){
$i++;
$classurl=$r['wburl']?$r['wburl']:sys_ReturnBqClassUrl($class_r[$r['classid']]);//判断是外部栏目使用外部栏目地址
if(!$r['islast']&&!$r['wburl']&&$r['showclass']==0){//判断非终极就输出非终极样式并且继续执行查询
$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>';
}elseif(($r['islast']||$r['wburl'])&&$r['showclass']==0){//判断是终极就输出终极样式
$rdata.='<li><span><b><a href="'.$classurl.'">'.$r['classname'].'</a></b></span></li>';
}
}
return $rdata;
}
使用方法：<?=YL_Class_Trees(0)?>
html实例代码：<!doctype html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>帝国CMS全站栏目树形折叠菜单(无限级)</title>
<style type="text/css">
a{color:#333;text-decoration:none;outline:none;}
a:hover{color:#f60;}
ul{list-style:none;padding:0;}
#menu .tree1{padding:14px 14px 14px 39px;color:#6F93FF;font-size:16px;font-family:"黑体";border-bottom:solid 1px #eee;}
#menu #tree_root{overflow:auto;}
#menu #tree_root li span{display:block;height:18px;line-height:18px;color:#222;cursor:pointer;padding:6px 0;}
#menu li .hover,#menu li span:hover{background-color:#e9edf6;}
#menu ul{overflow:hidden;}
#menu ul li{padding-left:20px;}
#menu ul li b{font-weight:normal;position:relative;padding-left:16px;}
#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;}
#menu ul li .On:before,#menu ul li .On2Off:before{top:3px;border-bottom-color:#999;border-right-color:#999;}
#menu ul li .Off:before{top:5px;border-top-color:#999;border-right-color:#999;}
#menu ul li .On2Off:before{transform:rotate(0deg);-o-transform:rotate(0deg);-ms-transform:rotate(0deg);-moz-transform:rotate(0deg);-webkit-transform:rotate(0deg);}
</style>
</head>
<body>
<div id="menu">
<h1 class="tree1">本站所有栏目</h1>
<ul id="tree_root">
<?=YL_Class_Trees(0)?>
</ul>
</div>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>
$(function(){//目录树折叠按钮 -------------------------------
function setTreeStyle(obj){
var objStyle = obj.children("b");
var objList = obj.siblings("ul");
if(objList.length == 1){
var style = objStyle.attr("class");
objStyle.attr("class","On2Off");
setTimeout(
function(){
if(style == "Off"){
objList.parent().siblings("li").children("span").children(".On").each(function(){
setTreeStyle($(this).parent());
});
var H = objList.innerHeight()
objList.css({display:"block",height:"0"});
objList.animate({height:H},300,function(){$(this).css({height:"auto"});});
objStyle.attr("class","On");
}
else if(style == "On"){
objList.find("li").children("span").children(".On").each(function(){
setTreeStyle($(this).parent());
});
var H = objList.innerHeight()
objList.animate({height:0},300,function(){$(this).css({height:"auto",display:"none"})});
objStyle.attr("class","Off");}},42);}}
$("#tree_root").find("li").children("span").click(function(){
setTreeStyle($(this));
});
})
</script>
</body>
</html>
效果截图：
具体使用请自行扩展开发即可。本函数预留足够大的发挥空间。
页:
[1]