Nós éramos originalmente uma forma muito longa com muitas opções. O feedback do cliente não é amigável o suficiente e fácil de ver. Portanto, são feitas melhorias para alcançar o progresso de várias etapas e a implementação de vários envios (de fato, existe apenas um envio de formulário).
Idéia de implementação: carregue as opções do formulário em várias divs, um mostra, os outros se escondem .
O efeito é o seguinte:
1. Código JavaScript
<script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/jQuery-powerfloat.js"> </script> <link rel = "stylesheet" href = "css/powerfllo type = "text/javascript"> $ (function () {$ (". pwdtrigger"). $ ("#um"). hide (); $ ("#dois"). show (); $ ("#grxx"). Att ("classe", "current_prev"); $ ("#ZJXX"). Att ("classe", "atual"); }} função dois () {if (confirm ("Confirm Commit?")) {$ ("#dois"). hide (); $ ("#três"). show (); $ ("#grxx"). Att ("classe", "feito"); $ ("#ZJXX"). Att ("classe", "current_prev"); $ ("#qzxx"). Att ("classe", "atual"); }} função três () {if (confirm ("Confirm Commit?")) {$ ("#três"). hide (); $ ("#quatro"). show (); $ ("#grxx"). Att ("classe", "feito"); $ ("#ZJXX"). Att ("classe", "done"); $ ("#qzxx"). Att ("classe", "current_prev"); $ ("#qzfs"). Att ("classe", "atual"); }} function reone () {if (confirm ("Confirm Return?")) {$ ("#um"). show (); $ ("#dois"). hide (); $ ("#grxx"). Att ("classe", "atual"); $ ("#ZJXX"). Att ("classe", ""); }} função retwo () {if (confirm ("Confirm Return?")) {$ ("#três"). hide (); $ ("#dois"). show (); $ ("#grxx"). Att ("classe", "current_prev"); $ ("#ZJXX"). Att ("classe", "atual"); $ ("#qzxx"). Att ("classe", ""); }} função Rethree () {if (confirm ("Confirm Return?")) {$ ("#quatro"). hide (); $ ("#três"). show (); $ ("#grxx"). Att ("classe", "feito"); $ ("#ZJXX"). Att ("classe", "current_prev"); $ ("#qzxx"). Att ("classe", "atual"); $ ("#qzfs"). Att ("classe", "última") ;; }} </script>2. Código CSS
<style type = "text/css">. Flow_Steps ul li {float: esquerda; Altura: 23px; preenchimento: 0 40px 0 30px; altura de linha: 23px; Alinhamento de texto: centro; Antecedentes: URL (img/barbg.png) sem repetir 100% 0 #e4e4; Fonte-peso: Bold;}. Flow_Steps Ul Li.Done {Posição de fundo: 100% -46px; Background-Color:#ffeda2;}. FLOW_STEPS UL LI.CURRENT_PREV {Posição de fundo: 100% -23px; Background-color:#ffeda2;}. Flow_Steps ul li.Current {color: #fff; Background-Color:#990D1B;}. FLOW_STEPS UL LI.LAST {Background-Image: None;} </yley>3. Código HTML
<Body> <table> <tr> <td> <div> <ul style = "list-estilo-tyle: nenhum"> <li id = "grxx"> informações pessoais </li> <li id = "zjxx"> Informações <lift </li> <li id = "qzxx"> Sign-up Information </li> <li od = qzfs " </td> </tr> <tr> <td> <form ação = ""> <div id = "One"> <tabela align = "Center"> <tr> <t> <td> localização: </td> <td> <input type = "text" stayholder = "Por favor, digite a localização da sua família"/> </td "</trd" </trd "</trd" </trd "</td" </trd "</trd" </td "<rg" <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <tr> <rpedholder = "Por favor, digite o local da sua família"/> </td "</trd" TIPO = "TEXT" PLAGEIDADOR DO "Por favor, digite o sobrenome chinês"/> </td> </tr> <tr> <td> Nome chinês: </td> <td> <input type = "text" placeholder = "por favor, digite o nome chinês"/> </td> </tr> <t> <t> <t> <tigy). /> </td> </tr> <tr> <td colspan = "2"> <botão type = "button" onclick = "One ()"> submit </butut> </td> </tr> </tabela> </div> <div> id = "dois" style = "Display: nenhum número"> <tabela align = "center"> <tr> espaço reservado = "Por favor, digite o número do ID"/> </td> </tr> <tr> <td> data de expiração até </td> <td> <input type = "text" placeholder = "digite o número do ID"/> </td> </tr> <tr> <Td> Número </td> <td> <input> typenging = </t> <tr> <Td> Número </td> <td> <input> <Td> type = </tr> <t> <td> número "Platanet> <Td> <Td> </tr> <tr> <td> Número de contato </td> <td> <input type = "text" someholder = "Por favor, digite o número do contato, é recomendável ser um número de telefone celular"/> </td> </tr> </trd> </td> <butt type = "botão onclick =" ") ONCLICK = "REONE ()"> anterior </botão> </td> </tr> </tabela> </div> <div id = "três" style = "display: none"> <tabela align = "central"> <tr> <td> categoria de sinal </td> </td> <buster>/"text> <td>", por favor, digitora </td> <TD> <buster> <buster type = "text> scatender =" <Td> Vá para o local </td> <td> <input type = "text" placeholder = "Por favor, digite o destino"/> </td> </tr> <tr> <td> visa type </td> <td> </typ type = "text" placeholder = "por favor, digite o tipo de visa"/> </td> </" onclick="three()">Submit</button> </td> <td> <button type="button" onclick="retwo()">Previous</button> </td> </td> </tr> </table> </div> <div id="four" style="display: none"> <table align="center"> <tr> <td>Evidence collection method</td> <td><input type = "Text" Pleaseholder = "Por favor, digite o método de coleta de evidências"/> </td> </tr> <tr> <td> <botão tipo = "botão" onclick = ""> submeter </butter> </td> <td> </typen type = "Button" OnClick = "Rethree ()"> </button> </td> </td> </td> </tr> </ table> </body> </html>
Download do código-fonte: http://xiazai.vevb.com/201606/yuanma/javascript-formshowior
O exposto acima é tudo sobre este artigo, e espero que seja útil que todos aprendam programação de JavaScript.