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

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

2011-12-07 69 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

相關問題

 相關問題