0

我正在通过代码构建一个 UI 表单（不使用 UI Builder），我注意到 SubmitButton 类的样式与 Button 类的外观不一致。您是否知道任何方法来调整 Button 类或 SubmitButton 类的外观以使它们相似。

我注意到 Button 有一个调用 setStylePrimaryName、setStyleName 等......但文档含糊不清 - 说：“这对调试很有用”！！！

有什么建议吗？

请参见下面的屏幕截图，第一个按钮是 Button 类，第二个按钮是 SubmitButton。你可以看到他们甚至没有对齐。

屏幕截图

4

2 回答 2

1

您可以按照您想要的方式设置（按钮）setStyleAttribute 

var _btn= {
    "background-color":"none",
    "background":"none",
    "width":"80px",
    "height":"24px",
    "border":"None",
    "font-family":"hobo std",
    "font-size":"0.9em",
    "color":"3f3f3f",
    "opacity":"1",
}
....
....
  var closeb = app.createButton("Submit");
  library.applyCSS(submit,_btn);
....
....

在你的图书馆里你有这个功能（詹姆斯费雷拉的学分）

function applyCSS(element, style){
  for (var key in style){
    element.setStyleAttribute(key, style[key]); 
  }  
}
于 2012-12-11T17:35:06.157 回答
0

我通过在同一个表单中使用多个提交按钮解决了这个外观难题。我尝试了 CSS sans 的成功；提交和重置按钮是按钮小部件世界中的两个独特的野兽。 这是一些工作代码 ，演示了一个多页表单，其中每个页面使用三个submitButton's来来回移动执行多个doPost()'s.

// Muliple page form using Google Apps Script

function doGet(eventInfo)  {return GUI(eventInfo)};
function doPost(eventInfo) {return GUI(eventInfo)};

function GUI (eventInfo) {
  var n = (eventInfo.parameter.state == void(0) ? 0 : parseInt(eventInfo.parameter.state));
  var ui = ((n == 0)? UiApp.createApplication() : UiApp.getActiveApplication());
  var Form;
  switch(n){
    case 0: {
      Form = getForm(eventInfo,n); // Use identical forms for demo purpose only
    } break;
    case 1: {
      Form = getForm(eventInfo,n); // In reality, each form would differ but...
    } break;
    default: {
      Form = getForm(eventInfo,n) // each form must abide by (implement) the hidden state variable
    } break;
  }
  return ui.add(Form);
};

function getForm(eventInfo,n) {
  var ui = UiApp.getActiveApplication();

  // Increment the ID stored in a hidden text-box
  var state = ui.createTextBox().setId('state').setName('state').setValue(1+n).setVisible(true).setEnabled(false);
  var H1 = ui.createHTML("<H1>Form "+n+"</H1>");
  var H2 = ui.createHTML(
    "<h2>"+(eventInfo.parameter.formId==void(0)?"":"Created by submission of form "+eventInfo.parameter.formId)+"</h2>");

  // Add three submit buttons to go forward, backward and to validate the form
  var Next = ui.createSubmitButton("Next").setEnabled(true).setVisible(true);
  var Back = ui.createSubmitButton("Back").setEnabled(n>1).setVisible(true);
  var Validate = ui.createSubmitButton("Validate").setEnabled(n>0).setVisible(true);
  var Buttons = ui.createHorizontalPanel().add(Back).add(Validate).add(Next);
  var Body = ui.createVerticalPanel().add(H1).add(H2).add(state).add(Buttons).add(getParameters(eventInfo));
  var Form = ui.createFormPanel().setId((n>0?'doPost[':'doGet[')+n+']').add(Body);

  // Add client handlers using setText() to adjust state prior to form submission
  // NB: Use of the .setValue(val) and .setValue(val,bool) methods give runtime errors!
  var onClickValidateHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)));
  var onClickBackHandler = ui.createClientHandler().forTargets(state).setText(''+(parseInt(n)-1));
  Validate.addClickHandler(onClickValidateHandler);
  Back.addClickHandler(onClickBackHandler);

  // Add a client handler executed prior to form submission
  var onFormSubmit = ui.createClientHandler()
  .forTargets(state).setEnabled(true) // Enable so value gets included in post parameters
  .forTargets(Body).setStyleAttribute("backgroundColor","#EEE");    
  Form.addSubmitHandler(onFormSubmit);

  return Form;
}

function getParameters(eventInfo) {
  var ui = UiApp.getActiveApplication();
  var panel = ui.createVerticalPanel().add(ui.createLabel("Parameters: "));
  for( p in eventInfo.parameter)
    panel.add(ui.createLabel(" - " + p + " = " + eventInfo.parameter[p]));
  return panel;
}

该代码使用单个“隐藏”状态（此处以 a 可视化TextBox）和多个SubmitButton's 来允许用户在表单序列中前进和后退，以及验证表单的内容。两个额外SubmitButton的 ' 使用ClientHandler' 重新连接，在表单提交之前简单地修改隐藏状态。

笔记

  • 请注意.setText(value)在客户端处理程序中使用该方法。使用 Chrome 浏览器，如果我切换到TextBox's.setValue(value)或.setValue(value, fireEvents)方法中的任何一个，我会收到奇怪的运行时错误。

  • Script Property我尝试（未成功）使用 a而不是隐藏的 TextBox来实现此逻辑。这需要使用服务器处理程序而不是客户端处理程序。行为不稳定，向我暗示异步服务器端事件是在表单提交事件之后发生的。

于 2014-08-10T02:39:48.907 回答