1. 首页
  2. 问答
  3. GWT/Twitter Bootstrap：GWT元素上的Popover？

GWT/Twitter Bootstrap：GWT元素上的Popover？

2011-12-07 27 views
2

我想从GWT的文本框上创建一个Bootstrap弹出窗口。GWT/Twitter Bootstrap：GWT元素上的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的<script>部分上述（带$("input[rel=popover])...")）的<head>。

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

链接到HTML文件但是，当我将鼠标悬停在文本框没有任何反应。

一些问题：

难道这仅限于<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

来源

2011-12-07 Eike Cochu

回答

2

我一直好奇自己集成自举与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}); 
}-*/;

会好奇听到你如何去与此。

来源

2011-12-08 12:46:03 Strelok

+0

添加 –

+0

您已经包含在你页面的jQuery，对我作为编辑的错误？也可以尝试'$ wnd。$（'＃'+ id）.popover（{offset：10}）;'。 – Strelok

+0

'$ wnd'做到了，它工作 –

0

我试图做同样的事情，埃克，除非包裹在引导提示插件。 Strelok的答案是这对我有很大的帮助，但有两件，我不得不分别计算出：

  1. 请确保您正在使用jQuery的版本是COPACETIC 与Twitter的引导插件。目前（6/8/2012）即> jQuery 1.7.1
  2. 如果$ wnd。$（...）...不起作用，请尝试$ wnd.jQuery，并参阅this question为什么;）

具体我得到这个错误：

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

来源

2012-06-08 19:03:11 Geoff

相关问题

 相关问题