Question

我试图找出如何创建一个函数，在选中时将“productInfoButton”的颜色变为绿色，未选中时将灰色变为灰色？有人可以帮忙吗？

function doGet(e) {
  var app = UiApp.createApplication();

  var productInfoButton = app.createButton("Products").setId('productInfoButton');

  var handlerL = app.createServerClickHandler('prodCompleteHandlerL');
  var productCompleteCheckBox = app.createCheckBox().setId("productCompleteCheckBox")
  .setName("productCompleteCheckBox");
  productCompleteCheckBox.addClickHandler(handlerL);
  handlerL.addCallbackElement(productInfoButton);

  app.add(productInfoButton);
  app.add(productCompleteCheckBox);

  return app;
}

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
  return app;
}

Answer 1

checkBox的状态在事件info参数中可用，使用窗口小部件的名称。在你的代码中它将是：

function prodCompleteHandlerL(e) {
  var app = UiApp.getActiveApplication();
if(e.parameter.productCompleteCheckBox == 'true'){
  app.getElementById('productInfoButton').setStyleAttribute('background', 'lime')
}else{
  app.getElementById('productInfoButton').setStyleAttribute('background', '#dddddd') // is light grey
}
  return app;
}

编辑：我没有注意到其他问题（抱歉）：CallbackElement应该包含productCompleteCheckBox ....因此您应该使用productCompleteCheckBox作为callBackElement在main函数中（或使用包含此wjidget的父窗口小部件（如果有的话））

EDIT2 ：关注您的评论： 您可以通过查找CSS documentation找到有关颜色和样式的文档，因为它是在这里使用的...或者您可以查看GUI构建器中可用的选项以获取灵感并查看在WYSWYG环境。使用GUI构建器可以完成的所有操作当然可以使用脚本完成（事实上，脚本功能更强大，但有一个想法很好。）

如果您想让小部件变得透明，只需使用.setStyleAttribute('background','transparent')

编辑3：获取按钮的“默认外观”：

从页面中检查代码我注意到它在缓存中使用了.png文件...因为我找不到使用复制文件的方法，将其放在公共文件夹中，获取网址并在风格中使用它...非常惊讶：它正在工作。（页面中找到的url似乎是特定于脚本的，我不知道是否可以在另一个脚本中使用它）

也许比我更聪明的人会找到一种更简单的方法来实现相同的目标，随时评论和/或建议; - ）

另外：我复制了所有参数，其中一些在这个用例中没用，我知道^^

  var btn = app.getElementById('btn').setStyleAttributes({ 
  'margin': '5px',
  'padding': '3px 5px',
  'text-decoration': 'none',
  'font-size': 'small',
  'cursor': 'pointer',
  'cursor': 'hand',
  'background': 'url("https://dl.dropbox.com/u/211279/hborder.png") repeat-x 0px -27px',
  'border': '1px outset #ccc'
  })

如何在Google应用脚本中使用checkBox小部件？

1 个答案: