带有 Html 服务的 JQuery 示例答案

【问题标题】：JQuery example with Html Service带有 Html 服务的 JQuery 示例
【发布时间】：2012-09-17 20:32:47
【问题描述】：

我正在尝试找出 HTML 服务中的 JQuery，但我似乎无法让它工作。

按照https://developers.google.com/apps-script/html_service 的第一个示例，我可以得到Hello World！显示。

但如果我添加一个脚本标签并指向 JQuery，它就不起作用，页面上什么也没有显示，它只是空白！

这是我的 code.gs 文件：

function doGet() {
  return HtmlService.createHtmlOutputFromFile('myPage');
}

有效的 myPage.html 如下所示：

<html>
  <body>
    Hello World!
  </body>
</html>

没有的那个是这样的：

<html>
  <body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
    Hello World!
  </body>
</html>

那么我如何让 JQuery（最终是 JQueryUI）工作？是否有任何示例或教程？

谢谢，

【问题讨论】：

你想在哪里运行你的脚本？
您是否尝试将
似乎解决方案是使用而不是仅仅用关闭初始标签

标签： jquery jquery-ui google-apps-script

【解决方案1】：

这是一个可工作的手风琴 html 文件，所以只需将其命名为 myPage.html

我发现某些版本的 jquery 不能与 GAS 一起使用，即使它们在兼容性列表中。

<html>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/humanity/jquery-ui.css" type="text/css" />
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#accordion").accordion({ collapsible: true, active: false });
    $('.header-checkbox').click(
    function(e){
        e.stopPropagation();
    }
    );
  });
  </script>
</head>
<body style="font-size:62.5%;">

<div id="accordion">
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title2</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
        <h3 id='example'>
            <a href='#'>
                <label><input class='header-checkbox' type='checkbox' />Title3</label>
            </a>
        </h3>
        <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
        </div>
    </div>
</div>

</body>
</html>

【讨论】：