使用 CSS 和 jQuery 在 Google Apps Script HtmlService WebApp 中叠加图像

Question

我正在尝试使用HtmlService 来显示我的公司通过“赛马”场景在实现目标方面取得的进展。 （这个想法是让一匹马的图像从左到右穿过另一个马道图像。我们的目标值是介于 0 和 60 之间的数字 并存储在 Google 电子表格中。）

我已经弄清楚如何在屏幕上打印值以及如何使用 JavaScript (jQuery) 更新 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 调用getHeadCount();。

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

Answer 1

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

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

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

<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;
}