jquery - 使用 CSS 和 jQuery 在 Google Apps 脚本 HtmlService WebApp 中叠加图像

Question

我正在尝试使用 HtmlService通过“赛马”场景展示我的公司在实现目标方面取得的进展。 (想法是让一匹马的图像从左到右穿过另一幅马跑道图像。我们的目标值是 0 和 < strong>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;
}