中国泸州-特殊菜单制作!
在输出中国泸州项目的过程中,遇到这种特殊的菜单输出!因此经过请教等以及参考原有 子栏目列表 标签终于做出来这种效果的标签!
第一,标签命名为“PE子栏目列表”,标签内容如下:
改进类 PE子栏目列表 sql_sysquery False true true True <?xml version="1.0" encoding="utf-8"?> <xsl:transform version="1.0" xmlns:xsl=""> <xsl:output method="xml" omit-xml-declaration="yes" /> <xsl:param name="showOnMenu"/> <xsl:param name="outputQty"/> <xsl:template match="/"> <root> <sql> SELECT TOP @outputQty NodeID, NodeName,OpenType,arrChildID,NodePicUrl FROM PE_Nodes WHERE NodeID NOT IN( SELECT TOP @startrow NodeID FROM PE_Nodes WHERE ParentID = @parentid <xsl:if test="$showOnMenu='true'"> AND ShowOnMenu = 1 </xsl:if> AND PurviewType != 3 ORDER BY RootID, OrderID ) AND ParentID = @parentid <xsl:if test="$showOnMenu='true'"> AND ShowOnMenu = 1 </xsl:if> AND PurviewType != 3 ORDER BY RootID, OrderID </sql> <countsql> select count(NodeID) from PE_Nodes WHERE ParentID = @parentid <xsl:if test="$showOnMenu='true'"> AND ShowOnMenu = 1 </xsl:if> AND PurviewType != 3 </countsql> </root> </xsl:template> </xsl:transform> <?xml version="1.0" encoding="utf-8"?> <xsl:transform version="1.0" xmlns:xsl="" xmlns:pe="labelproc" exclude-result-prefixes="pe"> <xsl:output method="html" /> <xsl:param name="sql" /> <xsl:param name="parentid" /> <xsl:param name="splitchar"/> <xsl:param name="hasLi"/> <xsl:param name="hasHref"/> <xsl:param name="openType"/> <xsl:param name="currentId"/> <xsl:param name="indexName"/> <xsl:param name="hasTxt"/> <xsl:param name="hasPic"/> <xsl:param name="subOutputQty"/> <xsl:variable name="countnum" select="count(/NewDataSet/Table)"/> <xsl:template match="/"> <xsl:choose> <xsl:when test="count(/NewDataSet/Table) = 0"> <li class="noData">暂无资料</li> </xsl:when> <xsl:otherwise> <ul> <xsl:for-each select="/NewDataSet/Table"><!-- 循环开始 --> <li> <xsl:if test="position() mod 3 = 0"> <xsl:attribute name="class">last1</xsl:attribute> </xsl:if> <h4 class="parMenu"> <xsl:if test=" $hasPic='true' "> <a class="pic" title="{NodeName}"> <xsl:if test="$openType = 1"> <xsl:attribute name="target">_blank</xsl:attribute> </xsl:if> <xsl:if test="$openType = 2 and OpenType = 1"> <xsl:attribute name="target">_blank</xsl:attribute> </xsl:if> <xsl:if test="$hasHref='true'"> <xsl:attribute name="href"> <xsl:value-of select="pe:GetNodePath('true',NodeID)" /> </xsl:attribute> </xsl:if> <xsl:element name="img"> <xsl:attribute name="src"> <xsl:choose> <xsl:when test="NodePicUrl != ''">{PE.SiteConfig.ApplicationPath /}<xsl:value-of select="NodePicUrl"/> </xsl:when> <xsl:otherwise>{PE.SiteConfig.ApplicationPath /}UploadFiles/nopic.gif</xsl:otherwise> </xsl:choose> </xsl:attribute> </xsl:element> </a> </xsl:if> <a> <xsl:if test=" $hasPic='true' "><xsl:attribute name="class">tit</xsl:attribute></xsl:if> <xsl:attribute name="title"><xsl:value-of select="NodeName" /></xsl:attribute> <xsl:if test="$openType = 1"> <xsl:attribute name="target">_blank</xsl:attribute> </xsl:if> <xsl:if test="$openType = 2 and OpenType = 1"> <xsl:attribute name="target">_blank</xsl:attribute> </xsl:if> <xsl:if test="$hasHref='true'"> <xsl:attribute name="href"> <xsl:value-of select="pe:GetNodePath('true',NodeID)" /> </xsl:attribute> </xsl:if> <xsl:if test=" $hasTxt='true' "> <xsl:value-of select="NodeName"/> </xsl:if> </a> </h4> <ul class="subMenu"> {PE.Label id="子栏目列表" parentid="<xsl:value-of select="NodeID"/>" outputQty="<xsl:value-of select="$subOutputQty"/>" /} </ul> </li> <xsl:choose> <xsl:when test="position() = last() and (position()-1) mod 3 = 0"><li><h4></h4></li><li class="last1"><h4></h4></li></xsl:when> <xsl:when test="position() = last() and position() mod 3 != 0"><li class="last1"><h4></h4></li></xsl:when> </xsl:choose> <xsl:if test="(position() mod 3 = 0) and (position() != last())"> <xsl:text disable-output-escaping="yes"></ul><ul></xsl:text> </xsl:if> </xsl:for-each> </ul> </xsl:otherwise> </xsl:choose> </xsl:template> </xsl:transform> showOnMenu false 当为true时,后台节点“是否在顶部菜单处显示”设置有效(常和indexName连用,作为导航) indexName 首页名称,当不为空的时候,会增加一个链接到parentId节点,名称为indexName的链接(常用于作为子站导航) currentId @RequestInt_id 当前id,用于增加当前class属性on openType 2 打开方式:1为新窗口,2为按节点配置,其它数值为原窗口打开 hasTxt true 是否输出节点文字(常用于背景为图片的按钮) hasHref true 是否有链接 hasLi true 是否输出li包裹元素 hasPic false 是否输出节点图片,hasLi="true"时才有效 outputQty 99999 输出个数 subOutputQty 6 子栏目输出个数 parentid 0 父栏目ID splitchar 分割符号,可以任何字符,常用"|",空为没有分割字符 0
上面标签中
(1)代表当
循环到3的倍数时则给它添加外围-
元素
</ul><ul>
(2)代表的是当循环的数量不足三的倍数情况下补足相应元素;
(3)即可循环出下面结构的效果:
第二:该结构相应的样式如下:
.tsMenu3{ overflow:hidden; border:1px solid #d5d5d5; border-top:7px solid #c7e3f7; } .tsMenu3 ul{overflow:hidden;} .tsMenu3 ul.first{border-top:1px solid #d5d5d5;} .tsMenu3 ul.on{ border-bottom:1px dotted #c9c9c9;} .tsMenu3 ul.on li .subMenu{display:block;} .tsMenu3 ul.last,.tsMenu3 ul.last h4{border-bottom:0;} .tsMenu3 ul.on h4{border-bottom:1px dotted #c9c9c9;} .tsMenu3 li{width:228px; float:left; border-right:1px dotted #c9c9c9; margin:0; padding:0;} .tsMenu3 li.last1{border-right:0; width:230px;} .tsMenu3 li h4{height:55px; line-height:55px; overflow:hidden; text-indent:36px; background:#f0f7fa url(images/share/dot01.png) no-repeat 23px 24px; border-bottom:1px dotted #c9c9c9;} .tsMenu3 li h4 a{font-size:14px; font-weight:bold; text-align:left; color:#226ec3; } .tsMenu3 li .subMenu{ overflow:hidden; padding:6px 0; border-bottom:0; display:none;} .tsMenu3 li .subMenu li{height:26px; line-height:26px; width:49%; float:left; text-indent:10px; overflow:hidden; border:0;} .tsMenu3 li .subMenuli a{color:#333;} .tsMenu3 li .subMenu li a:hover{color:#c00; text-decoration:underline;} /*政务公开-首页特殊菜单子栏目高度*/ #zwgkTsMenu li .subMenu{height:78px; overflow:hidden;}
第三:调用方式以及js效果代码:
{PE.Label id="PE子栏目列表" parentid="@RequestInt_id" outputQty="15" subOutputQty="6" /}
用户登录
还没有账号?
立即注册