GWT/Twitter Bootstrap：GWT 元素上的弹出框？答案

【问题标题】：GWT/Twitter Bootstrap: Popover on GWT elements?GWT/Twitter Bootstrap：GWT 元素上的弹出框？
【发布时间】：2011-12-07 16:39:05
【问题描述】：

我正在尝试在 GWT 的 TextBox 上创建一个 Bootstrap 弹出框。

<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 中吗？那个脚本 sn-p 需要 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

【问题讨论】：

标签： javascript gwt twitter-bootstrap

【解决方案1】：

另外，看看 GWT-Bootstrap :)

它正在大力开发，但我们已经移植了很多小部件并可以正常工作。

如果你想看看：http://gwtbootstrap.github.com/

【讨论】：

【解决方案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} );
}-*/;

很想知道你是怎么做的。

【讨论】：

您的页面中包含了 jQuery，对吗？也可以试试$wnd.$('#'+id).popover( {offset:10} );。

【解决方案3】：

我试图做和 Eike 一样的事情，除了包装引导工具提示插件。 Strelok 的回答在这方面对我有很大帮助，但有两部分我必须单独弄清楚：

确保您使用的 jQuery 版本是 copacci 使用 twitter 引导插件。目前（2012 年 6 月 8 日）这是 > 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

【讨论】：