Блог

У меня есть некоторый текст, который я отображаю на веб-странице, используя объект GWT HTML. Этот текст содержит набор определенных слов. Я хочу, чтобы что-то всплывало, когда пользователь нажимает (также, если он некоторое время удерживает курсор мыши на нем, если это легко реализовать) на любом из этих специальных слов.

Как этого можно достичь?

Пожалуйста, обратите внимание, что у меня есть полный контроль над текстом, и я могу добавить любые конкретные теги вокруг этих специальных слов, если требуется.

Из любого события вы можете легко получить точный целевой элемент, используя event.getNativeEvent().getEventTarget() который вы могли бы затем проверить некоторые специфические характеристики элементов-маркеров, которые вы бы вставили в HTML. Итак, вы бы прикрепили события мыши к HTML виджету и использовали так называемое «делегирование событий».

 final HTML widget = new HTML("some text with <span data-my-marker='foo'>marked words</span> in it");
widget.addClickHandler(new ClickHandler() {
   @Override
   public void onClick(ClickEvent event) {
      Element target = Element.as(event.getNativeEvent().getEventTarget());
      // walk up until we reach a marker 'span' or the HTML widget's root element
      // just in case the marked words have markup in them
      while (!target.equals(widget.getElement())) {
        if (isMarker(target)) {
          // found a marker 'span'; process it and exit the loop
          String data = span.getAttribute('data-my-marker');
          Window.alert(data);
          break;
        }
        // otherwise, continue looping
        target = target.getParentElement();
      }
   }

   private boolean isMarker(Element elt) {
      return elt.hasTagName("span") amp;amp; elt.hasAttribute("data-my-marker")
   }
});
 

(в качестве дополнительного примечания, об использовании data-* атрибута: http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes )

Вы можете создать новый класс, который расширяет Label и реализует MouseListener.

В методе onHover вы создаете новую всплывающую панель.

Хороший пример можно найти здесь:

http://examples.roughian.com/index.htm#Listeners ~МусолИститель

Просто отфильтруйте эти слова из вашего HTML-объекта и превратите их в свой новый класс Label и верните их на панель.