0

我想弄清楚如何创建一个函数，在选中时将“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;
}
4

1 回答 1

1

复选框的状态在使用小部件名称的事件信息参数中可用。在您的代码中，它将是：

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.... 所以你应该在主函数中使用productCompleteCheckBoxas callBackElement（或者使用包含这个 wjidget 的父小部件（如果有的话））

EDIT2 : following your comment : You can find documentation on colors and styles by looking for CSS documentation since it is what is used here... or you can have a look at the options available in the GUI builder to get inspiration and to see what happens in a WYSWYG environment. Everything that can be done with the GUI builder can of course be done using script (in fact script is even more powerful but it's nice to have an idea).

If you want to get a widget transparent simply use .setStyleAttribute('background','transparent')

EDIT 3 : getting the 'default look' for buttons:

Examinig the code from a page I noticed that it uses a .png file in a cache... since I couldn't find a way to use that I copied the file, put it on a public folder, get the url and used it in the style... quite a surprise : it's working. (the url found in the page seems to be specific to the script, I don't know if I could use it in another script)

Maybe someone smarter than me will find a more easy way to achieve the same goal, feel free to comment and/or suggest ;-)

Also : I copied all the parameters, some of them are useless in this use case, I know ^^

  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'
  })
于 2012-12-23T08:29:16.930 回答