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

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

luosi | 2013年09月29日 |

>>收藏本文 已有 0条评论

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

 

第一,标签命名为“PE子栏目列表”,标签内容如下:

<?xml version="1.0" encoding="utf-8"?>
<root>
  <LabelType>改进类</LabelType>
  <LabelIntro>PE子栏目列表</LabelIntro>
  <LabelDataType>sql_sysquery</LabelDataType>
  <EnabelAjax>False</EnabelAjax>
  <IsXsltSql>true</IsXsltSql>
  <IsXsltCountSql>true</IsXsltCountSql>
  <Version officialVersion="" modifiedVersions="4700" compatibleVersion="" />
  <UsePage>True</UsePage>

  <LabelSqlString><![CDATA[<?xml version="1.0" encoding="utf-8"?>
            <xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
            <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>]]></LabelSqlString>

  <LabelSqlCount></LabelSqlCount>


  <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="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>]]></LabelTemplate>
  <attributes>
    <name>showOnMenu</name>
    <default>false</default>
    <intro>当为true时,后台节点“是否在顶部菜单处显示”设置有效(常和indexName连用,作为导航)</intro>
  </attributes>
  <attributes>
    <name>indexName</name>
    <default>
    </default>
    <intro>首页名称,当不为空的时候,会增加一个链接到parentId节点,名称为indexName的链接(常用于作为子站导航)</intro>
  </attributes>
  <attributes>
    <name>currentId</name>
    <default>3572</default>
    <intro>当前id,用于增加当前class属性on</intro>
  </attributes>
  <attributes>
    <name>openType</name>
    <default>2</default>
    <intro>打开方式:1为新窗口,2为按节点配置,其它数值为原窗口打开</intro>
  </attributes>
  <attributes>
    <name>hasTxt</name>
    <default>true</default>
    <intro>是否输出节点文字(常用于背景为图片的按钮)</intro>
  </attributes>
  <attributes>
    <name>hasHref</name>
    <default>true</default>
    <intro>是否有链接</intro>
  </attributes>
  <attributes>
    <name>hasLi</name>
    <default>true</default>
    <intro>是否输出li包裹元素</intro>
  </attributes>
  <attributes>
    <name>hasPic</name>
    <default>false</default>
    <intro>是否输出节点图片,hasLi="true"时才有效</intro>
  </attributes>
  <attributes>
    <name>outputQty</name>
    <default>99999</default>
    <intro>输出个数</intro>
  </attributes>
   <attributes>
    <name>subOutputQty</name>
    <default>6</default>
    <intro>子栏目输出个数</intro>
  </attributes>
  <attributes>
    <name>parentid</name>
    <default>0</default>
    <intro>父栏目ID</intro>
  </attributes>
  <attributes>
    <name>splitchar</name>
    <default>
    </default>
    <intro>分割符号,可以任何字符,常用"|",空为没有分割字符</intro>
  </attributes>
  <CacheTime>0</CacheTime>
  <OutType>
  </OutType>

</root>

 

上面标签中

(1)代表当<li></li>循环到3的倍数时则给它添加外围</ul><ul>元素

<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>

(2)代表的是当循环的数量不足三的倍数情况下补足相应元素;

<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>

(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效果代码:

<div class="tsMenu3" id="zwgkTsMenu">
    {PE.Label id="PE子栏目列表" parentid="3572" outputQty="15" subOutputQty="6" /}
</div>
<script type="text/javascript">
    $(".tsMenu3 ul:first").addClass("first on");
    $(".tsMenu3>ul:last").addClass("last");
    $(".tsMenu3 ul").mousemove(function(){
            $(this).siblings().removeClass("on");	
            $(this).addClass("on");
        });
</script>