预览表单,查看后确认提交或者返回중填 XML/HTML 코드 复主代码 代码如下: <필드세트> 등록 사용자 이름: 비밀번호 : 이메일 : 국가 : 국가 선택 미국 영국 중국 성별 : 남성 여성 구독하기: </ 스크립트><br> </div> <p>자바스크립트 코드</p> <p></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="69937" class="copybut" id="copybut69937" onclick="doCopy('code69937')"><u>复主代码</u></a></span> 代码如下:</div> <div class="codebody" id="code69937"> <br><script> <br>$(document).ready(function() { <br> $('#myform').previewForm(); <br>}); <br> previewForm.js 复主代码 代码如下: (함수($){ $.fn.previewForm = function(options){ var form_settings = $.extend({ 식별자 : 'label', show_password : true, extratext : '제출하시겠습니까?' , yes : '예', no : 'no', title : '미리보기하세요' }, options); var dia_log; var renderBUTTON ; var this_frm; this_frm = $(this); $(this).submit(함수 (){ if($('#pfomdata').length){ return true; } dia_log=""; var needle_cnfrm; if(this.id.length > 0){ needle_cnfrm = '#' this.id ' label'; } else { needle_cnfrm = '.' $(this).attr('class') ' 라벨'; } $(needle_cnfrm).each(function(i,val) { if($(this).text().length >2){ what_t= $ ('#' $(this).attr('for')) ; switch(what_t.prop('type')){ case 'password': if(!form_settings .show_password) dia_log =$(this).text() " 선택한 비밀번호"; else dia_log =$(this).text() what_t.val() " "; break; case 'select-one': dia_log =$(this).text() $('#' $(this).attr('for ') ' option:selected').text() ""; break; case 'radio': if( what_t.is(':checked')) dia_log =$(this).text() ' ' what_t.val() ""; break; case 'checkbox': if( what_t.is( ':checked')) dia_log =$(this).text() ' ' what_t.val() ""; break; case 'undefine': break; 기본값: dia_log =$(this).text() what_t.val() ""; break; } } }); dia_log = dia_log.replace('undefine', ''); renderBUTTON=""; renderBUTTON = '' form_settings.yes ''; renderBUTTON = '' form_settings.no ''; var renderTemplate = [ '', ' ', '',form_settings.title,'', '',dia_log,'', '',form_settings.extratext,'', '', renderBUTTON, '' ].join(''); $(renderTemplate).hide().appendTo('body'). fadeIn(); $(".form_yes") .click(function(){ var input = $("").attr("type", "hidden") .attr("id", "pfomdata").val("true"); this_frm.append($(input)); this_frm.submit(); }); $(".form_no") .click(function(){ $('#previewOverlay').fadeOut(function(){ $(this).remove(); } ); }); return false; }); }})(jQuery); previewForm.css 复主代码 代码如下: #previewOverlay{ 너비:100%; 높이:100%; 위치:고정; 상단:0; 왼쪽:0; 배경 :url('ie.png'); 배경: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6)) 반복-x rgba(11 ,11,11,0.2); 배경:-webkit-gradient(선형, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11, 11,11,0.6))) 반복-x rgba(11,11,11,0.2); z-index:100000;} #previewBox{ 배경:url('body_bg.jpg') 반복-x 왼쪽 하단 #e5e5e5; 폭:460px; 위치:고정; 왼쪽:50%; 상위:50%; 여백:-130px 0 0 -230px; 테두리: 1px 단색 rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입; box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) 삽입;} #previewBox h1,#previewBox p{ font:26px/1 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif; 배경:url('header_bg .jpg') 반복-x 왼쪽 하단 #f5f5f5; 패딩: 18px 25px; 텍스트 그림자: 1px 1px 0 rgba(255, 255, 255, 0.6); 색상:#666;} #previewBox h1{ 문자 간격:0.3px; 색상:#888;} #previewBox p{ 배경:없음; 글꼴 크기:16px; 줄 높이:1.4; 패딩 상단: 7px;} #previewButtons{ 패딩:15px 0 25px; text-align:center;} #previewBox .button{ display:inline-block; 배경:url('buttons.png') no-repeat; color:white; 위치:상대적; 높이: 33px; 글꼴: 17px/33px 'Cuprum','Lucida Sans Unicode', 'Lucida Grande', sans-serif; 여백-오른쪽: 15px; 패딩: 0 35px 0 40px; 텍스트 장식:없음; 테두리:없음;} #previewBox .button:last-child{ margin-right:0;} #previewBox .버튼 범위{ 위치:절대; 상단:0; 오른쪽:-5px; 배경:url('buttons.png') 반복 없음; 너비:5px; 높이:33px} #previewBox .form_yes{ 배경 위치:왼쪽 상단;text-shadow:1px 1px 0 #5889a2;}#previewBox .form_yes 범위{ 배경 위치:-195px 0;}#previewBox . form_yes:hover{ 배경 위치:왼쪽 하단;}#previewBox .form_yes:hover 범위{ 배경 위치:-195px 하단;} #previewBox .form_no{ 배경 위치:-200px 상단;텍스트-그림자:1px 1px 0 #707070;}#previewBox .form_no 범위{ 배경 위치:-395px 0;}#previewBox .form_no:hover{ 배경 위치:-200px 하단;}#previewBox .form_no:hover 범위{ 배경-위치:-395px 하단;}
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
