放置浮动信息面板

Question

我正在使用 Jame Ferreira 的 Google Script：Enterprise Application Essentials 创建产品页面（第 5 章）。我创建了在页面上显示所有产品缩略图的应用程序，然后在用户将鼠标悬停时弹出带有更多详细信息的信息面板。它使用 CSS 来实现这种样式。

放置信息面板时出现问题。它仅在一个位置弹出，而不是绑定到与其关联的缩略图。

这是与信息面板相关的代码。我相信问题存在于最后几行的位置，但已经尝试了我能想到的一切：

function onInfo(e){
var app = UiApp.getActiveApplication();
var id = e.parameter.source;
for (var i in productDetails){
if(productDetails[i].id == id){
var r = 50;
var c = 0;
var infoPanel = app.createVerticalPanel().setSize('300px', '300px');
var horzPanel = app.createHorizontalPanel();
var image = app.createImage(productDetails[i].imageUrl).setHeight('100px');
var title = app.createLabel(productDetails[i].title);
horzPanel.add(image);
horzPanel.add(title);
var description = app.createLabel(productDetails[i].description);


infoPanel.add(horzPanel);
infoPanel.add(description);
applyCSS(infoPanel, _infoPanel);
applyCSS(image, _infoImage);
applyCSS(horzPanel, _infoBoxSeparator);
applyCSS(title, _infoTitle);
applyCSS(description, _infoDescription);

app.getElementById('infoGrid').setVisible(true)
.setWidget(0,0, infoPanel);
break;

}
c++
if (c == 3){
c = 0;
r = r+250;
}
switch (c)
{
case 0:
c=250;
break;
case 1:
c=500;
break;
case 2:
c=250;
break;
}
}

var _infoLocation =
{
"top":r+"px",
"left":c+"px",}

applyCSS(infoPanel, _infoLocation);

return app;
}

Answer 1

您可以使用e.parameter.x 和e.parameter.y 获取鼠标的位置，据此您可以定位信息面板

infoPanel.setStyleAttribute('top',e.parameter.y)
    .setStyleAttribute('left',e.parameter.x).setStyleAttribute('zIndex','1')
    .setStyleAttribute('position','fixed');

您可以根据需要在鼠标的 x 和 y 位置添加一些偏移来显示它。

你在处理函数中得到的位置相关参数是

e.parameter.x
e.parameter.y

e.parameter.clientX
e.parameter.clientY

e.parameter.screenX
e.parameter.screenY