Первоначально мы были очень длинной формой со многими вариантами. Отзывы клиентов недостаточно дружелюбны и легко увидеть. Следовательно, улучшения сделаны для достижения многоэтапного прогресса и реализации множественных представлений (на самом деле, есть только одна подчинение формы).
Идея реализации: загрузите параметры формы в несколько DOV, один показывает, остальные прячутся .
Эффект заключается в следующем:
1. Код Javascript
<script type = "text/javascript" src = "js/jquery.js"> </script> <script type = "text/javascript" src = "js/jquery-powerfloat.js"> </script> <link rel = "styleshipt" href = "css/powerfloat.css" types/cspipt "/cspipt href =" css/powerfloat.css ' type = "text/javascript"> $ (function () {$ (".. Pwdtrigger"). Powerfloat ({eventtype: "Focus", TargetMode: "напомнить", targetAttr: "Placeholder", позиция: "2-1"});}); </script> <script type = "text/javascript"> function One () (). $ ("#One"). Hide (); $ ("#2"). Show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("class", "current"); }} function Two () {if (sefint ("Подтверждение Commit?")) {$ ("#два"). Hide (); $ ("#третий"). Show (); $ ("#grxx"). attr ("class", "Dode"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("class", "current"); }} function three () {if (sefint ("Подтверждение Commit?")) {$ ("#three"). Hide (); $ ("#четыре"). Show (); $ ("#grxx"). attr ("class", "Dode"); $ ("#zjxx"). attr ("class", "dode"); $ ("#qzxx"). attr ("class", "current_prev"); $ ("#qzfs"). attr ("class", "current"); }} function reone () {if (sefint ("Подтвердить возврат?")) {$ ("#One"). Show (); $ ("#2"). Hide (); $ ("#grxx"). attr ("class", "current"); $ ("#zjxx"). attr ("class", ""); }} function retwo () {if (sefint ("Подтвердить возврат?")) {$ ("#three"). Hide (); $ ("#2"). Show (); $ ("#grxx"). attr ("class", "current_prev"); $ ("#zjxx"). attr ("class", "current"); $ ("#qzxx"). attr ("class", ""); }} function rethree () {if (sefint ("Подтвердить возврат?")) {$ ("#четыре"). Hide (); $ ("#третий"). Show (); $ ("#grxx"). attr ("class", "Dode"); $ ("#zjxx"). attr ("class", "current_prev"); $ ("#qzxx"). attr ("class", "current"); $ ("#qzfs"). attr ("class", "last") ;; }} </script>2. CSS -код
<style type = "text/css">. flow_steps ul li {float: left; Высота: 23px; Заполнение: 0 40px 0 30px; высота линии: 23px; Текст-альбом: Центр; Предпосылки: URL (img/barbg.png) без повторного перепорачивания 100% 0 #e4e4; Font-Weight: Bold;}. Flow_steps ul li.done {founal-Position: 100% -46px; фоновый цвет:#ffeda2;}. flow_steps ul li.current_prev {background-position: 100% -23px; фоновый цвет:#ffeda2;}. flow_steps ul li.current {color: #fff; Фоно-цвета:#990d1b;}. Flow_steps ul li.last {founal-image: none;} </style>3. HTML -код
<body> <table> <tr> <td> <div> <ul style = "list-style-type: none"> <li id = "grxx"> личная информация </li> <li id = "zjxx"> Информация об отказе от ответственности </li> <li id = "qzxx"> Записать информацию </li> <li id = "qzfs" </td> </tr> <tr> <td> <form action = ""> <div id = "one"> <table align = "center"> <tr> <td> Место местоположения: </td> <td> <Input Type = "Text" Placeholder = "Пожалуйста, введите местоположение вашего домохозяйства"/> </td> </tr> <tr> <td> <td> <td> </td> <td> <td> <td> </td> </td> <td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> </td> type = "text" Placeholder = "Пожалуйста, введите китайскую фабрику"/> </td> </tr> <tr> <td> китайское имя: </td> <td> <input type = "text" Placeholder = "Пожалуйста, введите китайское имя"/> </td> </tr> <tr> <td> идентификационный номер. /></td> </tr> <tr> <td colspan="2"> <button type="button" onclick="one()">Submit</button> </td> </tr> </table> </div> <div> id="two" style="display: none"> <table align="center"> <tr> <td>Pass number</td> <td><input type="text" Placeholder = «Пожалуйста, введите идентификационный номер»/> </td> </tr> <tr> <td> Дата истечения срока действия до </td> <td> <input type = "text" Placeholder = "Пожалуйста, введите идентификационный номер"/> </td> </tr> <tr> <td> контактный номер </td> <td> <input type = "Textholder =" пожалуйста " <tr> <td> контактный номер </td> <td> <input type = "text" Placeholder = "Пожалуйста, введите контактный номер, рекомендуется быть номером мобильного телефона"/> </td> </tr> <tr> <td> <tood Type = "Кнопка" Onclick = "Two ()"> Sope </td> </td> <td> onclick="reone()">Previous</button> </td> </tr> </table> </div> <div id="three" style="display: none"> <table align="center"> <tr> <td>Sign-name category</td> <td><input type="text" placeholder="please enter the signature-name category" /></td> </tr> <tr> <Td> Перейдите в место </td> <td> <input type = "text" Placeholder = "Пожалуйста, введите место назначения"/> </td> </tr> <tr> <td> виза типа </td> <td> <pint Type = "Text" Placeholder = "Пожалуйста, введите тип виза"/> </td> </tr> <tr> <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" Placeholder = "Пожалуйста, введите метод сбора доказательств"/> </td> </tr> <tr> <td> <button Type = "onclick =" "> отправить </button> </td> <td> <Кнопка Type =" onclick = "rethree ()"> Предыдущий </td> </td> </tr> </trclick = "rethree ()"> </td> </tr> </table> </body> </html>
Скачать исходный код: http://xiazai.vevb.com/201606/yuanma/javascript-formshow(vevb.com).rar
Выше приведено все об этой статье, и я надеюсь, что для всех будет полезно изучить программирование JavaScript.