웹 프로젝트 개발에서 우리는 종종 목록 화면에서 특정 레코드의 자세한 정보를 봐야하는 사용자를 만나게됩니다. 화면 마이그레이션 방법을 사용하면 속도가 느려지고 사용자 경험이 그리 좋지 않습니다. 레코드의 자세한 링크를 클릭 할 때 레이어가 팝업되어 현재 화면에 표시하면 처리 속도가 매우 빠르며 사용자는 비교적 참신하다고 생각합니다. 아래는 특정 전자 상거래 웹 사이트를 사용하여 구현 방법을 예로 들어 설명합니다.
1. JSP 페이지에서 레이어를 팝업하는 코드
<!-물류 세부 사항 팝업 페이지 시작-> <s : iterator value = "lrvo"var = "lrvo"id = "lrvo"status = "st"> <div style = "display : none;" id = '<s : property value = "#lrvo.logisticNo"/>'> '> <dl> <dt> <strong> <s : text name = "struts.webui.logistics.label.label.logisticsDetails"/> : </strong> </dt> <dd> <strong> </dd> </dl> <typl> <typl> <typl> <typ </dl> </dt> </dt> <dd> <strong> </dd> CellPadding = "0"> <td> <td> <span>*</span> <s : text name = "struts.webui.logistics.label.logisticsnumber"/> : </td> <td> </td> <td colspan = "3"id = "headisticno "> <s : 속성 값 ="#logisticno. </tr> <td> <td valign = "top"> <span>*</span> <s : text name = "struts.webui.logistics.label.diptribution"/> : </td> <td> </td> <td colspan = "3"style = "텍스트-알 붙인 : 왼쪽"id = "content"#lrvo.content " Escape = "false"/> </td> </tr> </table> </div> </div> </s : iterator> <!-물류 세부 사항 팝업 창 종료->
레이어 스타일 코드 :
.LogisticsCenter_XQ {위치 : 절대; 너비 : 710px; 국경 : Solid 2PX #787878; 배경 : #EDFCFE; z- 인덱스 : 2; }내 처리는 전체 웹 사이트 페이지에서 팝업 계층을 Layout.jsp로 놓고 웹 사이트의 모든 페이지의 레이아웃이 상속합니다. 웹 사이트는 타일 프레임 워크를 채택하여 페이지 레이아웃을 통합합니다.
2. 객체의 중앙에 설정할 왼쪽 및 상단 값을 계산합니다.
이 단계에서 JS 파일로 완료하기 위해 기능을 작성했는데, 주로 사용자의 마우스 목록 페이지의 좌표 위치를 기반으로 레코드의 레이어 창을 동적으로 표시합니다. 기본 코드는 다음과 같습니다.
// 객체의 중앙에 설정 해야하는 왼쪽 및 상단 값을 계산하십시오. // 매개 변수 : // _w- 객체 높이 // 객체 높이 함수 getlt (_w, _h) {var de = document.documentElement; // 현재 브라우저 창의 너비와 높이를 가져옵니다. // IE와 호환되는 호환 된 쓰기 방법, ff var w = self.innerWidth || (de && de.clientwidth) || document.body.clientWidth; var h = (de && de.clientHeight) || document.body.clientHeight; // 현재 스크롤 바의 위치를 가져옵니다. // IE, FF var st = (de && de.scrolltop) || document.body.scrolltop; var topp = 0; if (h> _h) topp = (st+(h -_h)/2); else topp = st; var leftp = 0; if (w> _w) leftp = ((w -_w)/2); // 왼쪽 거리, 최상위 반환 [leftp, topp]; } // 마우스 위치 가져 오기 getpostion function getpostion (e) {var x = getx (e); var y = gety (e); } 함수 getx (e) {e = e || Window.event; 반환 e.pagex || e.clientx + document.body.scrollleft- document.body.clientleft} 함수 gety (e) {e = e || Window.event; 반환 e.pagey || e.clienty + document.body.scrolltop- docum if (navigator.useragent.indexof ( "msie")> 0) {return "msie"; } if (isfirefox = navigator.useragent.indexof ( "firefox")> 0) {return "firefox"; } if (issafari = navigator.useragent.indexof ( "safari")> 0) {return "safari"; } if (iscamine = navigator.useragent.indexof ( "Camine")> 0) {return "Camine"; } if (ismozilla = navigator.useragent.indexof ( "gecko/")> 0) {return "gecko"; }}이 js를 메인 호출의 목록 JSP 파일에 포함시킵니다.
<script language = "javaScript"type = "text/javaScript"src = "<s : url value ="/js/aligncenter.js "/>"> </script>
3. JSP의 호출 방법을 간략하게 살펴 봅니다.
<a onclick = "viewLogistics (이벤트, '<s : 속성 값 ="#lrvo.logisticNo "/>')"href = "####"> <s : text name = "struts.webui.logistic.label.view"/> </a>
사용자가 행 레코드의 세부 사항 링크를 클릭하면 디스플레이 레이어의 메소드가 호출되고 레코드의 ID 값이 호출 메소드로 전달됩니다. 실제로, 각 레이어는이 레코드의 ID 속성 값으로 구별됩니다.
함수 viewLogistics (이벤트, 로지스틱 노) {var os = getos (); var y = gety (이벤트); if (os == 'msie') {y = window.event.y+405; } $ ( ". LogisticsCenter_xq"). hide (); $ ( "#"+logisticNo) .show (); $ ( "#"+logisticNo) .css ( "상단", y+15); }이 방법에서 이벤트 매개 변수의 역할에 관해서는 명확하지 않으며이를 다시 조사해야합니다. 최종 효과는 아래 그림과 같습니다. 마우스가 아래로 이동하면 층이 동적으로 움직일 수 있습니다.
위는 편집자가 소개 한 JS Control Pop-Up Floating Window (목록 화면)의 예제 코드입니다. 나는 그것이 당신에게 도움이되기를 바랍니다. 더 많은 정보를 알고 싶다면 Wulin.com 웹 사이트를 따르십시오!