【发布时间】:2014-06-17 16:26:13
【问题描述】:
我知道如何使用 createAnchor 在面板中放置链接,但是我想从按钮启动链接。这可能吗,如果可以,怎么办?
【问题讨论】:
我知道如何使用 createAnchor 在面板中放置链接,但是我想从按钮启动链接。这可能吗,如果可以,怎么办?
【问题讨论】:
经过一些尝试和错误,我找到了实现目标的更简单方法。 我只是创建一个按钮的图像,显示我想要的文本,并使用锚的这些 setAttribute 方法。 不幸的是,我仍然需要一个 AbsolutePanel。
function doGet()
{
// Problem with Google Apps :
// Not possible to click a Button and show a site
// Solutions found on StackOverflow mostly use :
// a) var panel = createAbsolutePanel --> Necessary to create an Absolute Panel
// b) var image = createImage --> The image to be shown
// c) var anchor = createAnchor --> Anchor making it possible to activate a url
// d) position the anchor on top of the image
// e) make anchor and image of same size
// f) make anchor invisible (by zIndex, opacity or visibility)
//
// One of the people showing how this works is http://stackoverflow.com/users/1368381/serge-insas who's
// efforts inspired me to have a look at other possibilities. (thanks !)
//
// Result : next step in making it easy to overcome a limitation of GAS --> no createImage required anymore
// How : using setAttribute('backgroundImage', Url) method of anchor
// Limitation : still required to create an Absolute panel instead of a Vertical panel --> who's next to improve ??
//
// Author : SoftwareTester, may 13th, 2014
var app = UiApp.createApplication().setTitle("Image Anchor");
var picButton = 'https://drive.google.com/uc?id=0BxjtiwHnjnkrTVJiR1g2SlZTLVE'; // Can on be accessed be a few people
var widthButton = 128;
var heightButton = 24;
var anchor = app.createAnchor("", "http://www.opasittardgeleen.nl")
.setHeight(heightButton).setWidth(widthButton)
// .setHeight("150").setWidth("128") // Nice effect !!
// .setHeight("150").setWidth("512") // Even more
.setStyleAttribute('backgroundImage', 'url(' + picButton + ')');
var panel = app.createAbsolutePanel().setWidth('50%').setHeight('50%');
panel.add(anchor,100,50); // I would like to avoid positioning like this and just add the anchor to a Grid or VerticalPanel
app.add(panel);
return app.close();
}
【讨论】:
我已经回答了一个类似的帖子,其中有一个很好的解决方法,尽管我承认它的作用有点复杂......
这里是a test app
从另一篇文章中复制的代码如下:我使用了一个不可见的锚点叠加到图像上,但它当然可以是其他任何东西......一个按钮或任何你想要的东西。
function doGet(){
var app = UiApp.createApplication().setStyleAttribute("background", "#CCCCFF").setTitle('Anchor Test')
var top = '100PX';// define dimensions and position
var left = '100PX';
var width = '80PX';
var height = '80PX';
var mainPanel = app.createVerticalPanel();
var customAnchor = app.createHorizontalPanel().setId('usethisId')
addStyle(customAnchor,top,left,width,height,'1','1')
var image = app.createImage("https://dl.dropbox.com/u/211279/Time-change-clock_animated_TR80.gif")
addStyle(image,top,left,width,height,'1','1')
var realAnchor = app.createAnchor('This is the Anchor', 'https://sites.google.com/site/appsscriptexperiments/home')
addStyle(realAnchor,top,left,width,height,'2','0')
customAnchor.add(realAnchor);
customAnchor.add(image)
mainPanel.add(customAnchor);
app.add(mainPanel);
return app;
}
function addStyle(widget,top,left,width,height,z,visibility){
widget.setStyleAttributes(
{'position': 'fixed',
'top' : top,
'left' : left,
'width' : width,
'height':height,
'opacity' : visibility,
'zIndex' : z});
}
编辑:我忘了用按钮示例提及这篇文章...正是您想要的:How do I open a web browser using google apps script?
按照Software tester 的回答,这是一个紧凑的版本,可以放置在网格或其他任何地方...只需放置名为“容器”的小部件。
为了说明,我在下面的示例中将其放置在网格中/
代码:
function doGet(){
var app = UiApp.createApplication().setTitle("Image Anchor");
var picButton = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif';
var img = app.createImage(picButton).setPixelSize(25,25);
var grid = app.createGrid(5,2);
for(n=0;n<5;n++){
grid.setText(n,0,'some text').setBorderWidth(1);
}
var anchor = app.createAnchor(" - ", "https://sites.google.com/site/appsscriptexperiments/").setStyleAttribute('opacity','0').setPixelSize(25,25);
var container = app.createAbsolutePanel().setPixelSize(25,25);
container.add(img,0,0).add(anchor,0,0);
grid.setWidget(4,1,container);
app.add(grid);
return app;
}
【讨论】:
Serge Insas 的回答 EDIT 2 使用网格提供了额外的灵活性。
通过学习和利用彼此的好想法来一点一点地改善世界,当然也适用于软件。再次感谢 Serge!
我注意到在某些情况下可能会或可能不会感兴趣的一些差异。
我总是尝试指定常量(如width 和height)并使用.setPixelSize(width, height) 等类似代码最小化,从而更容易“在更改时不要忘记某些东西”。这就是为什么我更愿意避免创建单独的图像对象。
Serge Insas 使用 .setStyleAttribute('opacity','0'); 而我使用 .setStyleAttribute('backgroundImage', url); 。我不知道这两种可能性的优缺点是什么。
下面是通用代码
function doGet()
{ // Generalized version using : image + opacity + container
var app = UiApp.createApplication().setTitle("Image Anchor");
var width = 25;
var height = 25;
var urlImage = 'https://dl.dropboxusercontent.com/u/211279/ProgressSpinner.gif';
var urlAnchor = "https://sites.google.com/site/appsscriptexperiments/";
var grid = createImageAnchor(urlImage, urlAnchor, width, height);
app.add(grid);
return app;
}
而函数createImageAnchor可以是
function createImageAnchor(urlImage, urlAnchor, width, height)
{ // Using backgroundImage
var app = UiApp.getActiveApplication();
var anchor = app.createAnchor("", urlAnchor).setPixelSize(width, height)
.setStyleAttribute('backgroundImage', 'url(' + urlImage + ')');
var panel = app.createAbsolutePanel().setPixelSize(width, height).add(anchor, 0, 0);
var grid = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put anchor in it
return grid;
}
或
function createImageAnchor(urlImage, urlAnchor, width, height)
{ // Using opacity
var = UiApp.getActiveApplication();
var image = app.createImage(urlImage).setPixelSize(width, height);
var anchor = app.createAnchor("", urlAnchor) .setPixelSize(width, height)
.setStyleAttribute('opacity','0');
var panel = app.createAbsolutePanel().setPixelSize(width, height)
.add(image, 0, 0).add(anchor, 0, 0); // Same position for image and anchor
var grid = app.createGrid(1, 1).setWidget(0, 0, panel); // Create grid and put image + anchor in it
return grid;
}
使用createImageAnchor 可以更轻松地在代码中的任何位置使用此“组合对象”,尤其是在将其添加到库之后。
由于我是 GAS 新手(在 5 年不活动后于 5 月 7 日开始),我知道我需要学习很多东西,并且想知道不同方法的优缺点是什么。
【讨论】: