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

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

放置浮动信息面板

1 个答案: