Wir waren ursprünglich eine sehr lange Form mit vielen Optionen. Kundenfeedback ist nicht freundlich genug und leicht zu sehen. Daher werden Verbesserungen vorgenommen, um mehrstufige Fortschritte und mehrfache Einsendungen zu erzielen (tatsächlich gibt es nur eine Formulareinreichung).
Implementierungsidee: Laden Sie die Optionen des Formulars in mehrere DIVs, wie man zeigt, die anderen verstecken sich .
Der Effekt ist wie folgt:
1. JavaScript -Code
<script type = "text/javaScript" src = "js/jQuery.js"> </script> <script type = "text/javaScript" src = "js/jQuery-powerfloat.js"> </script> <link rel = "stylesheet" href = "css/tower float.css type = "text/javaScript"> $ (function () {$ (". $ ("#Eins"). Hide (); $ ("#zwei"). Show (); $ ("#grxx"). attr ("Klasse", "current_prev"); $ ("#zjxx"). attr ("Klasse", "aktuell"); }} Funktion zwei () {if ("bestätigen (" bestätigen? ") {$ ("#zwei "). hide (); $ ("#drei"). Show (); $ ("#grxx"). Attr ("Klasse", "Done"); $ ("#zjxx"). attr ("Klasse", "current_prev"); $ ("#qzxx"). attr ("Klasse", "aktuell"); }} Funktion drei () {if ("bestätigen (" bestätigen? ") {$ ("#drei "). hide (); $ ("#vier"). Show (); $ ("#grxx"). Attr ("Klasse", "Done"); $ ("#ZJXX"). Attr ("Klasse", "Done"); $ ("#qzxx"). attr ("Klasse", "current_prev"); $ ("#qzfs"). attr ("Klasse", "aktuell"); }} Funktion reone () {if (bestätigen ("bestätigen (" return? ") {$ ("#eins "). show (); $ ("#zwei"). Hide (); $ ("#grxx"). attr ("Klasse", "aktuell"); $ ("#ZJXX"). Attr ("Klasse", ""); }} Funktion retwo () {if (bestätigen ("bestätigen (" return? ") {$ ("#drei "). hide (); $ ("#zwei"). Show (); $ ("#grxx"). attr ("Klasse", "current_prev"); $ ("#zjxx"). attr ("Klasse", "aktuell"); $ ("#qzxx"). Attr ("Klasse", ""); }} function redree () {if (bestätigen ("bestätigen (" return? ") {$ ("#vier "). hide (); $ ("#drei"). Show (); $ ("#grxx"). Attr ("Klasse", "Done"); $ ("#zjxx"). attr ("Klasse", "current_prev"); $ ("#qzxx"). attr ("Klasse", "aktuell"); $ ("#qzfs"). Attr ("Klasse", "Last") ;; }} </script>2. CSS -Code
<style type = "text/css">. FLOW_STEPS UL LI {Float: links; Höhe: 23px; Polsterung: 0 40px 0 30px; Zeilenhöhe: 23px; Text-Align: Mitte; Hintergrund: URL (IMG/Barbg.png) No-Repeat 100% 0 #e4e4; Schriftgewicht: BOLD;}. FLOW_STEPS UL LI.Done {Hintergrundposition: 100% -46px; Hintergrundfarbe:#ffeda2;}. FLOW_STEPS UL Li.current_prev {Hintergrundposition: 100% -23px; Hintergrundfarbe:#ffeda2;}. Flow_Steps ul li.current {color: #fff; Hintergrundfarbe:#990D1B;}. FLOW_STEPS UL Li.last {Hintergrund-Image: Keine;} </style>3. HTML -Code
<body> <table> <tr> <td> <div> <ul style = "list-style-type: keine"> <li id = "grxx"> Personalinformationen </li> <li id = "zjxx"> Haftungsausschlussinformationen </li> <li id = "qzxx"> Anmelden Informationen </li> <li id = "qzfs" qzfs "qzfs" qzfs "qzfs" qzfs "qzfs" qzfs "qzfs" </td> </tr> <tr> <td> <Form Action = ""> <div id = "eins"> <table align = "center"> <tr> <td> Ort Ort: </td> <td> <Eingabe type = "text" placeholder = "Bitte geben Sie den Standort Ihrer Haushaltsregistrierung ein. type = "text" placeholder = "Bitte geben Sie den chinesischen Nachnamen ein"/> </td> </tr> <tr> <td> chinesischer Name: </td> <td> <Eingabe type = "text" placeholder = "Bitte geben Sie den chinesischen Namen ein. /> </td> </tr> <tr> <td colspan = "2"> <button type = "button" onclick = "eins ()"> Senden </taste> </td> </tr> </table> </div> <div> id = "zwei" style = "display: keine Placeholder = "Bitte geben Sie die ID -Nummer ein. </tr> <tr> <td> Kontaktnummer </td> <td> <Eingabe type = "text" placeholder = "Bitte geben Sie die Kontaktnummer ein. Es wird empfohlen, eine Mobiltelefonnummer zu sein. onclick = "reone ()"> vorher </button> </td> </tr> </table> </div> <div id = "drei" style = "display: keine"> <table Align = "center"> <tr> <td> Sign-name-Kategorie eingeben. <td> Gehen Sie zu dem Ort </td> <td> <Eingabe type = "text" placeholder = "Bitte geben Sie das Ziel ein. onclick = "drei ()"> enden </button> </td> <td> <button type = "button" onclick = "retwo ()"> vorher </button> </td> </td> </tr> </table> </div> <div id = "four" style = "display: keine type = "text" placeholder = "Bitte geben Sie die Evidence Collection -Methode ein"/> </td> </tr> <tr> <td> <button type = "button" onclick = ""> enden </button> </td> <td> <button type = "button" onclick = "rethe:" </td> </tr> </table> </body> </html>
Quellcode herunterladen: http://xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
Das obige dreht sich alles um diesen Artikel, und ich hoffe, dass es für alle hilfreich sein wird, JavaScript -Programme zu lernen.