我如何使用HtmlService创建进度微调器？ [英] How can I create a progress spinner using HtmlService?

问题描述

在scriptUi中，我可以按照这些说明为长时间等待创建一个简单的进度微调器： https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators

我现在使用HtmlService创建用户界面，而且我也没有看到像以前那样设置微调器。

解决方案

我找到了一个方法。诀窍是调用一个内部函数，它既启动微调器又运行其他函数。

html

 <脚本> 
函数onSuccess（）{
 var div = document.getElementById（'result'）; 
 div.innerHTML ='< div> Sucess！< / div>'; 
} 
 
 function onFailure（）{
 var div = document.getElementById（'result'）; 
 div.innerHTML ='< div>失败！< / div>'; 
 
函数clickAction（）{
 var div = document.getElementById（'result'）; 
 div.innerHTML ='< div>正在复制...< br>< img src =https://c4a54d10381f750e81dcc323aed21e2c95725815.googledrive.com/host/0Bwyqwd2fAHMMallsNkNOV0RfcTg/wait_progress.gif>< / div>'; 
 google.script.run 
 .withSuccessHandler（onSuccess）
 .withFailureHandler（onFailure）
 .testSpinner（）; 
} 
 
< / script> 
 
< button class =actiononclick =clickAction（）>复制和LT; /按钮> 
< button onclick =google.script.host.close（）>关闭< /按钮> 
< div id ='result'>< / div> 
  

gs档案

  function testSpinner（）{
 SpreadsheetApp.getActiveSpreadsheet（）。toast（Copying ...，， -  1）; 
 Utilities.sleep（5000）; 
 SpreadsheetApp.getActiveSpreadsheet（）。toast（完成。）; 
} 
  

In scriptUi I was able to follow these instructions to create a simple progress spinner for long waits: https://sites.google.com/site/scriptsexamples/learn-by-example/uiapp-examples-code-snippets/progress-indicators

I am now using HtmlService to create the Ui and I don't see how I can set up the spinner as I did before.

解决方案

I found a method. The trick was to call an internal function that both starts the spinner and runs the other function.

html

<script>
  function onSuccess() {
    var div = document.getElementById('result');
    div.innerHTML = '<div>Sucess!</div>';
  }

    function onFailure() {
    var div = document.getElementById('result');
    div.innerHTML = '<div>Fail!</div>';
  }
  function clickAction(){
    var div = document.getElementById('result');
    div.innerHTML = '<div> Copying...<br><img src="https://c4a54d10381f750e81dcc323aed21e2c95725815.googledrive.com/host/0Bwyqwd2fAHMMallsNkNOV0RfcTg/wait_progress.gif"></div>';
  google.script.run
  .withSuccessHandler(onSuccess)
  .withFailureHandler(onFailure)
  .testSpinner();
  }

</script>

<button class="action" onclick="clickAction()"> Copy</button>
<button onclick="google.script.host.close()"> Close</button>
<div id='result'></div>

gs file

function testSpinner(){
 SpreadsheetApp.getActiveSpreadsheet().toast("Copying...","",-1);
  Utilities.sleep(5000);
 SpreadsheetApp.getActiveSpreadsheet().toast("Done.");
}

这篇关于我如何使用HtmlService创建进度微调器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！