预览表单、查看後确认提交、または返還重充填 XML/HTML コード 复制代代码如下: <フィールドセット> 登録 <表のセル間隔="0"> ユーザー名: パスワード: 電子メール: 国 : 国を選択 米国 英国 中国 性別: 男性 女性 購読してください: </スクリプト><BR></div></P> <P>JavaScript コード</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> プレビューフォーム.js 复制代 代码如下: (function($){ $.fn.previewForm = function(options){ var form_settings = $.extend({ identifier : 'label', show_password : true, extratext : '送信しますか' , yes : 'はい', no : 'いいえ', title : 'プレビューしてください' }, options); var dia_log; var renderBUTTON ; var this_frm; this_frm = $(this); $(this).submit(function (){ 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 '未定義': break; デフォルト: dia_log =$(this).text() what_t.val() ""; break; } } }); dia_log = dia_log.replace('unknown', ''); 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); プレビューフォーム.css 复制代码代码如下: #previewOverlay{ width:100%; height:100%; position:fixed; top:0; left:0; background :url('ie.png'); background: -moz-linear-gradient(rgba(11,11,11,0.1), rgba(11,11,11,0.6))repeat-x rgba(11) ,11,11,0.2); background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(11,11,11,0.1)), to(rgba(11, 11,11,0.6)))repeat-x rgba(11,11,11,0.2); z-index:100000;} #previewBox{ background:url('body_bg.jpg')repeat-x 左下 #e5e5e5; width:460px; position:fixed; left:50%; top:50%; margin:-130px 0 0 -230px; border: 1px ソリッド rgba(33, 33, 33, 0.6); -moz-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; -webkit-box-shadow: 0 0 2px rgba(255, 255, 255, 0.6) inset; 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; background:url('header_bg .jpg')repeat-x 左下 #f5f5f5; padding: 18px 25px; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.6); color:#666;} #previewBox h1{ letter-spacing:0.3px; color:#888;} #previewBox p{ background:none; font-size:16px; line-height:1.4; padding-top: 7px;} #previewButtons{ padding:15px 0 25px; text-align:center;} #previewBox .button{ display:inline-block; background:url('buttons.png') no-repeat; color:white; position:relative; 高さ: 33px; font:17px/33px 'Cuprum'、'Lucida Sans Unicode'、'Lucida Grande'、サンセリフ; margin-right: 15px;パディング: 0 35px 0 40px; text-decoration:none; border:none;} #previewBox .button:last-child{ margin-right:0;} #previewBox .button scan{ position:absolute; top:0; right:-5px; background:url('buttons.png') no-repeat; 幅:5px; 高さ:33px} #previewBox .form_yes{ background-position:left top;text-shadow:1px 1px 0 #5889a2;}#previewBox .form_yes span{ background-position:-195px 0;}#previewBox 。 form_yes:hover{ background-position:leftbottom;}#previewBox .form_yes:hover scan{ background-position:-195pxbottom;} #previewBox .form_no{ background-position:-200px top;text-shadow:1px 1px 0 #707070;}#previewBox .form_no span{ background-position:-395px 0;}#previewBox .form_no:hover{ background-position:-200pxbottom;}#previewBox .form_no:hover scan{ background-position:-395pxbottom;}
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
