SteamCMS TopList标签结合JavaScript实现序号与分页效果

SteamCMS TopList标签结合JavaScript实现序号与分页效果

SteamCMS Fish模板专题一：TopList标签与JavaScript结合的两个实例

建议先查阅SteamCMS标准模板标签文档，了解TopList标签及其相关属性的用法。

在Top列表每条记录前添加数字（也可替换为图片，此处仅以数字为例）。

实现原理：在最前端初始化一个JavaScript变量，在TopList循环体内将该变量加1，并在循环体内部输出该变量值（ASP代码实现逻辑相同）。

添加列表序号的示例

关键代码示例：

<body>

<script language="javascript">

// 全局变量

var i=1;

// 输出i，并i自增

function doit(){

document.write(i);

i++;

</script>

<!--Steam:TopList ChannelID='0' Type='Commend' IsTop='False' HasImage='False' Number='20' Cols='1' EnterTag='' -->

<script language="javascript">doit();</script>.<!--Steam:ContentField FieldName='Title' Length='-1' /-->

<!--/Steam:TopList-->

</body>

代码中，绿色部分定义了一个全局变量i及函数doit。doit函数在循环体的红色部分运行，负责输出i的值。蓝色部分为TopList标签。红色代码后的暗黄色部分为标题。上述代码执行后，每条记录前将显示对应的数字序号。

每隔五行插入空行的示例

第二个示例：每隔五行插入一个空行，效果如下：

在Top列表每隔五行插入一个空行（也可插入图片或其他复杂代码）。

实现原理：在最前端初始化一个JavaScript变量，在TopList循环体内将该变量加1，并在循环体中计算该变量是否能被5整除，若能整除则输出空行。

关键代码示例：

<body>

<script language="javascript">

// 全局变量

var i=1;

// 输出i，并i自增

function doit(){

if(i%5==0){// 判断是否被5整除

document.write("<br />");

i++;

</script>

<!--Steam:TopList ChannelID='0' Type='Commend' IsTop='False' HasImage='False' Number='20' Cols='1' EnterTag='' -->

<!--Steam:ContentField FieldName='Title' Length='-1' /--><script language="javascript">doit();</script>

<!--/Steam:TopList-->

</body>

代码中，绿色部分定义了一个全局变量i及函数doit。doit函数在循环体的红色部分运行，判断变量是否能被5整除，若能则输出<br>标签。蓝色部分为TopList标签。红色代码前的黄色部分为标题。上述代码执行后，将每隔五行插入一个空行。