使用CSS＆amp; jQuery在Google Apps脚本HtmlService WebApp中叠加图像

Question

我正在尝试使用HtmlService来显示我的公司通过“赛马”场景向目标迈进的进展。 （我们的想法是让马的图像从左到右移动到另一个马轨道的图像。我们的目标值是 0 和 {之间的数字{1}} 并存储在Google电子表格中。）

我已经想出如何在屏幕上打印这些值以及如何使用JavaScript（jQuery）更新60以移动马匹。但是，我无法将两者连接在一起。这就是我能够想到的：

我的CSS档案

Code.gs

我的function doGet() { return HtmlService.createTemplateFromFile('Page') .evaluate(); } function include(filename) { return HtmlService.createHtmlOutputFromFile(filename) .setSandboxMode(HtmlService.SandboxMode.NATIVE) .getContent(); } function getHeadCount() { var ss = SpreadsheetApp.openById('some id'); var sheet = ss.getSheetByName("Horse race headcount"); var hC = sheet.getRange(24, 2); var headCount = hC.getValue(); return headCount } 档案

Page.html

我的<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <?!= include('Stylesheet'); ?> <!-- the above code serves the same purpose as an href for a style sheet --> <div id='page' width="100%"> <div id="wrapper"> <img src="http://i.imgur.com/j1hUEvx.jpg" width="96%" /> <div><p>Consultant Starts: <?!= getHeadCount(); ?> </p></div> <!-- the < ? != tag is for inserting the value of the function into the template --> <div id="mustang"> <img src="http://i.imgur.com/CFtqjuy.png" /> </div> <div id='scale'> <div class='block' id='one'><span>start</span></div> <div class='block' id='two'><span>10</span></div> <div class='block' id='three'><span>20</span></div> <div class='block' id='four'><span>30</span></div> <div class='block' id='five'><span>40</span></div> <div class='block' id='six'><span>50</span></div> </div> </div> </div> <?!= include('JavaScript'); ?> 档案

css.html

我还有<style> #page { background-color: f0f0f0; padding: 5px; } #wrapper { margin: 0 auto; } #mustang { position: relative; top: -347px; left: <?!= horseRace(); ?> <!-- 38% for 31 headCount --> } #scale { display: inline; text-align: center; width: 96%; } .block { float: left; position: relative; width: 16%; height: 30px; top: -400px; } div p { width:100px; height: 50px; background-color: #f0f0f0; position: relative; top: -300px; } #one { background-color: #1F78B4; } #two { background-color: #33A02C; } #three { background-color: #E31A1C; } #four { background-color: #FF7F00; } #five { background-color: #6A3D9A; } #six { background-color: #18258B; } </style> 个文件，虽然我没有运气使用它来更新JavaScript.html来自CSS。

有任何建议或想法吗？我确信有办法做到这一点 - 我只是遇到问题，因为我是一般的编程新手。任何帮助将不胜感激，谢谢！

Answer 1

使用jQuery，您可以操作样式元素。在这种情况下，您想要更改$(#mustang).left。由于您的include()函数只是将所有文件视为Html文件（而不是模板），因此无论如何都没有进行任何模板扩展，因此请清理css：

 #mustang {
     position: relative;
     top: -347px;
     left: 0%    
 }

现在，在JavaScript.html中，您需要一个在页面加载时运行的函数，该函数将收集当前headCount并使用它来设置定位您的马的样式值。 / p>

<script>

// This code in this function runs when the page is loaded.
$(function() {
  google.script.run.withSuccessHandler(positionHorse)
      .getHeadCount();
});

function positionHorse(headCount) {
  var position = 100 * headCount / 60;
  $('#mustang').css('left', (position)+'%');
}

</script>

注意：如果您已将css视为模板并在其上调用evaluate()，则可能已经为您完成了这项工作。

您的doGet()不应该像发布的那样工作......它不会返回htmlOutput。这是我用于测试的内容：

function doGet() {
  var template = HtmlService
                 .createTemplateFromFile('Page');

  var htmlOutput = template.evaluate()
                   .setSandboxMode(HtmlService.SandboxMode.NATIVE)
                   .setTitle('Horse Race');

  return htmlOutput;
}