多页面Web应用
这是一个基本的四页Web应用程序。它只显示页面标题和左侧边栏上用于导航的四个按钮。
Code.gs:
function getScriptURL(qs) {
var url = ScriptApp.getService().getUrl();
return url + qs ;
}
function doGet(e)
{
if(e.queryString !=='')
{
switch(e.parameter.mode)
{
case 'page4':
setPage('Page4')
return HtmlService
.createTemplateFromFile('Page4')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page4");
break;
case 'page3':
setPage('Page3');
return HtmlService
.createTemplateFromFile('Page3')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page3");
break;
case 'page2':
setPage('Page2');
return HtmlService
.createTemplateFromFile('Page2')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page2");
break;
case 'page1':
setPage('Page1');
return HtmlService
.createTemplateFromFile('Page1')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page1");
break;
default:
setPage('Page1');
return HtmlService
.createTemplateFromFile('Page1')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page1");
break;
}
}
else
{
setPage('Page1');
return HtmlService
.createTemplateFromFile('Page1')
.evaluate()
.addMetaTag('viewport', 'width=device-width, initial-scale=1')
.setTitle("Page1");
}
}
function getPageData()
{
var s='';
s+='<input type="button" value="Page1" onClick="getUrl(\'?mode=page1\');" />';
s+='<br /><input type="button" value="Page2" onClick="getUrl(\'?mode=page2\');" />';
s+='<br /><input type="button" value="Page3" onClick="getUrl(\'?mode=page3\');" />';
s+='<br /><input type="button" value="Page4" onClick="getUrl(\'?mode=page4\');" />';
var rObj={menu:s,title:getPage()};
Logger.log(rObj);
return rObj;
}
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
}
Pages.gs
我决定切换到用户脚本属性服务,因为您可能想要拥有多个用户。我经常开发只供我使用的脚本。
function setPage(page) {
var ps=PropertiesService.getUserProperties();
ps.setProperty('PageTitle', page);
return ps.getProperty('PageTitle');
}
function initPage() {
var ps=PropertiesService.getUserProperties();
ps.setProperty('PageTitle','');
return ps.getProperty('PageTitle');
}
function getPage() {
var ps=PropertiesService.getUserProperties();
var pt=ps.getProperty('PageTitle');
return pt;
}
globals.gs:
我曾经用这个来设置页面标题,但是我意识到有些人可能希望有多个用户,所以用户属性服务是更加合理的选择。我可能会用它来做其他事情,所以我把它留下了。但这由你来决定。
function getGlobals(){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Globals');
var rg=sh.getRange(1,1,getGlobalHeight(),2);
var vA=rg.getValues();
var g={};
for(var i=0;i<vA.length;i++){
g[vA[i][0]]=vA[i][1];
}
return g;
}
function setGlobals(dfltObj){
if(dfltObj){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Globals');
var rg=sh.getRange(1,1,getGlobalHeight(),2);
var vA=rg.getValues();
for(var i=0;i<vA.length;i++){
vA[i][1]=dfltObj[vA[i][0]];
}
rg.setValues(vA);
}
}
function getGlobal(key) {
var rObj=getGlobals();
if(rObj.hasOwnProperty(key)){
return rObj[key];
}else{
throw(Utilities.formatString('JJE-SimpleUtilitiesScripts-Error: Globals does not contain a key named %s.',key));
}
}
function setGlobal(key,value){
var curObj=getGlobals();
curObj[key]=value;
setGlobals(curObj);
}
function getGlobalHeight(){
var ss=SpreadsheetApp.getActive();
var sh=ss.getSheetByName('Globals');
var rg=sh.getRange(1,1,sh.getMaxRows(),1);
var vA=rg.getValues();
for(var i=0;i<vA.length;i++){
if(!vA[i][0]){
break;
}
}
return i;
}
第1页.html:
1/4.它们一开始都是相同的。我会按照这种方式制作它们,如果需要自定义它们,通常会直接在html页面内进行操作。但也可以添加额外的JavaScript或CSS页面以支持每个页面之间的变化。
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<?!= include('res') ?>
<?!= include('css') ?>
</head>
<body>
<?!= include('content') ?>
<?!= include('script') ?>
</body>
</html>
<html><head>
content.html:
<div class="sidenav"></div>
<div class="header">
<h1 id="ttl"></h1>
</div>
<div class="main"></div>
script.html:
<script>
$(function(){
google.script.run
.withSuccessHandler(updatePageData)
.getPageData();
});
function getUrl(qs){
google.script.run
.withSuccessHandler(loadNewPage)
.getScriptURL(qs);
}
function updatePageData(dObj){
$('.sidenav').html(dObj.menu);
$('.header #ttl').html(dObj.title);
}
function loadNewPage(url){
window.open(url,"_top");
}
console.log('script.html');
</script>
css.html:
一个非常简单的样式页面。
<style>
input[type="button"],input[type="text"],label{margin:2px 2px 5px 5px;}
body {
background-color:#fbd393;
font-family: "Lato", sans-serif;
}
.sidenav {
height: 100%;
width: 75px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #EEE;
overflow-x: hidden;
padding-top: 5px;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 16px;
color: #818181;
display: block;
}
.sidenav a:hover,label:hover {
color: #770000;
}
.header{
margin-left: 75px;
font-size: 16px;
padding: 0px 5px;
background-color:#fbd393;
height:60px;
}
.main {
margin-left: 75px;
font-size: 16px;
padding: 0px 5px;
background-color:#e9e8de;
height:450px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 5px;}
.sidenav a {font-size: 16px;}
}
</style>
res.html:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
动画:
![这里输入图片描述](https://istack.dev59.com/swZLT.gif)