우리는 원래 많은 옵션을 가진 매우 긴 형태였습니다. 고객 피드백은 충분히 친절하지 않고보기 쉽습니다. 따라서 다단계 진행 상황과 다중 제출 구현을 달성하기위한 개선이 이루어집니다 (실제로는 하나의 양식 제출 만 있습니다).
구현 아이디어 : 양식의 옵션을 여러 DIV에로드하고, 하나는 보여주고, 다른 하나는 숨겨져 있습니다 .
효과는 다음과 같습니다.
1. JavaScript 코드
<script type = "text/javaScript"src = "js/jquery.js"> </script> <script type = "text/javaScript"src = "js/jquery-powerfloat.js"> </script> <링크 릴 = "스타일 시트"href = "css/powerfloat.css"type "text/css" " 유형 = "text/javaScript"> $ (function () {$ ( ". pwdtrigger"). PowerFloat ({eventType : "focus", targetMode : "Remind", TargetAttr : "PlaceHolder", "placeHolder", "2-1"});});}); $ ( "#one"). hide (); $ ( "#two"). show (); $ ( "#grxx"). attr ( "class", "current_prev"); $ ( "#zjxx"). attr ( "class", "current"); }} function two () {if (확인 ( "convice?")) {$ ( "#two"). hide (); $ ( "#3"). show (); $ ( "#grxx"). attr ( "class", "done"); $ ( "#zjxx"). attr ( "class", "current_prev"); $ ( "#qzxx"). attr ( "class", "current"); }} 함수 3 () {if (확인 ( "convice?"))) {$ ( "#3"). hide (); $ ( "#4"). show (); $ ( "#grxx"). attr ( "class", "done"); $ ( "#zjxx"). attr ( "class", "done"); $ ( "#qzxx"). attr ( "class", "current_prev"); $ ( "#qzfs"). attr ( "class", "current"); }} function reone () {if (확인 ( "확인?")) {$ ( "#one"). show (); $ ( "#two"). hide (); $ ( "#grxx"). attr ( "class", "current"); $ ( "#zjxx"). attr ( "class", ""); }} function retwo () {if (확인 ( "확인?")) {$ ( "#3"). hide (); $ ( "#two"). show (); $ ( "#grxx"). attr ( "class", "current_prev"); $ ( "#zjxx"). attr ( "class", "current"); $ ( "#qzxx"). attr ( "class", ""); }} function rethree () {if (확인 ( "확인?")) {$ ( "#4"). hide (); $ ( "#3"). show (); $ ( "#grxx"). attr ( "class", "done"); $ ( "#zjxx"). attr ( "class", "current_prev"); $ ( "#qzxx"). attr ( "class", "current"); $ ( "#qzfs"). attr ( "class", "last") ;; }} </script>2. CSS 코드
<스타일 유형 = "text/css">. float_steps ul li {float : 왼쪽; 높이 : 23px; 패딩 : 0 40px 0 30px; 라인 높이 : 23px; 텍스트 정렬 : 센터; 배경 : URL (img/barbg.png) No-Repeat 100% 0 #e4e4; 글꼴 중량 : BOLD;}. FLOW_STEPS UL LI.DONE {배경 위치 : 100% -46px; 배경색 :#ffeda2;}. flow_steps ul li.current_prev {배경 위치 : 100% -23px; 배경색 :#ffeda2;}. flow_steps ul li.current {color : #fff; 배경색 :#990d1b;}. flow_steps ul li.lias {background-image : none;} </style>3. HTML 코드
<body> <table> <td> <td> <div> <ul Style = "List-Style-Type : None"> <li id = "grxx"> 개인 정보 </li> <li id = "zjxx"> 면책 정보 </li> <li id = "qzxx"> 서명 </li> <li id = "qzfs"> divs " </td> </tr> <tr> <td> <form action = ""> <div id = "one"> <table align = "center"> <tr> <td> 위치 위치 : </td> <td> <입력 유형 = "text"placeholder = "가구 등록 위치에 입력하십시오"</td> <tr> <td> </td> <td> <input type = "text"placeholder = "중국 성을 입력하십시오"/> </td> </tr> <tr> <td> 중국어 이름 : </td> <td> <입력 유형 = "text"placeholder = "중국어 이름을 입력하십시오"/> </td> </td> <td> <td> <td> <td> <td> <td> ID 번호 "/> </td> </td> <tr> <td colspan ="2 "> <버튼 유형 ="button "onclick ="one () "> 제출 </button> </td> </tr> </taper> </div> <div> id ="two "style ="<td> <td> <td> id = <td> <td> id = 유형 = "text"placeholder = "ID 번호를 입력하십시오"/> </td> </td> </tr> <tr> <td> </td> <td> <input type = "text"placeholder = "ID 번호를 입력하십시오"/> </td> <td> <td> <td> <intup type = "plateholder" /> </td> </tr> <tt> <td> 연락처 번호 </td> <td> <입력 유형 = "text"placeholder = "연락처 번호를 입력하십시오."휴대 전화 번호를 입력하는 것이 좋습니다. "/> </td> </tr> <td> <td> <button type ="two bultion = "two button" "> button> onclick = "reone ()"> previous </button> </td> </tr> </table> </div> <div id = "Three"style = "display : none"> <테이블 align = "center"> <td> <td> 부호 카테고리 </td> <td> <td> <td> <td> </td> </td> </td> </td> <td> 장소로 이동 </td> <td> <입력 유형 = "text"placeholder = "대상을 입력하십시오"/> </td> <tr> <td> visa type </td> <td> <입력 유형 = "text"placeholder = "Visa 유형을 입력하십시오"</td> <tr> <td> <td> <td> < "flutty" onclick = "Three ()"> 제출 </button> </td> <td> <button type = "button"onclick = "retwo ()"> previous </td> </td> </tr> </table> </div> <div id = "four"style = ""중심 "> <td> <td> 유형 = "text"placeholder = "증거 수집 방법을 입력하십시오"/> </td> </tr> <td> <td> <td> <td> <버튼 유형 = "button" "onclick =" ""> 제출 </button> </td> <td> <버튼 유형 = "button"onclick = "rethree ()" "> previous </td> </td> </tab> </tab> </tab> </tab> </td> </tr> </table> </body> </html>
소스 코드 다운로드 : http://xiazai.vevb.com/201606/yuanma/javaScript-formshow(Vevb.com).rar
위의 내용은이 기사에 관한 모든 것이며, 모든 사람이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.