No desenvolvimento do projeto da web, geralmente encontramos usuários que precisam visualizar as informações detalhadas de um determinado registro na tela da lista. Se você usar o método de migrar a tela, a velocidade será mais lenta e a experiência do usuário não será muito boa. Se uma camada aparecer ao clicar no link detalhado do registro e exibi -lo na tela atual, a velocidade de processamento é muito rápida e o usuário sente que é relativamente novo. Abaixo, usarei um determinado site de comércio eletrônico para ilustrar seu método de implementação como exemplo.
1. O código que aparece na camada na página JSP
<!-Detalhes da logística Página pop-up Iniciar-> <S: iterator value = "lrvo" var = "lrvo" id = "lrvo" status = "st"> <div Style = "Display: None;" id = '<s: propriedade value = "#lrvo.logisticno"/>'> <dl> <dt> <strong> <s: text name = "struts.webui.logistics.label.logisticsDetails"/>: </strong> </dt> <dd> <strong> x </" CellPadding = "0"> <tr> <td> <pan>*</span> <s: name de texto = "struts.webui.logistics.label.logisticsNumber"/>: </td> <td> </td> <td colspan = "3" id = "Logisticno"> <" </tr> <tr> <td valign = "top"> <pan>*</span> <s: name de texto = "struts.webui.logistics.label.distribution"/>: </td> <td> </td> <td colspan = "3" styer = "text-align: esquerda" id ""> " Escape = "false"/> </td> </tr> </table> </div> </div> </s: iterator> <!-Detalhes da logística final da janela pop-up->
Código de estilo de camada:
.LogisticsCenter_xq {Posição: Absolute; Largura: 710px; Border: Solid 2px #787878; Antecedentes: #edfcfe; Z-Index: 2; }Meu processamento coloca a camada pop -up no layout.jsp em toda a página do site e o layout de todas as páginas do site a herda. O site adota a estrutura de ladrilhos para unificar o layout da página.
2. Calcule os valores esquerdo e superior a serem definidos no centro do objeto
Eu escrevi a função a ser concluída nesta etapa em um arquivo JS, que exibe principalmente a janela da camada do registro dinamicamente com base na posição de coordenadas do mouse do usuário, clique na página da lista. O código principal é o seguinte:
// Calcule os valores esquerda e superior que precisam ser definidos no centro dos parâmetros do objeto //: // _w - largura do objeto // _h - função de altura do objeto getlt (_w, _h) {var de = document.documentElement; // Obtenha a largura e a altura da janela atual do navegador // Método de escrita compatível, compatível com IE, ff var w = self.innerwidth || (de && de.clientWidth) || document.body.clientWidth; var h = (de && de.clientHeight) || document.body.clientHeight; // Obtenha a posição do método de escrita compatível atual // Compatível, compatível com 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); // distância esquerda, retorno de distância superior [leftp, topp]; } // Obtenha a função GetPostion da posição do mouse getPostion (e) {var x = getX (e); var y = gety (e); } função getx (e) {e = e || Window.Event; Retornar E.Pagex || e.clientx + document.body.scrollleft - document.body.clientleft} função gety (e) {e = e || Window.Event; Retornar E.Pagey || e.clienty + document.body.scrolltop - document.body.clienttop} // Juiz Tipo de navegador Função getos () {var osobject = ""; if (Navigator.UserAgent.Indexof ("msie")> 0) {return "msie"; } if (isfirefox = navegator.userAgent.indexof ("firefox")> 0) {return "firefox"; } if (Issafari = Navigator.UserAgent.Indexof ("Safari")> 0) {return "Safari"; } if (iscamine = navegator.userAgent.indexof ("Camine")> 0) {return "Camine"; } if (ismozilla = navegator.userAgent.indexof ("gecko/")> 0) {return "gecko"; }}Inclua este JS no arquivo JSP da lista da chamada principal.
<Script Language = "javascript" type = "text/javascript" src = "<s: url value ="/js/alignCenter.js "/>"> </script>
3. Uma breve olhada nos métodos de chamada no JSP
<a onclick = "ViewLogistics (Event, '<S: Property Value ="#lrvo.logisticno "/>)" href = "###"> <s: name de texto "Struts.webui.logistics.label.view"/> </a>
Quando o usuário clica no link Detalhes do registro da linha, o método da camada de exibição é chamado e o valor de identificação do registro é passado para o método de chamada. De fato, cada camada é distinguida por um valor de atributo de identificação desse registro.
function viewLogistics (evento, 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); }Quanto ao papel dos parâmetros de eventos no método, não é muito claro, e isso precisa ser investigado novamente. O efeito final é como mostrado na figura abaixo. À medida que o mouse se move para baixo, a camada pode se mover dinamicamente.
O exposto acima é o código de exemplo da janela flutuante pop-up de controle JS (tela de lista) introduzida a você pelo editor. Espero que seja útil para você. Se você quiser saber mais informações, siga o site Wulin.com!