如何混合使用jQuery和UiInstance来生成GUI [英] How to mix jQuery and a UiInstance for generating GUIs

问题描述

我有一个使用GUI构建器制作出来的相当基本的对话框。不过，我想在窗体中放置滑块小部件。 （不要问！）

jQuery UI库有一个滑块，但似乎为了将所有jQuery脚本和css加载到模板中，我必须切换到HTML服务，而不是用于页面生成的UI服务。

目前，我的Gui构建器表单工作正常，运行如下所示;

  function doGet（e）{
 var app = UiApp.createApplication（）; 
 app.add（app.loadComponent（DocEditorGui））; 
返回应用程序; 
} 
  

我在一个html页面中有一个jQuery滑块，这个;
$ b

function doGet（e）{
return HtmlService.createHtmlOutputFromFile（'mySliderWidget ）;
}


然而，使用HTML文件似乎与app.createHTML（）不兼容。 HTML类型小部件，因为如果我传递HTML输出内容，则不显示任何内容。由于Logger.log显示正确的jQuery和html，因此HTML绝对处理完毕。

  var t = HtmlService.createHtmlOutputFromFile（'mySliderWidget'）; 
 var widgetHTML = container.createHTML（t.getContent（））; 
 widgetHTML.setStyleAttribute（background，green）; 
 Logger.log（t.getContent（））; 
 vPanel.add（widgetHTML）; 
  

不过这可能是caja也被抓住了，因为效果似乎是剥离了所有的jQuery的id标签。 HTML被添加了，它全部为jQuery打破。

有没有这个用例的例子，或者我尝试这样的事情还为时过早吗？ / p>

作为一个测试用例，这个jQuery滑块的例子;
http://pastebin.com/bnY7PhCL

在这里的caja操场上跑;
http://code.google.com/p/google-caja / wiki / CajaPlayground

但不能像上面那样在HTML小部件下运行。 方案

app.createHTML不使用Caja。它除去一小部分子集以外的所有HTML。您可以在这里的文档中看到：

https://developers.google.com/apps-script/class_html

删除所有脚本标记。

HtmlService不是app.createHTML小部件;它是一个全新的API，需要你以这种方式构建整个应用程序。无法将HtmlService对jQuery和UiApp的支持混合搭配;它是一个或另一个。

I've got a fairly basic dialog form worked out using the GUI builder. However I would like to put a slider widget in the form. (don't ask!)

The jQuery UI lib has a slider, but it seems that in order to get all the jQuery scripts and css loaded into the template, I have to switch to the HTML service instead of UI service for page generation.

At the moment I have my Gui builder form working ok, running something like this;

function doGet(e) {
  var app = UiApp.createApplication();
  app.add(app.loadComponent("DocEditorGui"));
  return app;
}

and I have a jQuery slider in a html page that I can pull in like this;

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

However using an HTML file seems to be incompatible with the app.createHTML() HTML type widget, in that nothing is displayed if I pass the HTMLoutput contents. The HTML is definitely processed, as Logger.log shows the correct jQuery and html.

var t =  HtmlService.createHtmlOutputFromFile('mySliderWidget'); 
var widgetHTML = container.createHTML(t.getContent());
widgetHTML.setStyleAttribute("background", "green");
Logger.log( t.getContent()  );
vPanel.add(widgetHTML );

However presumably this is getting caught by caja also, because the effect appears to be stripping out all of the id tags for jQuery. The HTML is added, its all broken for jQuery.

Is there an example for this use-case, or am I way too early to be trying things like this?

As an test-case, this jQUery slider example; http://pastebin.com/bnY7PhCL

runs in the caja playground here; http://code.google.com/p/google-caja/wiki/CajaPlayground

but does not run under HTML widget as above.

解决方案

app.createHTML does not use Caja. It strips out all HTML except a small subset. You can see in the docs here:

https://developers.google.com/apps-script/class_html

that it strips out all script tags.

HtmlService is not the app.createHTML widget; it is an entirely new API and requires you to build the entire app that way. There's no way to mix and match HtmlService's support for jQuery with UiApp; it's one or the other.

这篇关于如何混合使用jQuery和UiInstance来生成GUI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！