GWT / Twitter Bootstrap: Popover на элементах GWT? - PullRequest
Новая
       3

GWT / Twitter Bootstrap: Popover на элементах GWT?

2 голосов
/ 07 декабря 2011

Я пытаюсь создать всплывающее окно Bootstrap в TextBox из GWT. 

<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...");

, а затем в <head> моего .html упомянутой выше части <script> (с $("input[rel=popover])...")).

Необходимые .js-файлы связаны с html-файлом через <script src=...>

Но ничего не происходит при наведении курсора.

Некоторые вопросы:

Это ограничено <a>? Или я загружаю файлы скриптов неправильно? Можно ли даже добавить rel=... и data-content=... в TextBox GWT? Нужен ли мне jQuery / GQuery для этого фрагмента скрипта?

редактирование:

Я попробовал то, что предложил Стрелок, и получил следующую ошибку: 

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

Ответы [ 3 ]

3 голосов
/ 18 мая 2012

Кроме того, взгляните на GWT-Bootstrap:)

Он находится в стадии интенсивной разработки, но у нас есть много портированных и работающих виджетов.

посмотрите, если хотите:1005 *http://gwtbootstrap.github.com/

2 голосов
/ 08 декабря 2011

Мне было любопытно интегрировать 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} );
}-*/;

Было бы любопытно услышать, как вы поступите с этим.

0 голосов
/ 08 июня 2012

Я пытался сделать то же самое, что и Eike, за исключением обертывания плагина всплывающей подсказки начальной загрузки.Ответ Стрелака мне очень помог в этом, но я должен был разобрать две части:

  1. Убедитесь, что используемая вами версия jQuery совместима с загрузчиком Twitterплагины.В настоящее время (6/8/2012) это> jQuery 1.7.1
  2. Если $ wnd. $ (...) ... не работает, попробуйте $ wnd.jQuery и посмотрите этот вопрос почему;)

В частности, я получил эту ошибку: 

com.google.gwt.core.client.JavaScriptException: (TypeError): Property '$' of object [object Window] is not a function
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...