DevExtreme DxPopover 제대로 활용하기

 

DevExtreme DxPopover 제대로 활용하기

DxPopover

DxPopover는 DevExpress의 DevExtreme에서 제공하는 오버레이 UI 컴포넌트로, 버튼이나 텍스트 위에 풍부한 정보를 툴팁처럼 표시할 수 있습니다. 특히 jQuery와 함께 사용하면 유연한 사용자 인터페이스를 구현할 수 있어요.

기본 사용 예제

$("#popoverContainer").dxPopover({
  target: "#myButton",
  showEvent: "click",
  hideEvent: "mouseleave",
  contentTemplate: function(contentElement) {
    $(contentElement).text("이건 Popover 내용입니다.");
  }
});

JSP 콘텐츠 삽입하기

contentTemplate: function(contentElement) {
  $("

").load("/yourContent.jsp").appendTo(contentElement); }

Tip: JSP는 서버에서 렌더링된 HTML을 반환하며, 스크립트는 자동 실행되지 않으니 주의하세요!

새 창 열기 및 페이지 이동

const button = $("").text("상세 보기").on("click", function() {
  window.open("/detail.jsp", "popupWindow", "width=600,height=400");
});

테이블 형태의 UI 구현

const container = $("

").css({ display: "grid", gridTemplateColumns: "100px 200px", rowGap: "8px" }); container.append($("<div>").text("이름")); container.append($("<div>").text("홍길동")); // ... 더 많은 행 추가 container.appendTo(contentElement);

버튼 추가 및 이벤트 처리

const actionButton = $("")
  .text("자세히 보기")
  .css({ fontSize: "16px", padding: "6px 12px" })
  .on("click", function() {
    alert("버튼 클릭됨");
    // API 호출 또는 화면 전환 가능
  });

글자 크기 조정

$("<div>").css("font-size", "20px").text("큰 글자");

추가 팁: DevExtreme의 dxForm, dxDataGrid 등 다른 컴포넌트도 contentTemplate 내부에 자유롭게 포함할 수 있어요!

이처럼 DxPopover는 단순한 툴팁 그 이상으로, UI를 동적으로 확장하고 사용자 액션을 유도할 수 있는 훌륭한 도구입니다. 복잡한 사용자 화면도 충분히 구현 가능하니, 필요에 따라 자유롭게 활용해보세요.