Dans le développement de projets Web, nous rencontrons souvent des utilisateurs qui ont besoin de visualiser les informations détaillées d'un certain enregistrement dans l'écran de la liste. Si vous utilisez la méthode de migration de l'écran, la vitesse sera plus lente et l'expérience utilisateur ne sera pas très bonne. Si un calque apparaît lorsque vous cliquez sur le lien détaillé de l'enregistrement et l'affiche sur l'écran actuel, la vitesse de traitement est très rapide et l'utilisateur estime qu'il est relativement nouveau. Ci-dessous, j'utiliserai un certain site Web de commerce électronique pour illustrer sa méthode d'implémentation comme exemple.
1. Le code qui apparaît le calque sur la page JSP
<! - Logistic Détails Page pop-up Démarrer -> <S: iterator value = "lrvo" var = "lrvo" id = "lrvo" status = "st"> <div style = "affiche: non;" id = '<s: propriété value = "# lrvo.logisticno" />'> <dl> <dt> <strong> <s: text name = "struts.webui.logistics.label.logisticsdetails" />: </strong> </ dt> <dd> <strong> x </strong> </dd> </dl> CellPadding = "0"> <Tr> <Td> <span> * </span> <S: Text Name = "strut.webui.logistics.label.logisticsNumber" />: </td> <td> </td> <td colspan = "3" id = "Logisticno"> <s: propriété Value = "# lrvo.Logisticno" / </ td> </ tr> <tr> <td valign = "top"> <span> * </span> <s: text name = "struts.webui.logistics.label.distribution" />: </ td> <td> </td> <td Colspan = "3" style = "Text-adign: Left" id = "Content"> <s: Property Value Value = "# lrvo.Conte" Escape = "false" /> </td> </tr> </ table> </div> </div> </s: iterator> <! - Détails de la logistique End Finion de fenêtre ->
Code de style de calque:
.LogisticsCenter_xq {position: absolue; Largeur: 710px; Border: solide 2px # 787878; Contexte: #edfcfe; Z-Index: 2; }Mon traitement met la couche contextuelle sur Layout.jsp sur toute la page du site Web, et la disposition de toutes les pages du site Web en hérite. Le site Web adopte le framework Tiles pour unifier la disposition de la page.
2. Calculez les valeurs gauche et supérieure à régler au centre de l'objet
J'ai écrit la fonction à terminer dans cette étape dans un fichier JS, qui affiche principalement la fenêtre de calque de l'enregistrement dynamiquement en fonction de la position de coordonnée de la souris de l'utilisateur cliquez sur la page de liste. Le code principal est le suivant:
// Calculez les valeurs gauche et supérieure qui doit être définie au centre de l'objet // Paramètres: // _w - Largeur d'objet // _H - Fonction de hauteur d'objet getlt (_w, _h) {var de = document.DocumentElement; // Obtenez la largeur et la hauteur de la fenêtre actuelle du navigateur // Méthode d'écriture compatible, compatible avec IE, ff var w = self.innerwidth || (de && de.clientwidth) || document.body.clientwidth; var h = (de && de.clientheight) || document.body.clientHeight; // Obtenez la position de la méthode d'écriture compatible Currelbar // compatible, compatible avec 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); // Distance gauche, retour de distance supérieure [gauche, topp]; } // Get Mouse Position GetPostion Fonction getpostion (e) {var x = getx (e); var y = gety (e); } fonction getx (e) {e = e || window.event; return e.pagex || e.clientx + document.body.scrollleft - document.body.clientleft} function gety (e) {e = e || window.event; return e.pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // juge le type de navigateur fonction 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"; }}Incluez ce JS dans le fichier JSP de la liste de l'appel principal.
<script lingots = "javascript" type = "text / javascript" src = "<s: url value =" / js / aligncenter.js "/>"> </ script>
3. Un bref regard sur les méthodes d'appel dans JSP
<a onClick = "ViewLogistics (Event, '<S: Property Value =" # lrvo.logisticno "/>')" href = "####"> <s: text name = "struts.webui.logistics.label.view" /> </a>
Lorsque l'utilisateur clique sur le lien de détails de l'enregistrement de la ligne, la méthode de la couche d'affichage est appelée et la valeur d'ID de l'enregistrement est transmise à la méthode d'appel. En fait, chaque couche se distingue par une valeur d'attribut d'ID de cet enregistrement.
fonction ViewLogistics (événement, logisticNo) {var os = getOS (); var y = gety (événement); if (os == 'msie') {y = window.event.y + 405; } $ (". logisticscenter_xq"). hide (); $ ("#" + logisticno) .show (); $ ("#" + logisticno) .css ("top", y + 15); }Quant au rôle des paramètres de l'événement dans la méthode, il n'est pas très clair, et cela doit être à nouveau étudié. L'effet final est comme indiqué dans la figure ci-dessous. Au fur et à mesure que la souris se déplace, la couche peut se déplacer dynamiquement.
Ce qui précède est l'exemple de code de la fenêtre flottante pop-up de contrôle JS (écran de liste) présenté par l'éditeur. J'espère que cela vous sera utile. Si vous souhaitez en savoir plus, veuillez suivre le site Web de Wulin.com!