0

Jame Ferreira の Google Script: Enterprise Application Essentials を使用して、製品ページ (第 5 章) を作成しています。製品のサムネイルをすべてページに表示するアプリを作成し、ユーザーがマウスオーバーするとポップアップする詳細情報パネルを作成しました。このスタイリングを実現するために CSS を使用しています。

情報パネルを配置するときに問題が発生します。関連付けられているサムネイルに関連付けられるのではなく、1 つの場所にのみポップアップ表示されます。

情報パネルに関連するコードは次のとおりです。問題は最後の数行の配置にあると思いますが、考えられることはすべて試しました：

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;
}
4

1 に答える 1

0

e.parameter.xinfoPanel を配置できるものを使用して、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
于 2012-09-21T19:02:35.667 に答える