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

带切换的头条图文信息列表

fatdong | 2015年04月07日 |

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

  头条图文信息列表估计大家在项目中用的比较多,应该不会很陌生吧!但带切换效果的估计大家很少遇到吧,最近有客户想要这种效果,看了下也不算难,又没有超出模板定制的范围就帮客户弄一下咯!效果图大家可以参考上图,由于近期项目比较多,项目都比较赶,只用了最简单的方法来实现,估计还有很大的优化空间。下面就来讲解一下这个如何实现。

  第一、以“头条图文信息列表_普通式”为基础进行修改,新的样式类标签大家看实际使用情况来命名,我这里的命名为“头条图文信息列表_带切换”。

  第二、分别找到头条的代码段和非头条的代码段,头条部分可以按照焦点图的部分进行修改,非头条列表弄个ul把它入进去就可以了,这里由于代码太长了,不好截图我就不截了,大家可以参考下下面的代码。

<div class="topPicConListTab"> 
    <xsl:attribute name="id"><xsl:value-of select='$optionalExtend'/></xsl:attribute> 
    <ul class="num"> 
        <xsl:for-each select="/NewDataSet/Table"> 
                <xsl:if test="$topicNum &gt; 0 and position() &lt;= $topicNum"> 
                    <li><xsl:value-of select="position()"/></li> 
                </xsl:if> 
        </xsl:for-each> 
    </ul> 
    <div class="topPicConList"> 
    <ul> 
        <xsl:for-each select="/NewDataSet/Table"> 
            <xsl:if test="$topicNum &gt; 0 and position() &lt;= $topicNum"> 
              {插入头条列表的代码段} 
            </xsl:if> 
        </xsl:for-each> 
    </ul> 
    </div> 
</div> 
 
 
 
<ul class="txtInfoList"> 
    <xsl:for-each select="/NewDataSet/Table"> 
        <xsl:if test="position() &gt; $topicNum"> 
        {插入非头条列表的代码段} 
        </xsl:if> 
    </xsl:for-each> 
</ul> 

  第三、模板调用和CSS修改,CSS根据实际使用会不所不同,我就不列了来了,有需要的童鞋可以到海淀外国语学校的新获取一下,估计这几天就上线了;下面是模板调用的代码,切换ID通过“optionalExtend”来指定,可选扩展参数默认就有的,不用再新建;

<div class="tabBox" id="newsHotTab"> 
    <div class="tHd"> 
        <span>{PE.Label id="取得节点名称带链接" nodeId="264"/}<div class="j"></div></span> 
        <span>{PE.Label id="取得节点名称带链接" nodeId="265"/}<div class="j"></div></span> 
        <span>{PE.Label id="取得节点名称带链接" nodeId="266"/}<div class="j"></div></span> 
        <span>{PE.Label id="取得节点名称带链接" nodeId="267"/}<div class="j"></div></span> 
    </div> 
    <div class="tBd"> 
        <div class="tCon"> 
            {PE.Label id="头条图文信息列表" bindStyle="带切换" displayDateTime="mm-dd" outputQty="8" titleLength="34" nodes="0" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_01" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="3" optionalCond="and isNews = 1"/} 
        </div> 
        <div class="tCon"> 
            {PE.Label id="头条图文信息列表" bindStyle="点击带切换" outputQty="8" titleLength="34" nodes="2,3,4,5,6,7,8,83" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_02" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="5"/} 
        </div> 
        <div class="tCon"> 
            {PE.Label id="头条图文信息列表" bindStyle="评论带切换" outputQty="8" titleLength="34" nodes="2,3,4,5,6,7,8,83" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_03" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="7"/} 
        </div> 
        <div class="tCon"> 
            {PE.Label id="头条图文信息列表(心情)" moodId="2" bindStyle="带切换" outputQty="8" titleLength="34" nodes="0" displayTips="true" topicNum="4"  topicTitleLength="28" contentLength="150" optionalExtend="topPicConListTab_04" topicContentLength="120" imageWidth="198" imageHeight="111"  listOrderType="23"/} 
        </div> 
    </div> 
</div> 
<script type="text/javascript"> 
    jQuery("#newsHotTab").slide({ titCell:".tHd span",mainCell:".tBd" }); 
    jQuery("#topPicConListTab_01").slide({ titCell:".num li",effect:"left",vis:1,mainCell:".topPicConList ul" }); 
    jQuery("#topPicConListTab_02").slide({ titCell:".num li",effect:"left",vis:1,mainCell:".topPicConList ul" }); 
    jQuery("#topPicConListTab_03").slide({ titCell:".num li",effect:"left",vis:1,mainCell:".topPicConList ul" }); 
    jQuery("#topPicConListTab_04").slide({ titCell:".num li",effect:"left",vis:1,mainCell:".topPicConList ul" }); 
</script>