Originalmente éramos una forma muy larga con muchas opciones. Los comentarios de los clientes no son lo suficientemente amigables y fáciles de ver. Por lo tanto, se realizan mejoras para lograr un progreso en varios pasos y la implementación de múltiples presentaciones (de hecho, solo hay una presentación de formulario).
Idea de implementación: Cargue las opciones del formulario en múltiples divs, uno muestra, los otros se esconden .
El efecto es el siguiente:
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/powerfloat.css" type = "text/css"/cs "/cs" script " type = "text/javaScript"> $ (function () {$ (". pwdtrigger"). powerFloat ({eventType: "focus", targetMode: "recordar", targetAttr: "placeholder", posicion: "2-1"});}); </script> <script tipo = "text/javaScript> function one () {if (" ("confirmar?") $ ("#uno"). Hide (); $ ("#dos"). show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("clase", "actual"); }} función dos () {if (confirmar ("confirmar confirmar?")) {$ ("#dos"). Hide (); $ ("#tres"). show (); $ ("#grxx"). attr ("clase", "hecho"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("clase", "actual"); }} función tres () {if (confirmar ("confirmar confirmar?")) {$ ("#tres"). Hide (); $ ("#cuatro"). show (); $ ("#grxx"). attr ("clase", "hecho"); $ ("#zjxx"). attr ("clase", "hecho"); $ ("#qzxx"). attr ("class", "current_prev"); $ ("#qzfs"). attr ("clase", "actual"); }} function reone () {if (confirmar ("confirmar return?")) {$ ("#one"). show (); $ ("#dos"). Hide (); $ ("#grxx"). attr ("clase", "actual"); $ ("#zjxx"). attr ("clase", ""); }} función retwo () {if (confirmar ("confirmar return?")) {$ ("#tres"). Hide (); $ ("#dos"). show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("clase", "actual"); $ ("#qzxx"). attr ("clase", ""); }} function retHree () {if (confirmar ("confirmar return?")) {$ ("#cuatro"). hide (); $ ("#tres"). show (); $ ("#grxx"). attr ("clase", "hecho"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("clase", "actual"); $ ("#QZFS"). attr ("clase", "último") ;; }} </script>2. Código CSS
<style type = "text/css">. flow_steps ul li {float: izquierda; Altura: 23px; relleno: 0 40px 0 30px; Línea de altura: 23px; Text-Align: Center; Antecedentes: URL (img/Barbg.png) No-Repeat 100% 0 #E4E4; Font-Weight: Bold;}. Flow_steps ul Li.done {Posición de fondo: 100% -46px; Color de fondo:#ffeda2;}. Flow_steps ul Li.Current_Prev {Posición de fondo: 100% -23px; Color de fondo:#ffeda2;}. Flow_steps ul li.Current {color: #fff; Color de fondo:#990d1b;}. Flow_steps ul li.last {background-image: none;} </style>3. Código HTML
<Body> <Able> <tr> <TD> <div> <ul style = "list-style-type: ninguno"> <li id = "grxx"> información personal </li> <li id = "zjxx"> información de descargo de responsabilidad </li> <li id = "qzxx"> Información de registro </li> <li Id = "Qzfs"> Método de certificación </li> </ul> </td> </tr> <tr> <td> <form de action = ""> <div id = "one"> <table align = "centro"> <tr> <tr> <td> ubicación ubicación: </td> <td> <input type = "text" placeholder = "Por favor, ingrese la ubicación de su registro de su hogar"/> </td> </tr> <tr> <TD> chino: </td> <td> type = "Text" PlaceHolder = "Ingrese el apellido chino"/> </td> </tr> <tr> <td> Nombre chino: </td> <td> <input type = "text" de poseholder = "por favor ingrese el nombre chino"/> </td> </tr> <tr> <tr> <td> número de tarjeta de identidad: </td> <td> <put type = "Texter de texter =" por favor " /> </td> </tr> <tr> <td colspan = "2"> <button type = "button" onClick = "one ()"> Enviar </botón> </td> </tr> </table> </div> <div> id = "two" style = "visual PlaceHolder = "Ingrese el número de identificación"/> </td> </tr> <tr> <td> fecha de expiración hasta que </td> <td> <input type = "text" placeholder = "por favor ingrese el número de identificación"/> </td> </tr> <tr> <td> número de contacto </td> <td> <rype = "text" lugar holdender = "por favor, ingrese el número de id" </tr> <tr> <td> número de contacto </td> <td> <input type = "text" placeholder = "Por favor, ingrese el número de contacto, se recomienda que sea un número de teléfono móvil"/> </td> </tr> <tr> <tr> <td> <botón type = "botón" en el botón ondclick = "dos ()"> enviar </botón> </td> <td> <button type = "button" button " onClick = "reone ()"> anterior </boton> </td> </tr> </table> </div ID = "tres" style = "Display: None"> <table Align = "Center"> <tr> <td> Sign-Name </td> <td> <input type = "text" placeholder = "por favor ingrese la categoría de la firma"/> <tategoría </td> <TR> <trur. <TD> Vaya al lugar </td> <td> <input type = "text" placeholder = "por favor ingrese el destino"/> </td> </tr> <tr> <td> type de visa </td> <td> <input type = "text" lexter = "por favor ingrese el tipo de visa"/> </td> </tr> <tr> <tr> <tr> <tr> <botón type = "button type" onClick = "Three ()"> Enviar </botón> </td> <td> <button type = "button" onClick = "retwo ()"> anterior </boton> </td> </td> </tr> </table> </div> <d <d identi = "cuatro" style = "visual type = "text" placeLAder = "Por favor ingrese el método de recolección de evidencia"/> </td> </tr> <tr> <tr> <td> <button type = "button" onClick = ""> Enviar </botón> </td> <td> <button type = "botón" OnClick = "Rethree ()"> Anterior </Button> </td> </tr> </tr> </table> </td> </tr> </table> </body> </html>
Descarga del código fuente: http://xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
Lo anterior se trata de este artículo, y espero que sea útil para todos aprender la programación de JavaScript.