历史版本4 :超级链接改变颜色 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

在使用超级链接的时候,希望实现鼠标移至超级链接,该超级链接就改变字体颜色,以便区分当前选中的是哪个超级链接,提升用户体验,如下图所示:

2. 实现思路编辑

当模板加载完成之后,我们给它添加一个加载结束事件,用jQuery在事件中获取到超级链接单元格对象,然后添加鼠标滑过事件,鼠标放到该对象上的时候就改变字体颜色,离开时就恢复原来的颜色。

3. 实现步骤编辑

我们以模板%FR_HOME%\WebReport\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\HyperLink5.cpt为例,实现当鼠标移至超级链接的时候改变颜色。
3.1 添加加载结束后事件
打开模板,点击模板>模板web属性>分页预览设置,设置为为该模板单独设置,在下方添加一个加载结束后事件,如下图:
添加加载结束事件之后,在js输入框中输入如下所示语句:
$("span.linkspan td").bind("mouseover",function(){       $(this).css("color","red");       }).bind("mouseleave",function(){               $(this).css("color","blue");       })  
其中,$("span.linkspan td")是获取超级链接单元格;如果只有一行的话,获取超级链接单元格为$("span.linkspan")
3.2 效果查看
点击分页预览,将鼠标移至超级链接上的时候就能实现如上图所示的效果。
在线查看模板效果请点击HyperLink11cpt

模板保存在%FR_HOME%\WebReport\WEB-INF\reportlets\doc\SpecialSubject\HyplinkReport\HyperLink11cpt