HTML 블록의 특정 단어를 마우스로 들으려면

GWT HTML 객체를 사용하여 웹 페이지에 표시 할 텍스트가 있습니다. 이 텍스트에는 일련의 특정 단어가 들어 있습니다. 나는이 특별 단어들 중 어떤 것에 대해서도 사용자가 클릭 할 때 팝업을하고 싶다.HTML 블록의 특정 단어를 마우스로 들으려면

어떻게 달성 될 수 있습니까?

필자는 텍스트를 완벽하게 제어 할 수 있으며 필 요한 경우 특수 문자 주위에 특정 태그를 추가 할 수 있습니다.

출처

2011-11-01 Suresh

어떤 이벤트에서든 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") && elt.hasAttribute("data-my-marker") 
    } 
});

(A data-* 속성 사용에 대한 보조 노트 등 : http://www.w3.org/TR/html5/elements.html#embedding-custom-non-visible-data-with-the-data-attributes)

출처

2011-11-01 15:30:51

좋아, 너는 나를 때렸다. 이제는 아직 게시되지 않은 답변을 삭제할 수 있습니다 ;-) –

-1

Label을 확장하고 mouseListener를 구현하는 새 클래스를 만들 수 있습니다.

onHover 메서드에서 새 PopupPanel을 만듭니다.

좋은 예

는 여기에서 찾을 수 있습니다 :

http://examples.roughian.com/index.htm#Listeners~MouseListener

은 그냥 HTML 객체에서 이러한 단어를 필터링하고 새 Label 클래스로 전원을 켜고 다시 패널에 넣어.

출처