TopList标签和JavaScript结合两例


Posted in Javascript onAugust 12, 2007

 (SteamCMS)Fish模版专贴一:TopList标签和JavaScript结合两例 
首先可以先参考 SteamCMS 标准模版标签说明 来了解一下TopList标签及其属性。 
在Top列表的记录前加上数字(当然也可以是图片,这里只是简单的举个例子)。
原理说明:先在最前面初始化一个js变量,在TopList中间,将Js变量加1,并在TopList循环体中间输出(我写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列表每隔五行插入一空行(当然也可以是图片,或者其他负责的代码)。
原理说明:先在最前面初始化一个js变量,在TopList中间,将Js变量加1,并在TopList循环体中计算此js变量是否被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标签。红色代码前面的黄色是标题。上面代码的结果就会在每隔五行插入一空行。简单吧。嘿嘿。

Javascript 相关文章推荐
一段批量给页面上的控件赋值js
Jun 19 Javascript
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
jQuery对html元素的取值与赋值实例详解
Dec 18 Javascript
Boostrap入门准备之border box
May 09 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
js实现九宫格的随机颜色跳转
Feb 19 Javascript
js实现显示手机号码效果
Mar 09 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
jQuery实现图片简单轮播功能示例
Aug 13 jQuery
JS实现数组去重及数组内对象去重功能示例
Feb 02 Javascript
OpenLayers3实现地图显示功能
Sep 25 Javascript
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
Javascript-Mozilla和IE中的一个函数直接量的问题分析
Aug 12 #Javascript
IE和Mozilla的兼容性汇总event
Aug 12 #Javascript
收藏Javascript中常用的55个经典技巧
Aug 12 #Javascript
JavaScript-世界上误解最深的语言分析
Aug 12 #Javascript
用javascript实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 #Javascript
alixixi runcode.asp的代码不错的应用
Aug 08 #Javascript
网上应用的一个不错common.js脚本
Aug 08 #Javascript
You might like
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
360搜索引擎自动收录php改写方案
2018/04/28 PHP
PHP生成(支持多模板)二维码海报代码
2018/04/30 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
JavaScript判断窗口是否最小化的代码(跨浏览器)
2010/08/01 Javascript
面向对象的Javascript之三(封装和信息隐藏)
2012/01/27 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
jQuery实现当按下回车键时绑定点击事件
2014/01/28 Javascript
Jquery性能优化详解
2014/05/15 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
JS实现黑客帝国文字下落效果
2015/09/01 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JavaScript实现经典排序算法之选择排序
2016/12/28 Javascript
VUE 更好的 ajax 上传处理 axios.js实现代码
2017/05/10 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
解决Vue不能检测数组或对象变动的问题
2018/02/24 Javascript
[00:02]DOTA2新版本使用PA至宝后暴击展示
2014/11/19 DOTA
Python sys.path详细介绍
2013/10/17 Python
python服务器与android客户端socket通信实例
2014/11/12 Python
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
Python爬虫设置代理IP的方法(爬虫技巧)
2018/03/04 Python
Python使用googletrans报错的解决方法
2018/09/25 Python
selenium3+python3环境搭建教程图解
2018/12/07 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python属于软件吗
2020/06/18 Python
公司JAVA开发面试题
2015/04/02 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
求职者简历中的自我评价
2013/10/20 职场文书
十八大报告观后感
2014/01/28 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
公司授权委托书
2014/10/17 职场文书
人间正道是沧桑观后感
2015/06/15 职场文书
初婚初育证明范本
2015/06/18 职场文书
入党申请书怎么写?
2019/06/21 职场文书
jQuery class属性操作addClass()与removeClass()、hasClass()、toggleClass()
2021/03/31 jQuery
Windows Server 2019 安装DHCP服务及相关配置
2022/04/28 Servers