Question

我正在尝试从GWT在TextBox上创建一个Bootstrap popover。

<a href="#" class="btn danger" rel="popover" title="A title" data-content="some content...">hover for popover</a>

<script>
  $(function () {
    $("a[rel=popover]").popover({
              offset: 10
    });
  })
</script>

像这样：

TextBox tb1 = new TextBox();
DOM.setElementAttribute(tb1.getElement(), "rel", "popover");
DOM.setElementAttribute(tb1.getElement(), "title", "A Title");
DOM.setElementAttribute(tb1.getElement(), "data-content", "Popover content...");

然后，在我的.html的<head>中，上面提到的<script>部分（$("input[rel=popover])...")）。

所需的.js文件通过<script src=...>

链接到html文件

但是当我悬停TextBox时没有任何反应。

有些问题：

这仅限于<a>吗？或者我加载脚本文件错了？甚至可以将rel=...和data-content=...添加到GWT的TextBox中吗？我是否需要jQuery / GQuery用于该脚本片段？

编辑：

我尝试了Strelok的建议并得到以下错误：

java.lang.reflect.InvocationTargetException
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:39)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:25)
at java.lang.reflect.Method.invoke(Method.java:597)
at com.google.gwt.dev.shell.ModuleSpace.onLoad(ModuleSpace.java:396)
at com.google.gwt.dev.shell.OophmSessionHandler.loadModule(OophmSessionHandler.java:200)
at com.google.gwt.dev.shell.BrowserChannelServer.processConnection(BrowserChannelServer.java:525)
at com.google.gwt.dev.shell.BrowserChannelServer.run(BrowserChannelServer.java:363)
at java.lang.Thread.run(Thread.java:680)

Caused by: com.google.gwt.core.client.JavaScriptException: (ReferenceError): $ is not defined
at com.google.gwt.dev.shell.BrowserChannelServer.invokeJavascript(BrowserChannelServer.java:248)
at com.google.gwt.dev.shell.ModuleSpaceOOPHM.doInvoke(ModuleSpaceOOPHM.java:136)
at com.google.gwt.dev.shell.ModuleSpace.invokeNative(ModuleSpace.java:561)
at com.google.gwt.dev.shell.ModuleSpace.invokeNativeVoid(ModuleSpace.java:289)
at com.google.gwt.dev.shell.JavaScriptHost.invokeNativeVoid(JavaScriptHost.java:107)
at de.eikecochu.awidb.client.Awidb.bindBootstrapPopover(Awidb.java)
at de.eikecochu.awidb.client.Awidb.onModuleLoad(Awidb.java:11)
... 9 more

Answer 1

另外，看看GWT-Bootstrap：）

它正处于重大发展阶段，但我们已经移植了许多小部件并且正在工作。

如果您需要，请查看：http://gwtbootstrap.github.com/

Answer 2

我一直很好奇自己将Bootstrap与GWT集成，但还没有尝试过。我的猜测是，如果你包括bootstrap-twipsy.js和bootstrap-popover.js，你还需要在你的页面上包含jQuery。

除此之外，您很可能需要在之后调用$('xxx').popover(options) 。您的文本框附加在GWT中。所以尝试这样的事情：

public void onModuleLoad() { final TextBox tb1 = new TextBox(); DOM.setElementAttribute(tb1.getElement(), "rel", "popover"); DOM.setElementAttribute(tb1.getElement(), "title", "A Title"); DOM.setElementAttribute(tb1.getElement(), "data-content", "Popover content..."); DOM.setElementAttribute(tb1.getElement(), "id", "test"); tb1.addAttachHandler( new AttachEvent.Handler() { public void onAttach(AttachEvent e) { if (e.isAttached()) { bindBootstrapPopover(tb1.getElement().getId()); } } }); RootPanel.get().add(tb1); } native void bindBootstrapPopover(String id) /*-{ $('#'+id).popover( {offset:10} ); }-*/;

很想知道你如何使用它。

Answer 3

我试图和Eike做同样的事情，除了包装bootstrap工具提示插件。 Strelok的回答对我来说是一个很大的帮助，但有两件我必须单独解决：

确保您使用的jQuery版本是copacetic 使用twitter bootstrap插件。目前（2012年6月8日），＆lt; s＆gt; jQuery 1.7.1
如果$ wnd。$（...）...没有工作，请尝试使用$ wnd.jQuery，并查看this question了解原因;）

具体来说，我收到了这个错误：

com.google.gwt.core.client.JavaScriptException: (TypeError): Property '$' of object [object Window] is not a function

GWT / Twitter Bootstrap：突破GWT元素？

3 个答案: