En el desarrollo de proyectos web, a menudo nos encontramos con usuarios que necesitan ver la información detallada de un determinado registro en la pantalla de la lista. Si utiliza el método para migrar la pantalla, la velocidad será más lenta y la experiencia del usuario no será muy buena. Si aparece una capa al hacer clic en el enlace detallado del registro y la muestra en la pantalla actual, la velocidad de procesamiento es muy rápida y el usuario siente que es relativamente novedoso. A continuación usaré un cierto sitio web de comercio electrónico para ilustrar su método de implementación como ejemplo.
1. El código que aparece la capa en la página JSP
< id = '<s: Property value = "#lrvo.logisticno"/>'> <dl> <dt> <strong> <s: text name = "struts.webui.logistics.label.logisticsdetails"/>: </strong> </dt> <dd> <strong> x </strong> </dd> </dl> <viv> <viv> <vivil> CellPadding = "0"> <tr> <td> <span>*</span> <s: text name = "struts.webui.logistics.label.logisticsnumber"/>: </td> <td> <//td> <td colspan = "3" id = "logisticno"> <s: valor de propiedad = " </tr> <tr> <td valign = "top"> <span>*</span> <s: text name = "struts.webui.logistics.label.distribution"/>: </td> <td> </td> <td colspan = "3" style = "text-align: izquierda" Id = "contenido"> <s: value de propiedad = "#lrvO.content" Escape = "False"/> </td> </tr> </table> </div> </div> </s: iterator> <!-Logistics Detalles Fin de la ventana emergente->>
Código de estilo de capa:
.gisticscenter_xq {posición: absoluto; Ancho: 710px; borde: sólido 2px #787878; Antecedentes: #Edfcfe; índice z: 2; }Mi procesamiento pone la capa emergente en diseño.jsp en toda la página del sitio web, y el diseño de todas las páginas en el sitio web la hereda. El sitio web adopta el marco de mosaicos para unificar el diseño de la página.
2. Calcule los valores izquierdo y superior que se establecerán en el centro del objeto
Escribí la función para completar en este paso en un archivo JS, que muestra principalmente la ventana de la capa del registro dinámicamente en función de la posición de coordenadas del clic mouse del usuario en la página de la lista. El código principal es el siguiente:
// Calcule los valores izquierdo y superior que deben establecerse en el centro del objeto // parámetros: // _w - ancho del objeto // _h - función de altura del objeto getlt (_w, _h) {var de = document.documentelement; // Obtener el ancho y la altura de la ventana del navegador actual // Método de escritura compatible, compatible con IE, ff var w = self.innerwidth || (de && de.clientwidth) || document.body.clientwidth; var h = (de && de.clientheight) || document.body.clientHeight; // Obtenga la posición de la barra de desplazamiento actual // método de escritura compatible, compatible con IE, ff var st = (de && de.scrolltop) || document.body.scrolltop; var topp = 0; if (h> _h) topp = (st+(h - _h)/2); más topp = st; var LeftP = 0; if (w> _W) LeftP = ((W - _W)/2); // Distancia izquierda, retorno de distancia superior [LeftP, topp]; } // Obtener la función de getPostion de la posición del mouse getPostion (e) {var x = getx (e); var y = gety (e); } función getx (e) {e = e || Window.event; Return E.Pagex || e.clientx + document.body.scrollleft - document.body.clientleft} function gety (e) {e = e || Window.event; regreso E.Pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // juzga la función de tipo de navegador 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"; }}Incluya este JS en el archivo JSP de la lista de la llamada principal.
<script language = "javascript" type = "text/javaScript" src = "<s: url value ="/js/aligncenter.js "/>"> </script>
3. Una breve mirada a los métodos de llamadas en JSP
<a onClick = "ViewLogistics (Event, '<S: Property Value ="#lrvo.logisticno "/>')" href = "####"> <s: text name = "struts.webui.logistics.label.view"/> </a>
Cuando el usuario hace clic en el enlace de detalles del registro de la fila, se llama al método de la capa de visualización y el valor de identificación del registro se pasa al método de llamadas. De hecho, cada capa se distingue por un valor de atributo de identificación de este registro.
función ViewLogistics (Event, LogisticNo) {var os = getOS (); var y = gety (evento); if (os == 'msie') {y = window.event.y+405; } $ (". logisticscenter_xq"). hide (); $ ("#"+logisticno) .show (); $ ("#"+logisticno) .css ("top", y+15); }En cuanto al papel de los parámetros del evento en el método, no está muy claro, y esto debe investigarse nuevamente. El efecto final es como se muestra en la figura a continuación. A medida que el mouse se mueve hacia abajo, la capa puede moverse dinámicamente.
El anterior es el código de ejemplo de la ventana flotante emergente de control JS (pantalla de lista) presentada por el editor. Espero que te sea útil. Si desea saber más información, ¡siga el sitio web de Wulin.com!