HTML 테이블 셀 위로 마우스를 가져 가면 날짜 목록을 표시하는 데 어떤 옵션이 필요합니까?

Question

ASP.NET MVC 2 응용 프로그램이있는 클라이언트가 있습니다. 보기 중 하나에는 "최신 작업 날짜"열이있는 테이블이 있습니다. 마우스로 해당 열 위로 마우스를 가져 가면 의 목록을 모두 팝업 패널 (또는 이와 유사한)에 표시 할 수 있습니다.

일반적으로 0에서 5 개의 날짜가 표시됩니다.

Javascript와 관련된 것 같습니다. 그렇다면, 나는 그것이 눈에 거슬리지 싶습니다.

아무도 이것에 매끄러운 해결책을 알고 있습니까? 예를 들어, 좋은 일을하는 구성 요소가 있습니까? 또는 내가 영감을 얻기 위해 볼 수있는 비슷한 것을하는 사이트? 예를 들어 StackOverflow에서 태그 위로 마우스를 가져 가면 팝업과 같은 것입니다.

저는 자바 스크립트 UI 기술을 향상시키기 위해 열심히 노력하고 있습니다. UI 툴킷으로 내 시간을 보내고 싶습니다. 학습 곡선이 일반적으로 이런 작은 작업에서는 금지 될지라도.

Answer 1

jQuery를 사용하여이 작업을 수행 할 수 있습니다. 간단한 해결책은 열에 hover 이벤트를 첨부하고 AJAX를 통해 작업 날짜를로드하여 팝업 패널에 표시하는 것입니다. 간단한 예 :

$(document).ready(function(){ 
    $("#yourcolumnid").hover(
    function() { 
     $.ajax({ 
     type: "POST", 
     url: "URL", 
     contentType: "application/json; charset=utf-8", 
     dataType: "json", 
     data: "{'PARAMETER':'VALUE'}", 
     success: function(result) { 
      $(document).append("<div id='alldates' class='CssForPopup'>" + result.d + "</div>"); 
     } 
     }); 
    }, 
    function() { 
     $("#alldates").remove(); 
    } 
); 
}); 

이 솔루션은 물론, 눈에 거슬리지이며, 당신은 모든은 .js 파일에 넣고 당신이 그것을에 사용할 페이지 (들)에 첨부 할 수있다.