「参数界面JS实例」JS实现对控件点击显示或悬浮显示自定义内容

1. 概述
1.1 预期效果

在实际场景中，当我们将鼠标移动到相应单元格时，会弹出 单元格内容提示 。参数面板中，若想实现点击参数面板上控件或鼠标悬浮过控件时，也能显示自定义内容，要如何做呢？效果如下图所示：

1.2 实现思路

1）通过 JS 给页面增加一个 div 元素，在这个 div 元素中写入内容，css 控制内容的样式。

2）添加点击事件或鼠标移入移出事件来显示 div 元素或者移除 div 元素。

其中，提示内容的位置：获取目标控件的位置 (x,y)，再进行一定的像素偏移。

注：本文以文本框控件示例提供思路，其他控件以及 frm 模板，可参考本文方法，自行尝试实现。

2. 示例

2.1 模板准备

新建模板，在「参数面板」中添加文本框控件 label0、label1，填写 label0 控件值为「点击显示」，label1 控件值为「悬浮显示」。如下图所示：

注：label 控件必须填写控件值，和后续添加的 JS 配合使用，否则无法实现预期效果。

2.2 添加 JS 事件

1）点击「参数面板」，在「事件」处，为参数面板添加一个「初始化后」事件，实现鼠标点击文本控件 label0 时，显示自定义内容。如下图所示：

JavaScript 代码如下：

注：JS 中，"dadfafasfsalakj<br />kalfasjdkfsafkjasfas" 为提示内容，格式通过 CSS 修改，见代码注释，请根据需要修改使用。

1. setTimeout(function(){
   
2. 
   
3. $("[widgetname='LABEL0']").click(function(e){
   
4. var x = 10;
   
5. var y = 20;
   
6. //设置自定义内容，内容格式可以自行设置，如给添加换行、空格、表格，设置框架等
   
7. var z = "dadfafasfsalakj<br />kalfasjdkfsafkjasfas"
   
8. //每次点击控件前删除上次点击出现的内容,防止多次点击内容叠加，导致页面出错
   
9. $("#preview").remove();
   
10. $("body").append("<div id='preview'>"+z+"</div>");//弹出一个div放置内容
    
11. //修改div的样式，可以根据需要，设置内边距，背景，边框，圆角，字号，字体，字色等样式
    
12. $("#preview")
    
13. .css("position","absolute")
    
14. .css("z-index","9999999")
    
15. .css("left",(e.pageX + x + 'px')) //调整div出现的水平方向位置
    
16. .css("top",(e.pageY - y + 'px'))  //调整div出现的垂直方向位置
    
17. .css("padding","4px")
    
18. .css("border","1px solid pink")
    
19. .css("border-radius","4px")
    
20. .css("background-color","skyblue")
    
21. .css("font-size","14px")
    
22. .css("font-famliy","微软雅黑")
    
23. .css("color","blue")
    
24. e.stopPropagation(); //阻止冒泡事件
    
25. });
    
26. 
    
27. //点击body其他部移除元素div，防止点击其他部位，出现自定义提示
    
28. $("body").click(function(e){
    
29. $("#preview").remove();
    
30. })
    
31. 
    
32. },100);

复制代码

2）同样方法为「参数面板」再添加一个「初始化后」事件，实现鼠标悬浮过文本控件 label1 时，显示自定义内容。

JavaScript 代码如下：

注：JS 中，"dadfafasfsalakj<br />kalfasjdkfsafkjasfas" 为提示内容，格式通过 CSS 修改，见代码注释，请根据需要修改使用。

1. setTimeout(function(){
   
2. 
   
3. $("[widgetname='LABEL1']").mouseover(function(e){
   
4. var x = 10;
   
5. var y = 20;
   
6. //设置自定义内容，内容格式可以自行设置，如给添加换行、空格、表格，设置框架等
   
7. var z = "1.dadfafasfsalakj<br />2.kalfasjdkfsafkjasfas"
   
8. //每次点击控件前删除上次点击出现的内容,防止多次点击内容叠加，导致页面出错
   
9. $("body").append("<div id='preview1'>"+z+"</div>");
   
10. //修改div的样式，可以根据需要，设置内边距，背景，边框，圆角，字号，字体，字色等样式
    
11. $("#preview1")
    
12. .css("position","absolute")
    
13. .css("z-index","9999999")
    
14. .css("left",(e.pageX + x + 'px')) //调整div出现的水平方向位置
    
15. .css("top",(e.pageY - y + 'px'))  //调整div出现的垂直方向位置
    
16. .css("padding","4px")
    
17. .css("border","1px solid pink")
    
18. .css("border-radius","4px")
    
19. .css("background-color","skyblue")
    
20. .css("font-size","14px")
    
21. .css("font-famliy","微软雅黑")
    
22. .css("color","blue")
    
23. 
    
24. });
    
25. //鼠标离开，移除div
    
26. $("[widgetname='LABEL1']").mouseout(function(e){
    
27. $("#preview1").remove();
    
28. });
    
29. },100)

复制代码

2.3 效果预览

保存模板，点击「分页预览」，效果如 1.1 节预期效果所示。

注：此方法不支持移动端。

3. 模板下载

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\参数界面JS实例\JS实现鼠标点击或悬浮过控件时显示自定义内容.cpt

模板见附件

收藏了。