0

我一直在尝试将带有超链接的图像放入谷歌应用脚​​本 ui 中。我首先想到的是使用 createAnchor()，但它只允许文本。然后我想到了使用一个按钮，但据我所知，你不能打开一个新的选项卡/窗口并在回调函数中重定向。

我也尝试过 createHTML()，但该元素尚未由它处理。

我见过人们在图像上覆盖透明按钮，但在回调中仍然存在同样的问题。

我的研究还没有找到答案。有没有人有任何解决方案/例子？

谢谢

4

7 回答 7

1

您是否尝试过覆盖图像的透明锚？

function doGet() {
var app = UiApp.createApplication().setTitle("Image Anchor");
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
var image = app.createImage().setUrl("https://lh6.googleusercontent.com/-v0Q3gPQz03Q/T_y5gcVw7LI/AAAAAAAAAF8/ol9uup7Xm2g/s512/GooglePlus-512-Red.png").setStyleAttribute("width", "28px").setStyleAttribute("height", "28px");
var anchor = app.createAnchor("?", "https://plus.google.com/u/1/116085534841818923812/posts").setHeight("28px").setWidth("28px").setStyleAttribute("opacity", "0.1").setTarget("blank");
panel.add(image,100,50);
panel.add(anchor,100,50);
app.add(panel);  
return app.close();
}
于 2012-11-17T02:19:23.943 回答
1

app.createAbsolutePanel() .add(app.createImage(' https://www.google.com/images/logos/google_logo_41.png ')) .add(app.createAnchor('',' https://www. google.co.uk/intl/en/about/ ') .setStyleAttributes({position:'absolute',top:'0px',left:'0px',width:'201px',height:'47px',opacity: '0'}))

这是一个经过测试的。它工作正常。它不适用于定位图像（作为“绝对”）。它不适用于 .setHorizo​​ntalAlignment(UiApp.Horizo​​ntalAlignment.CENTER)

于 2013-04-21T11:47:57.063 回答
1

这在 Chrome20 和 IE9 上对我有用

      // Container for box and results
      var imageContainer = app.createFlexTable();


      // Setup the button
      var button = app.createButton("ImageButton");
      button.setStyleAttribute("background", "url(dontshowimagehere.JPG) no-repeat");
      button.setStyleAttribute("position", "absolute");
      button.setStyleAttribute("color", "transparent");
      button.setStyleAttribute('zIndex','1');
      button.setStyleAttribute("border", "0px solid black");



      imageContainer.setWidget(0, 0, button);

      // image to click
      var image = app.createImage("image.jpg").setId(imageId);

      imageContainer.setWidget(1,0, image);

图像有轻微的 (3px) 偏移。如果重要的话，这看起来可以修复它http://www.w3schools.com/css/css_positioning.asp（使用相对的弹性表和顶部等的图像和按钮）

于 2012-07-09T03:28:34.340 回答
0

我设法用一个 Anchor 对象并使用 CSS3 来做到这一点。它适用于 Chrome，我没有在其他浏览器中测试它。

gui.createAnchor("", false, "$DESTINATION_URL$")
   .setStyleAttributes({ "display":"block",
                         "width":"$IMAGE_WIDTH_IN_PIXEL$",
                         "height":"$IMAGE_HEIGHT_IN_PIXEL$",
                         "background":"url($URL_OF_THE_IMAGE$)",
                         "background-size":"100% 100%",
                         "background-repeat":"no-repeat" })

当然，您必须用您的数据替换 $......$。

蒂埃里

于 2014-06-18T10:42:35.290 回答
0

我不相信这对于可用的小部件是可能的。我建议更改您的 UI 设计以改用 Anchor 小部件。

于 2012-05-30T17:05:30.267 回答
0

如果您直接在页面上编码，请使用 HTML Box。单击“编辑”以编辑您的页面，然后转到菜单中的“插入>HTML 框”。它也将接受javascript！有一些注意事项 - 使用 javascript 时，HTML Box 将不接受链接......太糟糕了，但是那里有太多的漏洞利用。

如果您在应用程序脚本中编码，您可以尝试将图像放在面板上并使用绝对面板并将链接放置在图像上。另一种方法是使用 .setStyleAttribute 进行 CSS 样式设置，并利用 zIndex 参数将面板放置在图像顶部......就像这样：

var panel = app.createSimplePanel();
// add your image to the simple panel or whatever panel you wish to choose in your GUI

var popPanel = app.createSimplePanel()
  .setStyleAttribute('top','Y')
  .setStyleAttribute('left','X')
  .setStyleAttribute('zIndex','1')
  .setStyleAttribute('position','fixed');
// add your anchor to the popPanel

app.add(panel).add(popPanel);

不是 100% 确定是否可以使此面板透明，但您可以尝试类似： .setStyleAttribute('background',transparent') 或通过以下方式更改不透明度： .setStyleAttribute('opacity','.5')

希望这能给你一些想法！

于 2012-05-31T02:52:41.477 回答
-1

如果您首先在字符串中创建所有 HTML，然后可以将页面的内容替换为您想要的 HTML，如下所示：

var myString = 'the html you want to add, for example you image link and button';
var page = SitesApp.getSite('example.com', 'mysite').getChildByName('targetpage');
var upage = page.setHtmlContent('<div>' + myString + '</div>');
于 2012-05-29T09:57:49.977 回答