历史版本17 :超级链接改变颜色 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 问题描述
在使用超级链接的时候,希望实现鼠标移至超级链接,该超级链接就改变字体颜色,以便区分当前选中的是哪个超级链接,提升用户体验,如下图所示:
1.2 解决思路
给模板添加一个「加载结束」事件,在事件中获取到超级链接单元格对象,然后添加鼠标滑过事件,鼠标放到该对象上的时候就改变字体颜色,离开时就恢复原来的颜色。
2. 示例编辑
2.1 准备模板
打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接解决Internet脚本运行慢示例主报表.cpt
2.2 添加加载结束事件
打开模板,点击「模板>模板 Web 属性>分页预览设置」,选择「为该模板单独设置」,在下方添加一个「加载结束」
,输入 JavaScript 代码如下:$("td span.linkspan").bind("mouseover",function(){
$(this).css("color","red");
}).bind("mouseleave",function(){
$(this).css("color","blue");
})
或者输入 JavaScript 代码如下:
$('.linkspan').mouseover(function(){$(this).css('color','red');}); //鼠标移上
$('.linkspan').mouseleave(function(){$(this).css('color','blue');}); //鼠标离开
$('.linkspan').mousedown(function(){$(this).css('color','green');}); //鼠标点击
步骤如下图所示:
2.3 效果预览
保存报表,点击「分页预览」,效果如下图所示:
注:不支持移动端。
3. 决策报表代码编辑
如果是决策报表中实现超链变色效果,设置方式和代码有所不同,详细介绍如下:
决策报表中,需要给组件添加初始化后事件,如下图所示:
点击变色代码:
setTimeout(function() {
$("span.linkspan").bind("click",function() {$(this).css("color", "red");})
}, 100);
悬浮和离开变色代码:
setTimeout(function() {
$("span.linkspan").mouseover(function() {$(this).css("color", "red");})
$("span.linkspan").mouseleave(function() {$(this).css("color", "blue");})
}, 100);
4. 模板下载编辑
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\超级链接颜色变化.cpt
点击下载模板:超级链接颜色变化.cpt