用通用循环标签构造可折叠树型菜单！-领先建站CMS提供服务商我们专注于CMS建站产品的研发

5869 查看	14 回复

主题：[原创]用通用循环标签构造可折叠树型菜单！ [收藏主题] 本贴被认定为精华

转到：

zhangwlx 当前离线

224 主题	0 广播	6 粉丝

级别:二年级

用户积分:1854 分
登录次数:119 次
注册时间:2006/12/26
最后登录:2010/3/16

zhangwlx 发表于：2009/2/26 14:45:00 | 只看该作者查看该作者主题楼主

做线上考试培训就选#科汛网校

用循环标签建可折叠树型导航菜单！！
外层SQL语句：
SELECT TOP 15 ID,FolderName,TS FROM [KS_Class] Where ChannelID=1 and TN='0' ORDER BY FolderOrder

内层SQL语句：
SELECT TOP 15 ID,FolderName FROM [KS_Class] Where ChannelID=1 and TN='{R:ID}' ORDER BY FolderOrder

XSLT样式:
<?xml version="1.0" encoding="GB2312"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<div id="main">
   <div id="map_main">
<xsl:for-each select="xml/outerlist/outerrow">
    <li class="top_type">
    <a href="javascript:disp('T_info_{@ts}');" target="_self">+</a><a href="{@classlink}" id="nav_{@id}" onmouseover="showMenu('nav_{@id}','subnav{@id}')"><xsl:value-of select="@foldername" disable-output-escaping="yes" /></a></li>
       <ul id="T_info_{@ts}">
      <xsl:for-each select="innerlist/innerrow">
       <li class="sub_type">-<a href="{@classlink}"><xsl:value-of select="@foldername" disable-output-escaping="yes" /></a></li>
      </xsl:for-each>
</ul>
</xsl:for-each>
</div>
</div>
</xsl:template>
</xsl:stylesheet>

css样式：
#top,#main,#bottom {width:778px;text-align:center;clear:both;margin:0 auto;background:#fff; overflow:hidden;}/*设置总宽度，文本对齐方式改回默认left,清除周围浮动，左右自适应[FireFox居中方式]*/
/* map 背景设置 */
#map_top{width:630px;height:93px;background:url(/baidoc_images/map_top.gif) no-repeat #fff;margin-left:70px !important;margin-left:0; }
#map_main{width:480px;background:url(/baidoc_images/map_middle.gif) repeat-y #fff;padding: 20px 0 20px 150px;margin-left:70px !important;margin-left:0;}
#map_bottom{width:630px;height:93px;background:url(/baidoc_images/map_bottom.gif) no-repeat #fff;margin-left:70px !important;margin-left:0;}
#map_top:after,#map_main:after,#map_bottom:after{ content: "."; display: block; height: 0; clear: both; visibility: hidden; }
/* ul li 设置 */
ul {padding-left:30px;}
li{ list-style:none; text-align:left; letter-spacing:1px;height:auto!important;height:25px;min-height:25px;}
li img{border:0;}
li.top_type{ height:25px; padding-top:5px;}
li.top_type a{ font-size:14px; font-weight:bold; color:#996600;letter-spacing:2px;}
.green_bold{ font-size:14px; font-weight:bold; color:#009900;letter-spacing:2px;}
li.sub_type{ height:20px; padding-top:3px;}
li.sub_type a{ font-size:12px; font-weight:normal;color:#666666;}

函数代码：
<SCRIPT language=JavaScript type=text/javascript>
function findObj(theObj, theDoc)
{
var p, i, foundObj;
if(!theDoc) theDoc = document;
if( (p = theObj.indexOf("?")) > 0 && parent.frames.length)
{
    theDoc = parent.frames[theObj.substring(p+1)].document;
    theObj = theObj.substring(0,p);
}
if(!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
for (i=0; !foundObj && i < theDoc.forms.length; i++)
    foundObj = theDoc.forms[i][theObj];
for(i=0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
    foundObj = findObj(theObj,theDoc.layers[i].document);
if(!foundObj && document.getElementById) foundObj = document.getElementById(theObj);
return foundObj;
}
function disp()
{
var RT,arg = disp.arguments;
if ((RT = findObj(arg[0])) != null){
   if ((arg[1]) != null){
   if(arg[1]=="1")
      {RT.style.display="";}
   else
   {RT.style.display="none";}
   }
   else{
   if(RT.style.display=="")
   {RT.style.display="none";}
   else
   {RT.style.display="";}
   }
   }
}
</SCRIPT>