개체 목록에서 표를 생성해야합니다. 각 행에는 각 객체에 대한 기본 정보 만 포함됩니다. 그러나 사용자가 팝업을 원하는 특정 셀을 가리키면 해당 특정 객체에 대한 모든 정보가 표시됩니다. 어쩌면 팝업은 일종의 모든 세부 사항이있는 테이블 형태 여야합니까? 어떻게해야합니까? JQuery와 함께 일부 효과를 사용할 수 있습니까?사용자가 다른 표 셀을 가리키면 데이터 표를 표시하는 방법은 무엇입니까?
나는 이런 종류의 것에 jQuery tooltip을 사용합니다. bodyHandler 옵션을 사용하여 Javascript를 실행하여 임의로 스타일을 지정할 수있는 툴팁 창을 채울 수 있습니다. 예제를 참조하십시오.
예. 가능합니다. 이 작업을 수행하려면 http://dev.iceburg.net/jquery/jqModal/을 사용할 수 있습니다.
마우스 오버 이벤트 리스너를 바인딩합니다. 즉, 콜백이 호출 될 의도 된 요소 위로 마우스를 가져 가면됩니다. 콜백 내에서 이벤트를 트리거 한 요소에 액세스 할 수 있습니다 (해당 경우 td 또는 tr). 적절한 jquery 선택기를 사용하여 전체 행의 내용을 가져옵니다. 그런 다음 대화 상자를 표시 할 수 있고 대화 상자 안에 표시 할 수있는 콘텐츠가 생겼습니다.
예, jQuery는 이러한 종류의 것들에 아주 좋습니다.
방법은 두 가지가 그것을 할 (최소한)이 있습니다 :
미리 채워과 (CSS) 숨겨진 : 그 위치를 CSS를 사용하여 HTML 페이지에서 볼 수 세포 내부의 모든 팝업 세부 테이블을 구축 메인 레이어 위 (셀 밖으로) 및 display:none으로 이동하고 커서가 메인 셀에있을 때 표시되도록 .maincell:hover .detailtable { display:block;}을 추가합니다.
AJAX : 모든 주요 셀의 "mouseenter"/"mouseleave" 이벤트에 바인딩 기능, 거기 당신은 바람직하게는 고정 된 장소에, 위치 <div>에서 서버와 디스플레이에서 상세 테이블을 얻을 수 AJAX를 사용하거나, 어쩌면 몇 픽셀 커서 오른쪽에 있습니다 (작은 테이블 인 경우). jQuery의 $("#inspector").load(dataURL) 함수를 사용하면 ('inspector'는 <div>의 세부 정보 표를 삽입하는 ID입니다.) 쉽게 죽을 수 있습니다.