In der Entwicklung von Webprojekten begegnen wir häufig Benutzern, die die detaillierten Informationen eines bestimmten Datensatzes im Listenbildschirm anzeigen müssen. Wenn Sie die Methode zur Migration des Bildschirms verwenden, ist die Geschwindigkeit langsamer und die Benutzererfahrung ist nicht sehr gut. Wenn beim Klicken auf den detaillierten Link des Datensatzes eine Ebene auftaucht und auf dem aktuellen Bildschirm angezeigt wird, ist die Verarbeitungsgeschwindigkeit sehr schnell und der Benutzer ist der Ansicht, dass sie relativ neu ist. Im Folgenden werde ich eine bestimmte E-Commerce-Website verwenden, um ihre Implementierungsmethode als Beispiel zu veranschaulichen.
1. Der Code, der die Ebene auf der JSP -Seite auftaucht
<!-Logistikdetails Popup-Seite Start-> <s: iterator value = "lrvo" var = "lrvo" id = "lrvo" status = "st"> <div style = "display: none;" id = '<s: Eigenschaft value = "#lrvo.logisticno"/>'> <dl> <dt> <strong> <s: text name = "stolzs.webui.logistics cellpadding = "0"> <tr> <td> <span>*</span> <s: text name = "struts.webui.logistics </tr> <tr> <td valign = "top"> <span>*</span> <s: text name = "struts.webui.logistics Escape = "False"/> </td> </tr> </table> </div> </div> </s: iterator> <!-Logistikdetails Popup-Fenster->
Layer -Style -Code:
.LogisticsCenter_xq {Position: absolut; Breite: 710px; Grenze: Solid 2px #787878; Hintergrund: #edfcfe; Z-Index: 2; }In meiner Verarbeitung wird die Popup -Ebene auf der gesamten Website -Seite auf Layout.jsp verteilt, und das Layout aller Seiten auf der Website erbt sie. Die Website nimmt das Tiles Framework an, um das Seitenlayout zu vereinen.
2. Berechnen Sie die linken und die oberen Werte, die in der Mitte des Objekts festgelegt werden sollen
Ich habe die Funktion in diesem Schritt in eine JS -Datei geschrieben, in der hauptsächlich das Ebenenfenster des Datensatzes dynamisch auf der Koordinatenposition der Maus des Benutzers dynamisch angezeigt wird. Klicken Sie auf die Liste. Der Hauptcode lautet wie folgt:
// Berechnen Sie die linken und die oberen Werte, die in der Mitte des Objekts festgelegt werden müssen // Parameter: // _w - Objektbreite // _h - Objekthöhe Funktion getLt (_w, _h) {var de = document.documentElement; // Erhalten Sie die Breite und Höhe des aktuellen Browserfensters // Kompatible Schreibmethode, kompatibel mit IE, ff var w = selfnerwidth || (de && de.clientwidth) || document.body.clientwidth; var h = (de && de.clientHeight) || document.body.clientHeight; // Erhalten Sie die Position der aktuellen Bildlaufleiste // Kompatible Schreibmethode, kompatibel mit IE, ff var st = (de && de.scrolltop) || document.body.scrolltop; var topp = 0; if (h> _h) topp = (st+(h - _h)/2); sonst topp = st; var links = 0; if (w> _w) linksp = ((w - _W)/2); // linke Entfernung, obere Entfernung Return [links, topp]; } // Mausposition GetPoTion -Funktion getPoTion (e) {var x = getX (e); var y = gety (e); } Funktion getX (e) {e = e || Fenster.Event; return e.Pagex || e.clientx + document.body.scrollleft - document.body.clientleft} Funktion gety (e) {e = e || Fenster.Event; return e.pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // Richter Browser -Funktionsfunktion getos () {var osObject = ""; 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"; }}Geben Sie diese JS in die Liste JSP -Datei des Hauptaufrufs ein.
<script Language = "javaScript" type = "text/javaScript" src = "<s: url value ="/js/alignCenter.js "/>"> </script>
3. Ein kurzer Blick auf die Anrufmethoden in JSP
<a onclick = "ViewerLogistics (Ereignis, '<s: Eigenschaft value ="#lrvo.logisticno "/>')" href = "####"> <s: text name = "struts.webui.logistics.label.view"/> </a>
Wenn der Benutzer auf den Detail -Link des Datensatzes der Zeile klickt, wird die Methode der Anzeigeschicht aufgerufen und der ID -Wert des Datensatzes an die aufrufende Methode übergeben. Tatsächlich wird jede Schicht durch einen ID -Attributwert dieses Datensatzes unterschieden.
Funktionsseuchlogistik (Ereignis, logisticno) {var os = getos (); var y = gety (Ereignis); if (os == 'msie') {y = window.event.y+405; } $ (". LogisticsCenter_xq"). hide (); $ ("#"+logisticno) .show (); $ ("#"+logisticno) .css ("top", y+15); }In Bezug auf die Rolle von Ereignisparametern in der Methode ist es nicht sehr klar, und dies muss erneut untersucht werden. Der endgültige Effekt ist wie in der folgenden Abbildung gezeigt. Wenn sich die Maus nach unten bewegt, kann sich die Schicht dynamisch bewegen.
Das obige ist der Beispielcode des Popup-Schwimmfensters (Listenbildschirm JS Control Pop-up), der Ihnen vom Editor vorgestellt wurde. Ich hoffe, es wird Ihnen hilfreich sein. Wenn Sie weitere Informationen wissen möchten, folgen Sie bitte der Website wulin.com!