Question

我想知道如何将“blocksPanel”和“briquettesPanel”设置为可见或不可见？如果在下拉列表中选择“8：1 Compressed Blocks”，并且如果在下拉列表中选择“8：1 Compressed Briquettes”，则可以看到“briquettesPanel”，我希望“blocksPanel”可见。

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

  //Create horizontal product + other panel
  var productOtherPanel = app.createHorizontalPanel().setId('productOtherPanel')
  .setStyleAttribute('position','relative').setStyleAttribute('left','0%');

  //Create horizontal Product Panel  
  var productPanel = app.createHorizontalPanel().setId('productPanel').setStyleAttribute('position','relative')
  .setStyleAttribute('left','0%').setVisible(true);
  //Create listBox
  var productList = app.createListBox().setName("productList").setId('productList');
  //Add items to listBox
  productList.addItem("8:1 Compressed Blocks");
  productList.addItem("8:1 Compressed Briquettes");

  //Create horizontal Compressed Blocks panel
  var blocksPanel = app.createHorizontalPanel().setId('blocksPanel')
  .setStyleAttribute('position','relative').setStyleAttribute('left','0%').setVisible(true);
  //Create Compressed Blocks Size List
  var blocksSizeList = app.createListBox().setName('blocksSizeList').setId('blocksSizeList');
  //addItem fills the Compressed Blocks Size List
  blocksSizeList.addItem("5kg");
  blocksSizeList.addItem("20kg");

  //Create horizontal Briquettes panel
  var briquettesPanel = app.createHorizontalPanel().setId('briquettesPanel')
  .setStyleAttribute('position','relative').setStyleAttribute('left','0%').setVisible(true);
  //Create Briquettes Size List
  var briquettesSizeList = app.createListBox().setName('briquettesSizeList').setId('briquettesSizeList');
  //addItem fills the Briquettes Size List
  briquettesSizeList.addItem("250g");
  briquettesSizeList.addItem("650g");




  app.add(productOtherPanel);
  productOtherPanel.add(productPanel);
  productPanel.add(productList);

  productOtherPanel.add(blocksPanel);
  blocksPanel.add(blocksSizeList);

  productOtherPanel.add(briquettesPanel);
  briquettesPanel.add(briquettesSizeList);


  return app;
}

Answer 1

首先为产品列表创建服务器更改处理程序。

var handler = app.createServerHandler("panelHandler");
productList.addChangeHandler(handler);

然后按如下方式定义面板处理函数。 productList被传递到处理函数的'event'参数。

function panelHandler(event) {
  var app = UiApp.getActiveApplication();
  if (event.parameter.productList == "8:1 Compressed Blocks") {
    app.getElementById('blocksPanel').setVisible(true);
    app.getElementById('briquettesPanel').setVisible(false);
  }
  else if (event.parameter.productList == "8:1 Compressed Briquettes") {
    app.getElementById('blocksPanel').setVisible(false);
    app.getElementById('briquettesPanel').setVisible(true);
  }
  return app;
}

在开始时，您需要设置blocksPanel visible和briquettesPanel不可见以匹配产品列表的初始状态。

有关详细信息，请参阅Server Handler文档。

如何设置面板可见和不可见？

1 个答案: