`
sty2008boy
  • 浏览: 302424 次
  • 性别: Icon_minigender_1
  • 来自: 太原
社区版块
存档分类
最新评论

Jquery导航,向导,下一步工具

htmljavascriptjquery 
阅读更多 
<!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')[0]; 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 email  email
      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})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{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>

 

分享到：
| JS图片另存为
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery UI向导窗口插件.zip

    1. **步骤导航**：向导插件会显示一个步骤条或按钮，让用户清楚地知道他们当前所在的位置以及下一步要做什么。这些步骤可能以数字或文字形式呈现，每个步骤都可以链接到特定的页面内容或DOM元素。 2. **前进/后退...

    jquery实现网站向导提示操作插件

    在Web开发中，向导提示操作插件是一种常见且实用的工具，它能够引导用户逐步了解网站的功能，提高用户体验。jQuery，作为一个广泛使用的JavaScript库，提供了丰富的API和功能，使得创建这样的插件变得相对简单。本文...

    jQuery填写表单带步骤指引的表单向导提示插件

    **jQuery 表单向导提示插件** ...总结来说，“jQuery填写表单带步骤指引的表单向导提示插件”是提高用户填写表单体验的有效工具，通过合理的配置和定制，可以在多种场景下发挥其优势，让表单填写变得更简单、直观。

    jquery分步向导,jwizard.js

    1. **分步导航**：`jWizard.js`能够将表单或任何HTML内容分割成多个步骤，并提供清晰的导航指示，如“第一步”、“第二步”等，用户可以通过点击“下一步”或“上一步”按钮在各步骤间切换。 2. **表单集成**：插件...

    基于jquery实现的表单向导示例，很精美哦

    在网页设计和开发中，表单向导是一种增强用户体验、引导用户逐步完成复杂表单填写的工具。本示例是基于jQuery库实现的，jQuery是一个轻量级、高性能的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax...

    jquery 向导表单

    2. **导航控制**：通常包括“上一步”、“下一步”按钮，有时还会有“跳过”或“返回”选项，便于用户在步骤间自由切换。 3. **进度指示器**：通过图形元素（如条形图或圆圈）展示当前所在步骤及总步骤数，让用户...

    jQuery响应式带进度步骤向导布局代码

    总结来说，【jQuery响应式带进度步骤向导布局代码】是一个结合了jQuery强大功能与响应式设计的实用工具，为用户提供了一种直观的多步流程导航方式。通过理解和应用这些知识点，开发者可以创建出更加用户友好和交互...

    自定义jquery-wizard插件

    - **nextstep.png, prevstep.png, finishstep.png**：这些是向导导航按钮的图片资源，分别代表“下一步”、“上一步”和“完成”操作。 - **logo.png, wizard-steps-separator.png, close.png**：其他辅助图形，...

    基于Bootstrap的表单向导

    3. **导航条（Navbar）**：Bootstrap的导航条可以定制成一个步骤指示器，显示用户当前所处的表单步骤和剩余步骤，提供导航到前一步或下一步的功能。 4. **卡片（Card）**：卡片组件可以用来包装每个步骤的内容，...

    jquery.wizard:带有 Unobtrusive API 的轻量级 jQuery 向导插件

    `jQuery Wizard` 是一个强大的工具，适合希望快速创建交互式向导的前端开发者。通过其非侵入式 API 和丰富的事件系统，开发者可以高效地控制向导的流程，同时保持代码简洁和可维护性。使用 `jQuery Wizard`，你可以...

    Jquery 步骤实例

    在本实例中，我们将深入探讨如何使用jQuery来实现一个按顺序步骤执行的页面功能，这通常应用于多步表单提交或者向导式用户界面。** ### jQuery 实现步骤实例的基础概念 1. **选择器**: jQuery 的核心是选择器，...

    jQuery分步指引介绍特效代码.zip

    总结，"jQuery分步指引介绍特效代码"是一个结合了jQuery和jQuery.mobile特性的实用工具，它能帮助开发者创建出互动性强、用户友好的引导系统。掌握这些技术，不仅有助于提升网页应用的质量，还能提升开发效率。

    用javascript作一个通用向导说明

    在Web应用中，向导是一种有效的工具，它能引导用户逐步了解和使用产品，从而提升用户体验。本教程将详细介绍如何利用JavaScript构建一个通用、灵活且简单的向导框架。 首先，我们需要理解向导的基本结构。向导通常...

    myflow-min

    开发者可以自定义何时允许用户进行下一步，例如基于表单验证或特定条件。 3. **状态管理**：myflow-min跟踪当前流程的状态，包括已完成的步骤、未完成的步骤以及错误状态。这有助于维护用户在流程中的位置，特别是...

    步骤条，申请步骤

    - **向导模式**：支持多步流程，每一步都可以包含独立的内容区域。 - **验证**：可以设置验证规则，确保用户在前进之前填写了正确的信息。 - **回调函数**：提供多种回调，如初始化、前进、后退、完成等，方便控制...

    sfwizard

    5. **验证机制**：在用户进行下一步操作前检查输入的有效性，确保数据的准确性。 6. **回调函数**：在步骤切换时触发，允许开发者执行特定逻辑，如数据校验、服务端通信等。 7. **响应式设计**：适应不同设备的屏幕...

Magicbox
Global site tag (gtag.js) - Google Analytics