我需要一些关于如何使某些按钮工作的说明。
我在 HTML 文件上创建了一个侧边栏,该侧边栏从 Google Apps 上的电子表格内的按钮调用。这是函数:
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
这是我的 Sidebar.html 文件:
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize-icons.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<!--WELCOME CARD-->
<body style="background-color:#424242">
<div class="card grey darken-2" style="top:3px">
<div class="card-content white-text">
<span class="card-title" style="font-size:20px;font-weight:bold;color:#80cbc4">MANAGER</span>
<p style="font-size:14px">Welcome to the manager, choose an option below to start!</p>
</div>
</div>
<!--BUTTONS-->
<div class="fixed-action-btn" style="bottom: 45px; right: 10px;">
<a class="btn-floating btn-large teal">START</a>
<ul>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn1" data-position="left" data-tooltip="Button 1"><i class="material-icons">format_list_numbered</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn2" data-position="left" data-tooltip="Button 2"><i class="material-icons">assessment</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn3" data-position="left" data-tooltip="Button 3"><i class="material-icons">search</i></a></li>
<li><a class="btn-floating waves-effect waves-light teal darken-3 tooltipped" id= "btn4" data-position="left" data-tooltip="Button 4"><i class="material-icons">add_box</i></a></li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function(){
$('.tooltipped').tooltip();
$('.fixed-action-btn').floatingActionButton();
});
</script>
</body>
</html>
我已经创建了所有按钮(这是一个固定操作按钮,显示了 4 个以上的实际按钮)并且在视觉上工作,但我不知道如何使它们中的每一个为模式对话框调用一个新的 html.file。 .我已经在 .gs 文件中编写了每个按钮的函数,但无法使实际按钮调用这些函数。这是我的整个 .gs 文件:
/** @OnlyCurrentDoc */
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
function btn1(){
var Form = HtmlService.createTemplateFromFile("btn1");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn1").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn1");
}
function btn2(){
var Form = HtmlService.createTemplateFromFile("btn2");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn2").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn2");
}
function btn3(){
var Form = HtmlService.createTemplateFromFile("btn3");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn3").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn3");
}
function btn4(){
var Form = HtmlService.createTemplateFromFile("btn4");
var ShowForm = Form.evaluate();
ShowForm.setTitle("btn4").setHeight(400).setWidth(1000);
SpreadsheetApp.getUi().showModalDialog(ShowForm, "btn4");
}
如果有人可以提供一些有关如何做到这一点的提示,我将非常感激..提前致谢!
- 我正在使用 Materialise CSS。
- 我的侧边栏是通过电子表格上的按钮调用的。
- 一些打印品: Sidebar//Buttons unfolded
最佳答案
您可以通过使用 google.script.run
来实现此目的函数。
在下面的示例中,您可以看到它仅适用于一个按钮,但它对所有按钮都是一样的。
/* Code.gs */
function Sidebar() {
var Form = HtmlService.createTemplateFromFile("Sidebar");
var ShowForm = Form.evaluate();
ShowForm.setTitle("Sidebar");
SpreadsheetApp.getUi().showSidebar(ShowForm);
}
function btn1(){
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutput('<p>My modal content here...</p>')
.setWidth(250)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}
您想要函数btn1
当btn1
图标时被调用在侧栏中单击。
要执行此操作并仍然使用具体化图标,您可以更改 <input>
<button>
的标签并将图标放入其中,如下所示:
<!-- Sidebar.html -->
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<!--WELCOME CARD-->
<body style="background-color:#424242">
<div class="card grey darken-2" style="top:3px">
<div class="card-content white-text">
<span class="card-title" style="font-size:20px;font-weight:bold;color:#80cbc4">MANAGER</span>
<p style="font-size:14px">Welcome to the manager, choose an option below to start!</p>
</div>
</div>
<!--BUTTONS-->
<div class="fixed-action-btn" style="bottom: 45px; right: 10px;">
<a class="btn-floating btn-large teal">START</a>
<ul>
<li>
<button id="btn1" data-position="left" data-tooltip="Button 1" class="btn-floating waves-effect waves-light teal darken-3 tooltipped" value="format_list_numbered" onclick="google.script.run.withUserObject(this).btn1()"><i class="material-icons">format_list_numbered</i></button>
</li>
</ul>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script>
$(document).ready(function() {
$('.tooltipped').tooltip();
$('.fixed-action-btn').floatingActionButton();
});
</script>
</body>
</html>
注意按钮的 onclick 属性
onclick="google.script.run.withUserObject(this).btn1()"
您可以使用google.script.run
从客户端调用 .gs 脚本中的函数。
注意:
您也可以从文件创建 htmlOutput。更改 btn1
中的代码相应地发挥作用。
function btn1(){
// Display a modal dialog box with custom HtmlService content.
var htmlOutput = HtmlService
.createHtmlOutputFromFile('btn1')
.setWidth(250)
.setHeight(300);
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Btn 1 modal title');
}
这是 btn1.html
的示例
<p>This is HTML generated from file...</p>
查看实际效果:
进一步阅读:
关于javascript - 如何使用谷歌脚本从侧边栏(也是 HTML)调用模式对话框(带有 HTML 文件),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60636858/