您的位置: 首页 >日志>前端技术>详细内容

前端技术

中国泸州-特殊菜单制作!

来源:本站原创 发布时间:2013-09-29 13:51:38 浏览次数: 【字体:

     在输出中国泸州项目的过程中,遇到这种特殊的菜单输出!因此经过请教等以及参考原有 子栏目列表 标签终于做出来这种效果的标签!

 

第一,标签命名为“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">&lt;/ul&gt;&lt;ul&gt;</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" /}

    ×

    用户登录