您的位置:首页> 日志> 前端技术 正文

    由于项目的需要,网站侧栏需要制作多级菜单效果,而又没有现成的可以实现,因此借用已有的多级导航菜单标签进行修改制作出符合要求的侧栏多级菜单。制作的不是很完善,希望有人帮忙修改一下,实现更人性化的调用方法:

    实现效果:

 

 

 

 

 

 

调用方法:

{PE.Label id="侧栏-多级菜单" nodeId="{PE.Label id="取得指定级别父节点信息" nodeId="3332" depth="1" fieldName="nodeID" /}" 
depth="3" type="2" currentId="3332" BoxClassName="sideBox space10" className="nodeMenu" 
indexName="{PE.Label id="取得节点名称" nodeId="{PE.Label id="取得指定级别父节点信息" nodeId="3332" depth="1" fieldName="nodeID" /}"/}" /}

 

 

 

 

 

 

 

 

标签代码如下:

 

<root>
  <LabelType>改进类</LabelType>
  <LabelImage>../../Admin/Images/LabelIco/GetArticleCustom.gif</LabelImage>
  <LabelIntro>
  </LabelIntro>
  <OutType>sin</OutType>
  <LabelDataType>sql_sysquery</LabelDataType>

  <attributes>
    <name>linkOpenType</name>
    <default>-1</default>
    <intro>打开方式,-1默认后台节点配置,0本页,1新页面</intro>
  </attributes>

  <attributes>
    <name>nodeId</name>
    <default>0</default>
    <intro>节点ID</intro>
  </attributes>

  <attributes>
    <name>depth</name>
    <default>2</default>
    <intro>显示多少级节点</intro>
  </attributes>

   <attributes>
    <name>currentDepth</name>
    <default>1</default>
    <intro>当前层数,标签内部使用,不能作为外表调用参数。</intro>
  </attributes>

  <attributes>
    <name>currentId</name>
    <datatype></datatype>
    <default>3332</default>
    <intro>当前节点ID,用于增加当前类名on</intro>
  </attributes>

  <attributes>
    <name>splitchar</name>
    <datatype>string</datatype>
    <default></default>
    <intro>是否显示分隔符</intro>
  </attributes>

  <attributes>
    <name>indexName</name>
    <datatype>string</datatype>
    <default></default>
    <intro>常用于子站导航,如果不为空,会在导航前面增加一个名称为indexName的值的链接,链接到nodeId地址</intro>
  </attributes>

  <attributes>
    <name>outputQty</name>
    <default>99999</default>
    <intro>输出节点个数,只对于一级菜单有效。</intro>
  </attributes>

  <attributes>
    <name>showTip</name>
    <default>false</default>
    <intro>是否显示节点提示</intro>
  </attributes>

  <attributes>
    <name>type</name>
    <datatype></datatype>
    <default>1</default>
    <intro>导航类型
	1 : 一级隐藏:li1 只控制ul1 的显示消失。
	2 :多级隐藏:所有li 控制它里面的ul 的显示消失,例如 li2 可控制 ul2 显示消失。
	3 :一级显示。ul1默认显示,鼠标移走不消失。
    </intro>
  </attributes>

  <attributes>
    <name>appendItem</name>
    <datatype></datatype>
    <default></default>
    <intro>第一个节点(首页)里面插入的html内容</intro>
  </attributes>

  <attributes>
    <name>className</name>
    <datatype>string</datatype>
    <default>mainNav</default>
    <intro>菜单id和类名</intro>
  </attributes>
  
  <attributes>
    <name>BoxClassName</name>
    <datatype>string</datatype>
    <default>mainNav</default>
    <intro>DIV的类名</intro>
  </attributes>

  <attributes>
    <name>effect</name>
    <datatype></datatype>
    <default>fade</default>
    <intro>显示特效:
	      fade:淡入淡出
	      slide:上下伸展
    </intro>
  </attributes>

   <attributes>
    <name>delayTime</name>
    <datatype></datatype>
    <default>200</default>
    <intro>特效延迟时间</intro>
  </attributes>

  <attributes>
    <name>removeOn</name>
    <datatype></datatype>
    <default>false</default>
    <intro>鼠标移走,删除li1的on1类名</intro>
  </attributes>


  <LabelSqlString>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 
  </LabelSqlString>
  <LabelTemplate><![CDATA[<?xml version="1.0" encoding="utf-8"?>
            <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" 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&gt;0 and $currentDepth&lt;$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&gt;0 and $currentDepth&lt;$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>]]></LabelTemplate>

</root>