使用Html服务的JQuery示例 [英] JQuery example with Html Service
问题描述
在的第一个示例之后，我试图找出HTML服务中的JQuery，但似乎无法使其工作。 href =https://developers.google.com/apps-script/html_service =nofollow> https://developers.google.com/apps-script/html_service 我可以获得Hello World！以显示。
但是，如果我添加脚本标记并指向JQuery，它不起作用，页面上什么都不显示，它只是空白！
这是我的code.gs文件：
函数doGet（）{
返回HtmlService.createHtmlOutputFromFile（'myPage'）;
}
运行的myPage.html如下所示：
< html>
< body>
Hello World！
< / body>
< / html>
不是看起来像这样：
< html>
< body>
< script type =text / javascriptsrc =http://code.jquery.com/jquery-1.7.2.min.js/>
Hello World！
< / body>
< / html>
那么如何让JQuery（最终JQueryUI）正常工作呢？有没有任何地方的例子或教程？
谢谢，
这里是一个可操作的手风琴html文件，所以只需将其命名为myPage.html我发现某些版本的jquery不能与GAS一起使用，即使它们位于兼容性列表中。
< html>
< head>
< link rel =stylesheethref =http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/humanity/jquery-ui.csstype =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- （
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。整数
ut neque。 Vivamus nisi metus，molestie vel，gravida in，condimentum坐
amet，nunc。 Nam一个nibh。 Donec suscipit eros。南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。整数
ut neque。 Vivamus nisi metus，molestie vel，gravida in，condimentum坐
amet，nunc。 Nam一个nibh。 Donec suscipit eros。南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。整数
ut neque。 Vivamus nisi metus，molestie vel，gravida in，condimentum坐
amet，nunc。 Nam一个nibh。 Donec suscipit eros。南mi。 Proin viverra leo ut
odio。 Curabitur malesuada。 Vestibulum a velit eu ante scelerisque vulputate。
< / p>
< / div>
< / div>
< / div>
< / body>
< / html>
I'm trying to figure-out JQuery in the HTML Service but I can't seem to get it to work.
Following the first example at https://developers.google.com/apps-script/html_service I can get Hello World! to display.
But if I add a script tag and point to JQuery it doesn't work, nothing shows-up on the page, it's just blank!
This is my code.gs file:
function doGet() {
return HtmlService.createHtmlOutputFromFile('myPage');
}
The myPage.html that works looks like this:
<html>
<body>
Hello World!
</body>
</html>
The one that doesn't looks like this:
<html>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"/>
Hello World!
</body>
</html>
So how do I get JQuery (ultimately JQueryUI) to work? Are there any examples or tutorials anywhere?
Thanks,
Here is a working accordion html file so just name it myPage.html
I've found some versions of jquery do not work with GAS even though they are on the compatibility list.
<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>
这篇关于使用Html服务的JQuery示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
