如何让谷歌UI服务PopupPanel作品(How to make the Google UI Se

2019-07-04 07:07发布

我建设使用谷歌Apps脚本的应用程序。 不过,我想使用弹出面板弹出我的应用程序中的面板之一。 我试图寻找,但我没有发现任何例如如何使这个弹出面板正常工作。

有没有人有这个想法如何使这项工作?

我正在试图做的是垂直面板创建服务的列表中,当用户点击该链接服务的一个,然后它会弹出使用与模态法的弹出面板功能面板。 因此,用户可以编辑在弹出的面板中的服务细节。 之后,用户更新服务,则弹出面板将关闭,并返回到其包含的服务列表面板。

谢谢

Answer 1:

目前,弹出面板不能正常工作,但是你可以让这可以使得在使用客户端处理或服务器处理不同事件弹出自己的自定义面板。

这是一个粗略的代码,它会显示您触发使用客户端处理click事件的弹出演示。

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

  app.add(createMaskPanel_());//this is used to make poup panel modal

  var mainPanel = app.createVerticalPanel();
  app.add(mainPanel);
  var btn = app.createButton('Open poup');
  mainPanel.add(btn);

  //Makke a panel for poup and add your popup elements
  var popup = app.createVerticalPanel().setId('popup').setVisible(false)
  .setStyleAttributes(
    {'position': 'fixed', 
     'border' : '1px solid black',
     'top' : '40%',
     'left' : '43%',
     'width' : '150', 
     'height':'150',
     'zIndex' : '2'});
  popup.add(app.createTextBox());
  popup.add(app.createButton('Close').addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(false)));
  app.add(popup);


  btn.addClickHandler(app.createClientHandler().forTargets([app.getElementById('mask'), popup]).setVisible(true));

  return app;
}

function createMaskPanel_(){ //Called when the setting UI loads, initially it will be invisble. id needs to be made visible
  //by accessing its id "mask"
  var app = UiApp.getActiveApplication();
  var mask = app.createVerticalPanel().setId('mask').setSize('100%', '100%') //maskPanel to mask the ui
  .setStyleAttributes({
    'backgroundColor' : '#f4f4f4',
    'position' : 'fixed',
    'top' : '0',
    'left' : '0',
    'zIndex' : '1',
    'opacity' : '0.5'}).setVisible(false);
  //Added a dummy element so that it spans to whole window.
  //don't know why but it works
  mask.add(app.createLabel('SBC Technology')
           .setStyleAttribute('color', '#f4f4f4')
           .setStyleAttribute('opacity', '0.5')); 
  return mask;
}


文章来源: How to make the Google UI Services PopupPanel works