Question

我正在尝试使用DialogBox创建一个'Are You Sure'类型对话框。因此，当有人点击按钮时，弹出窗口会显示“是/否”按钮，以便用户确认他们希望继续操作。

我已经想出了大部分内容，但是我无法弄清楚如何在不回调服务器处理程序的情况下进行展示。

我尝试将show（）命令与Client Handler一起使用，但它不起作用。我也尝试过使用setVisibility（），但也无法使用它。

我不想只是为了显示对话框而出于明显的用户体验原因进行往返。

有人有任何建议吗？

提前致谢克里斯

Answer 1

这是我为此创建的一个小片段。但它使用服务器处理程序...

function MsgBox(message, title, id, buttons, handler, modal, autoHide){
  this.message=message;
  this.title=title;
  this.id=id;
  this.buttons=buttons;
  this.handler=handler;
  this.modal=(modal)?true:false;//Default is false
  this.autoHide=(autoHide)?new Boolean(autoHide):true;//Default is true

  this.position={};
  this.position.top=100;
  this.position.left=550;
  this.position.width=400;

  this.button={};
  this.button.ok={name:"Ok",id:"OK_BTN"};
  this.button.yes={name:"Yes",id:"YES_BTN"};
  this.button.no={name:"No",id:"NO_BTN"};
  this.button.cancel={name:"Cancel",id:"CANCEL_BTN"};
  this.button.retry={name:"Retry",id:"RETRY_BTN"};

  this.addButton=function(btn){
    try{
      if(this.buttons==undefined){this.buttons=[];}
      if(typeof btn=="string"){btn=this.button[btn.toLowerCase()];}//If a string, convert to the intended object
      if(btn.name==undefined){return this;}//Check if we've actualy got one of the buttons by checking one of it's properties. Exit if not.
      this.buttons.push(btn);
    }catch(err){
      Logger.log(err.message);
    }
    return this;
  };

  this.show=function(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(this.buttons==undefined){this.buttons=[this.button.ok];}//The default is one 'Ok' button
    var dialog=app.createDialogBox(true,true).setId(this.id).setText(this.title);
    dialog.setPopupPosition(this.position.left,this.position.top);
    dialog.setGlassEnabled(this.modal);
    dialog.setAutoHideEnabled(this.autoHide);
    var basePanel=app.createVerticalPanel().setWidth(this.position.width+"");
    basePanel.add(app.createLabel(this.message).setWordWrap(true).setStyleAttribute("padding", "10px"));//Add message
    var buttonPanel=app.createHorizontalPanel().setId("ButtonPanel");
    basePanel.add(buttonPanel.setStyleAttribute("display", "block").setStyleAttribute("margin-left", "auto").setStyleAttribute("margin-right", "auto"));
    var btnHandler=app.createServerHandler("msgBox_close").addCallbackElement(buttonPanel);
    for(var i=0;i<this.buttons.length;i++){
      var btn=app.createButton(this.buttons[i].name, btnHandler).setId(this.buttons[i].id).setTag(this.id);
      if(this.handler!=undefined){btn.addClickHandler(this.handler);}
      buttonPanel.add(btn);
    }
    dialog.add(basePanel).show();
    return app;
  };
}

function msgBox_close(e, app){
  if(app==undefined){app=UiApp.getActiveApplication();}
  var dialogId=e.parameter[e.parameter.source+"_tag"];  
  app.getElementById(dialogId).hide();
  return app;
}

以下是如何使用它的一个小例子。

var msgBox=new MsgBox("Testing 123...", "This is a test", "MyMsgBox");
msgBox.show(e, app);

通过使用'_tag'参数引用自己的ID，可以轻松实现干净的往返。

您可以通过调用.addButton（）函数添加标准按钮。例如：

msgBox.addButton("yes").addButton("no");

通过传递自己的处理程序，您可以调用自己的函数。例如：

function myOwnHandler(e, app){
    if(app==undefined){app=UiApp.getActiveApplication();}
    if(e.parameter.source.indexOf("YES_BTN")!=-1){

    }
    return app;
}

来自clienthandler的Google Apps Script DialogBox

1 个答案: