利用多级导航菜单制作侧栏多级菜单
由于项目的需要，网站侧栏需要制作多级菜单效果，而又没有现成的可以实现，因此借用已有的多级导航菜单标签进行修改制作出符合要求的侧栏多级菜单。制作的不是很完善，希望有人帮忙修改一下，实现更人性化的调用方法：
实现效果：
调用方法：
{PE.Label id="侧栏-多级菜单" nodeId="{PE.Label id="取得指定级别父节点信息" nodeId="@RequestInt_id" depth="1" fieldName="nodeID" /}"
depth="3" type="2" currentId="@RequestInt_id" BoxClassName="sideBox space10" className="nodeMenu"
indexName="{PE.Label id="取得节点名称" nodeId="{PE.Label id="取得指定级别父节点信息" nodeId="@RequestInt_id" depth="1" fieldName="nodeID" /}"/}" /}
标签代码如下：
改进类
../../Admin/Images/LabelIco/GetArticleCustom.gif
sin
sql_sysquery
linkOpenType
-1
打开方式，-1默认后台节点配置，0本页，1新页面
nodeId
0
节点ID
depth
2
显示多少级节点
currentDepth
1
当前层数，标签内部使用，不能作为外表调用参数。
currentId
@RequestInt_id
当前节点ID，用于增加当前类名on
splitchar
string
是否显示分隔符
indexName
string
常用于子站导航，如果不为空，会在导航前面增加一个名称为indexName的值的链接，链接到nodeId地址
outputQty
99999
输出节点个数，只对于一级菜单有效。
showTip
false
是否显示节点提示
type
1
导航类型
1 ： 一级隐藏：li1 只控制ul1 的显示消失。
2 ：多级隐藏：所有li 控制它里面的ul 的显示消失，例如 li2 可控制 ul2 显示消失。
3 ：一级显示。ul1默认显示，鼠标移走不消失。
appendItem
第一个节点（首页）里面插入的html内容
className
string
mainNav
菜单id和类名
BoxClassName
string
mainNav
DIV的类名
effect
fade
显示特效：
fade：淡入淡出
slide：上下伸展
delayTime
200
特效延迟时间
removeOn
false
鼠标移走，删除li1的on1类名
SELECT TOP @outputQty NodeID,OpenType,NodeName,Tips,Child,NodeType,LinkUrl,Depth,arrChildID FROM PE_Nodes
WHERE ParentID = @nodeId AND ShowOnMenu = 1 AND PurviewType != 3 ORDER BY RootID, OrderID
<?xml version="1.0" encoding="utf-8"?>
<xsl:transform version="1.0" xmlns:xsl="" xmlns:pe="labelproc" exclude-result-prefixes="pe">
<xsl:output method="xml" omit-xml-declaration="yes" />
<xsl:param name="linkOpenType"/>
<xsl:param name="depth"/>
<xsl:param name="currentDepth"/>
<xsl:param name="currentId"/>
<xsl:param name="splitchar"/>
<xsl:param name="type"/>
<xsl:param name="className"/>
<xsl:param name="BoxClassName"/>
<xsl:param name="delayTime"/>
<xsl:param name="effect"/>
<xsl:param name="appendItem"/>
<xsl:param name="removeOn"/>
<xsl:param name="nodeId"/>
<xsl:param name="indexName"/>
<xsl:param name="showTip"/>
<xsl:template match="/">
<div class="{$BoxClassName}">
<div class="hd">
<xsl:choose>
<xsl:when test=" $indexName!='' "><!-- 当作为子站导航时 -->
<h4 class="h1" id="hID{$nodeId}">
<a id="aID{$nodeId}" class="a1">
<xsl:attribute name="target">
<xsl:choose>
<xsl:when test="$linkOpenType=0">_self</xsl:when>
<xsl:when test="$linkOpenType=1">_blank</xsl:when>
<xsl:when test="pe:GetNodeFieldName(NodeID, 'OpenType') = 0">_self</xsl:when>
<xsl:otherwise>_blank</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:if test="$showTip='true'">
<xsl:attribute name="title">
<xsl:choose>
<xsl:when test=" Tips!='' ">
<xsl:value-of select="Tips"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="$indexName"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</xsl:if>
<xsl:attribute name="href">
<xsl:value-of select="pe:GetNodePath('false',$nodeId)" />
</xsl:attribute>
<xsl:value-of select="$indexName"/>
</a>
</h4>
</xsl:when>
<xsl:otherwise><h4><span>栏目导航</span></h4></xsl:otherwise>
</xsl:choose>
</div>
<div class="bd" id="nodeMenuBar">
<ul id="{$className}" class="{$className}">
<!-- 循环开始============================================ -->
<xsl:for-each select="/NewDataSet/Table">
<li>
<xsl:attribute name="class">li<xsl:value-of select="$currentDepth"/>
<xsl:choose>
<xsl:when test="position()=1 and $indexName=''"> first<xsl:value-of select="$currentDepth"/></xsl:when>
<xsl:when test="position()=last()"> last<xsl:value-of select="$currentDepth"/></xsl:when>
</xsl:choose>
<xsl:if test="Child>0 and $currentDepth<$depth"> hasUl1</xsl:if>
<xsl:if test="($currentId=$nodeId and position()=1 and $indexName='') or contains(concat(',', arrChildID, ','), concat(',', $currentId, ','))"> on1</xsl:if>
</xsl:attribute>
<xsl:attribute name="id">liID<xsl:value-of select="NodeID"/></xsl:attribute>
<h4>
<xsl:attribute name="class">h<xsl:value-of select="$currentDepth"/></xsl:attribute>
<xsl:attribute name="id">hID<xsl:value-of select="NodeID"/></xsl:attribute>
<a>
<xsl:attribute name="target">
<xsl:choose>
<xsl:when test="$linkOpenType=0">_self</xsl:when>
<xsl:when test="$linkOpenType=1">_blank</xsl:when>
<xsl:when test="pe:GetNodeFieldName(NodeID, 'OpenType') = 0">_self</xsl:when>
<xsl:otherwise>_blank</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:if test="$showTip='true'">
<xsl:attribute name="title">
<xsl:choose>
<xsl:when test=" Tips!='' ">
<xsl:value-of select="Tips"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="NodeName"/>
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
</xsl:if>
<xsl:attribute name="class">a<xsl:value-of select="$currentDepth"/></xsl:attribute>
<xsl:attribute name="id">aID<xsl:value-of select="NodeID"/></xsl:attribute>
<xsl:attribute name="href">
<xsl:choose>
<xsl:when test="NodeType = 4">
<xsl:value-of select="LinkUrl"/>
</xsl:when>
<xsl:otherwise>
<xsl:value-of select="pe:GetNodePath('false',NodeID)" />
</xsl:otherwise>
</xsl:choose>
</xsl:attribute>
<xsl:value-of select="NodeName"/>
</a>
</h4>
<xsl:if test="Child>0 and $currentDepth<$depth">
<ul>
<xsl:attribute name="class">ul<xsl:value-of select="$currentDepth"/> </xsl:attribute>
<xsl:attribute name="id">ulID<xsl:value-of select="NodeID"/>
</xsl:attribute>
{PE.Label id="指定深度节点列表" showTip="<xsl:value-of select="$showTip"/>" nodeid="<xsl:value-of select="NodeID"/>" depth="<xsl:value-of select="$depth"/>" currentId="<xsl:value-of select="$currentId"/>" currentDepth="<xsl:value-of select="$currentDepth+1"/>" /}
</ul>
</xsl:if>
</li>
<xsl:if test="position() != last() and $splitchar=1"><li class="spe">|</li></xsl:if>
</xsl:for-each>
</ul>
</div>
</div>
<script type="text/javascript">
jQuery(function($){
var navST;
var name='<xsl:value-of select="$className"/>';
var t=<xsl:value-of select="$delayTime"/>;
var type='<xsl:value-of select="$type"/>';
var removeOn='<xsl:value-of select="$removeOn"/>';
var effect='<xsl:value-of select="$effect"/>';
var appendItem = '#<xsl:value-of select="$appendItem"/>';
var li="#"+name+" li";
var index = 0;
if( !$("#"+name+" .li1").hasClass("on1") ){ $("#"+name+" .li1").first().addClass("on1"); } //默认第一个加.on1类
index = $("#"+name+" .li1").index( $("#"+name+" .on1") );
if(type=='1'){ li="#"+name+" .li1"; }
if( appendItem!='#'){ //插入内容
var appendHtml = $(appendItem).html(); $(li).first().append( appendHtml ); $(appendItem).remove(); }
if(type=='3'){ $("#"+name+" .on1").find("ul").first().show(); }
$(li).click(function(event){
var curItem = $(this);
var onNum = (curItem.attr("class").split(" "))[0].replace("li","");
if($(this).hasClass("on"+onNum)){
$(this).removeClass("on"+onNum)
}
else{
$(li).removeClass("on"+onNum); curItem.addClass("on"+onNum);
}
event.stopPropagation();//阻止冒泡事件发生
});
});
</script>
</xsl:template>
</xsl:transform>
用户登录
还没有账号？
立即注册