Jquery导航,向导,下一步工具
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Smart Wizard 2 - Step Validation Example - a javascript jQuery wizard control plugin</title><link href="styles/demo_style.css" rel="stylesheet" type="text/css"><link href="styles/smart_wizard.css" rel="stylesheet" type="text/css"><script type="text/javascript" src="js/jquery-1.4.2.min.js"></script><script type="text/javascript" src="js/jquery.smartWizard-2.0.min.js"></script><script type="text/javascript">var _gaq = _gaq || [];_gaq.push(['_setAccount', 'UA-18629864-1']);_gaq.push(['_trackPageview']);(function() { var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; var s = document.getElementsByTagName('script'); s.parentNode.insertBefore(ga, s);})();</script><script type="text/javascript"> $(document).ready(function(){ // Smart Wizard $('#wizard').smartWizard({transitionEffect:'slideleft',onLeaveStep:leaveAStepCallback,onFinish:onFinishCallback,enableFinishButton:true}); function leaveAStepCallback(obj){ var step_num= obj.attr('rel'); return validateSteps(step_num); } function onFinishCallback(){ if(validateAllSteps()){ $('form').submit(); } } }); function validateAllSteps(){ var isStepValid = true; if(validateStep1() == false){ isStepValid = false; $('#wizard').smartWizard('setError',{stepnum:1,iserror:true}); }else{ $('#wizard').smartWizard('setError',{stepnum:1,iserror:false}); } if(validateStep3() == false){ isStepValid = false; $('#wizard').smartWizard('setError',{stepnum:3,iserror:true}); }else{ $('#wizard').smartWizard('setError',{stepnum:3,iserror:false}); } if(!isStepValid){ $('#wizard').smartWizard('showMessage','Please correct the errors the steps and continue'); } return isStepValid; } function validateSteps(step){var isStepValid = true; // validate step 1 if(step == 1){ if(validateStep1() == false ){ isStepValid = false; $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.'); $('#wizard').smartWizard('setError',{stepnum:step,iserror:true}); }else{ $('#wizard').smartWizard('setError',{stepnum:step,iserror:false}); } } // validate step3 if(step == 3){ if(validateStep3() == false ){ isStepValid = false; $('#wizard').smartWizard('showMessage','Please correct the errors in step'+step+ ' and click next.'); $('#wizard').smartWizard('setError',{stepnum:step,iserror:true}); }else{ $('#wizard').smartWizard('setError',{stepnum:step,iserror:false}); } } return isStepValid; }function validateStep1(){ var isValid = true; // Validate Username var un = $('#username').val(); if(!un && un.length <= 0){ isValid = false; $('#msg_username').html('Please fill username').show(); }else{ $('#msg_username').html('').hide(); } // validate password var pw = $('#password').val(); if(!pw && pw.length <= 0){ isValid = false; $('#msg_password').html('Please fill password').show(); }else{ $('#msg_password').html('').hide(); } // validate confirm password var cpw = $('#cpassword').val(); if(!cpw && cpw.length <= 0){ isValid = false; $('#msg_cpassword').html('Please fill confirm password').show(); }else{ $('#msg_cpassword').html('').hide(); } // validate password match if(pw && pw.length > 0 && cpw && cpw.length > 0){ if(pw != cpw){ isValid = false; $('#msg_cpassword').html('Password mismatch').show(); }else{ $('#msg_cpassword').html('').hide(); } } return isValid; } function validateStep3(){ var isValid = true; //validate emailemail var email = $('#email').val(); if(email && email.length > 0){ if(!isValidEmailAddress(email)){ isValid = false; $('#msg_email').html('Email is invalid').show(); }else{ $('#msg_email').html('').hide(); } }else{ isValid = false; $('#msg_email').html('Please enter email').show(); } return isValid; } // Email Validation function isValidEmailAddress(emailAddress) { var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.({2,6}(?:\.{2})?)$)|(@\[?((25\.|2\.|1{2}\.|{1,2}\.))((25|2|1{2}|{1,2})\.){2}(25|2|1{2}|{1,2})\]?$)/i); return pattern.test(emailAddress); } </script></head><body><div class="demoHead"> <h1>Smart Wizard 2.0 - a javascript jQuery wizard control plugin</h1><h2>Step Validation Example</h2><br /> <script type="text/javascript"><!-- google_ad_client = "pub-8226185437441708"; /* TechDemoTop 728x90 */ google_ad_slot = "7531608375"; google_ad_width = 728; google_ad_height = 90; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script><br />&nbsp; <br /><a href="index.htm" class="btn">Basic Example</a><a href="smartwizard2-ajax.htm" class="btn">Ajax Contents</a><a href="smartwizard2-validation.php" class="selected">Step Validation</a> <a href="smartwizard2-multiple.htm" class="btn">Multiple Wizard</a><a href="smartwizard2-vertical.htm" class="btn">Vertical Style</a><a href="http://techlaboratory.net/products.php?product=smartwizard" class="btn">Go Home</a><a href="http://techlaboratory.net/products.php?product=smartwizard&action=2" class="btn">Documentation</a></div><table align="center" border="0" cellpadding="0" cellspacing="0"><tr><td><strong>form is sumbitted</strong> <form action="#" method="POST"><input type='hidden' name="issubmit" value="1"><!-- Tabs --><div id="wizard" class="swMain"><ul><li><a href="#step-1"> <label class="stepNumber">1</label> <span class="stepDesc"> Account Details<br /> <small>Fill your account details</small> </span> </a></li><li><a href="#step-2"> <label class="stepNumber">2</label> <span class="stepDesc"> Profile Details<br /> <small>Fill your profile details</small> </span> </a></li><li><a href="#step-3"> <label class="stepNumber">3</label> <span class="stepDesc"> Contact Details<br /> <small>Fill your contact details</small> </span> </a></li><li><a href="#step-4"> <label class="stepNumber">3</label> <span class="stepDesc"> Other Details<br /> <small>Fill your other details</small> </span> </a></li></ul><div id="step-1"> <h2 class="StepTitle">Step 1: Account Details</h2> <table cellspacing="3" cellpadding="3" align="center"> <tr> <td align="center" colspan="3">&nbsp;</td> </tr> <tr> <td align="right">Username :</td> <td align="left"> <input type="text" id="username" name="username" value="" class="txtBox"> </td> <td align="left"><span id="msg_username"></span>&nbsp;</td> </tr> <tr> <td align="right">Password :</td> <td align="left"> <input type="password" id="password" name="password" value="" class="txtBox"> </td> <td align="left"><span id="msg_password"></span>&nbsp;</td> </tr> <tr> <td align="right">Confirm Password :</td> <td align="left"> <input type="password" id="cpassword" name="cpassword" value="" class="txtBox"> </td> <td align="left"><span id="msg_cpassword"></span>&nbsp;</td> </tr> </table> </div><div id="step-2"> <h2 class="StepTitle">Step 2: Profile Details</h2> <table cellspacing="3" cellpadding="3" align="center"> <tr> <td align="center" colspan="3">&nbsp;</td> </tr> <tr> <td align="right">First Name :</td> <td align="left"> <input type="text" id="firstname" name="firstname" value="" class="txtBox"> </td> <td align="left"><span id="msg_firstname"></span>&nbsp;</td> </tr> <tr> <td align="right">Last Name :</td> <td align="left"> <input type="text" id="lastname" name="lastname" value="" class="txtBox"> </td> <td align="left"><span id="msg_lastname"></span>&nbsp;</td> </tr> <tr> <td align="right">Gender :</td> <td align="left"> <select id="gender" name="gender" class="txtBox"> <option value="">-select-</option> <option value="Female">Female</option> <option value="Male">Male</option> </select> </td> <td align="left"><span id="msg_gender"></span>&nbsp;</td> </tr> </table> </div> <div id="step-3"> <h2 class="StepTitle">Step 3: Contact Details</h2> <table cellspacing="3" cellpadding="3" align="center"> <tr> <td align="center" colspan="3">&nbsp;</td> </tr> <tr> <td align="right">Email :</td> <td align="left"> <input type="text" id="email" name="email" value="" class="txtBox"> </td> <td align="left"><span id="msg_email"></span>&nbsp;</td> </tr> <tr> <td align="right">Phone :</td> <td align="left"> <input type="text" id="phone" name="phone" value="" class="txtBox"> </td> <td align="left"><span id="msg_phone"></span>&nbsp;</td> </tr> <tr> <td align="right">Address :</td> <td align="left"> <textarea name="address" id="address" class="txtBox" rows="3"></textarea> </td> <td align="left"><span id="msg_address"></span>&nbsp;</td> </tr> </table> </div><div id="step-4"> <h2 class="StepTitle">Step 4: Other Details</h2> <table cellspacing="3" cellpadding="3" align="center"> <tr> <td align="center" colspan="3">&nbsp;</td> </tr> <tr> <td align="right">Hobbies :</td> <td align="left"> <input type="text" id="phone" name="phone" value="" class="txtBox"> </td> <td align="left"><span id="msg_phone"></span>&nbsp;</td> </tr> <tr> <td align="right">About You :</td> <td align="left"> <textarea name="address" id="address" class="txtBox" rows="5"></textarea> </td> <td align="left"><span id="msg_address"></span>&nbsp;</td> </tr> </table> </div></div><!-- End SmartWizard Content --></form> </td></tr></table> <center><br />&nbsp; <script type="text/javascript"><!--google_ad_client = "pub-8226185437441708";/* TechDemoBottom 728x90 */google_ad_slot = "4801936038";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript"src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script><br />&nbsp; </center> </body></html>
页:
[1]