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

网站需求:当制作手机版父栏目页时,发现父栏目需要根据后台子栏目节点数量无限循环N行!且每行有3个切换!

原有标签功能:经过查看已有标签“手机类_信息列表模块_父栏目”发现只能指定父栏目节点,并且只能显示一行N个切换!不能循环行数

缺陷分析:已有标签导致只能根据每个父栏目的子栏目手机版启用数量写死在对应的模板中!每个父栏目节点不能使用通用模板!而且客户后期增加子栏目并启用手机版时还得在模板中重新增加!这些缺点足以让我们后期维护麻烦不断!!

下面就是改进“手机类_信息列表模块_父栏目”标签过程:

一、发现新的xsl元素“<xsl:variable>",查找知识点:显示它的作用是:“元素用于声明局部或全局的变量 ”

      这一发现奠定了在一个标签中实现无限循环N个切换的效果!

 

二、标签修改并解析如下:

(1)新增一个变量:

  1.   <attributes>
  2.     <name>colsOutputQty</name>
  3.     <datatype>supersql</datatype>
  4.     <default>3</default>
  5.     <intro>每行数量</intro>
  6.   </attributes>
  7.  
  8. 声明变量 
  9. <xsl:param name="colsOutputQty" />

(2)利用colsOutputQty变量和<xsl:variable>元素

  1. <xsl:for-each select="/NewDataSet/Table"><!-- 增加行循环 -->
  2.   <xsl:variable name="rel"><xsl:value-of select="position()"/></xsl:variable><!-- 把第N行的值传递给一个变量rel -->
  3.   <xsl:if test="($colsOutputQty*position())-last() &lt; $colsOutputQty"><!-- 判断是否[每行$colsOutputQty值 * 行数 - 启用的栏目数量"last()" 小于 每行$colsOutputQty值]  -->
  4.   <div class="infoBox J_slideMod">
  5.       <nav>
  6.       <ul>
  7.       <xsl:for-each select="/NewDataSet/Table">
  8.         <xsl:if test="position() &gt; $colsOutputQty*($rel - 1) and position() &lt; ($colsOutputQty*$rel + 1)">
  9.         <!-- 判断是否[循环的第N个 大于 每行$colsOutputQty值*(第N行-1) 并且(与) 循环的第N个 小于 (每行$colsOutputQty值*第N行 +1) ] *** 前一个是判断开始位置,后一个是判断结束位置 必须两个同时成立时才循环输出下面的-->
  10.         <li>
  11.         <xsl:if test="position() = 1"><xsl:attribute name="class">on</xsl:attribute></xsl:if>
  12.         <a><xsl:value-of select="pe:CutText(NodeName,$nodeTitleLength,'')"/></a>
  13.         </li>
  14.         </xsl:if>
  15.       </xsl:for-each>
  16.       </ul>
  17.       </nav>
  18.       <div class="bd">
  19.       <ul class="listWrap">
  20.         <xsl:for-each select="/NewDataSet/Table">
  21.         <xsl:if test="position() &gt; $colsOutputQty*($rel - 1) and position() &lt; ($colsOutputQty*$rel + 1)"><!-- 解释如上一个一样! -->
  22.         <li>
  23.           <xsl:choose>
  24.             <xsl:when test="NodeType=1"> <!-- 判断节点ID类型为栏目时 输出列表形式 -->
  25.               <div class="swipeHeight">
  26.                   <ul class="infoList">
  27.                     {PE.Label id="手机类_头条图文信息列表" bindStyle="自适应" bindModel="<xsl:value-of select="$bindModel"/>nodes="<xsl:value-of select="NodeID"/>" outputQty="<xsl:value-of select="$outputQty"/>topicNum="<xsl:value-of select="$topicNum"/>titleLength="<xsl:value-of select="$titleLength"/>imageWidth="<xsl:value-of select="$imageWidth"/>imageHeight="<xsl:value-of select="$imageHeight"/>contentLength="<xsl:value-of select="$contentLength"/>usePage="false" /} 
  28.                   </ul>
  29.                   <div data-url="{pe:GetNodePath(false,NodeID)}" class="cateBtn">进入<xsl:value-of select="NodeName" />&gt;&gt;</div>
  30.               </div>
  31.             </xsl:when>
  32.             <xsl:otherwise> <!-- 否则输出单页自定义内容(这个跟查询语句中指定栏目类型1,3有关!)-->
  33.               <div class="swipeHeight">
  34.                 <div class="boxCont">
  35.                   {PE.Label id="自设内容列表" nodeid="<xsl:value-of select="NodeID"/>" num="1" contentLength="<xsl:value-of select="$DycontentLength"/>" /} 
  36.                 </div>
  37.                 <div data-url="{pe:GetNodePath(false,NodeID)}" class="cateBtn">进入<xsl:value-of select="NodeName" />&gt;&gt;</div>
  38.               </div>
  39.             </xsl:otherwise>
  40.           </xsl:choose>
  41.         </li>
  42.         </xsl:if>
  43.         </xsl:for-each>
  44.       </ul>
  45.       </div>
  46.   </div>
  47.   </xsl:if>
  48. </xsl:for-each>

三、调用方式:

  1. {PE.Label id="手机类_信息列表模块_父栏目" nodeId="@ RequestInt_id" bindModel="1" nodeOutputQty="999" colsOutputQty="3"  
  2. outputQty="9" topicNum="1" titleLength="100" contentLength="70" /} 

 

四、实现效果如下: