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

最新推荐文章于 2024-10-10 07:29:16 发布
最新推荐文章于 2024-10-10 07:29:16 发布
阅读量375 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： JavaScript JQuery 文章标签： html javascript jquery ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/sty2008boy/article/details/84017511 
<!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>

 

JQuery实现步骤条效果(上一步,下一步)
chuangdiuzhuang6335的博客
08-02 4554
之前做出的步骤条是利用easyui +jquery实现的，但是他在隐藏板块的时候用到的是display:none,这会使我在板块中加载的js失效，所以换了一种方式，用Position。把元素脱离文档流移出视觉区域，添加该属性后既不会影响布局，又能让元素保持可以操作。应用该属性后，主要就是通过控...
jquery 上一步 下一步 完成 关闭
04-07
自己写的jquery 显示隐藏 上一步，下一步，完成，关闭文档
网页向导.例如(上一步,下一步这种操作)
09-12
有兴致的:41229007来群交流 提供了jar包和doc文档 使用时。实现一个stepname接口作为步骤名称。继承一个AbstractDataSource用于存数据. Operator就是操作下一步还是上一步
jQuery的页面功能向导插件Pageguide.js
ldl_xz的专栏
06-19 2433
jQuery的页面功能向导插件Pageguide.js
jquery 导航固定的一个实例
weixin_34368949的博客
02-14 93
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta h
Winform中模仿实现上一步、下一步的导航页面
每天进步一点点
07-29 8070
    经常看到有人询问在winform中怎么实现类似安装向导那样的上一步、下一步的页面,这个如果在ASP.NET中实现起来比较简单，无非就是多个panel交替显示罢了，可是在winform中控制起来就没有那么容易了，本人用tabControl做了一个简单实现，可以满足一般的要求，具体实现过程如下：1.新建一个winform工程，在窗体上添加tabControl控件2.设置tabContr
jQuery UI向导窗口插件.zip
07-04
1. **步骤导航**：向导插件会显示一个步骤条或按钮，让用户清楚地知道他们当前所在的位置以及下一步要做什么。这些步骤可能以数字或文字形式呈现，每个步骤都可以链接到特定的页面内容或DOM元素。 2. **前进/后退...
jQuery填写表单带步骤指引的表单向导提示插件
10-31
**jQuery 表单向导提示插件** ...总结来说，“jQuery填写表单带步骤指引的表单向导提示插件”是提高用户填写表单体验的有效工具，通过合理的配置和定制，可以在多种场景下发挥其优势，让表单填写变得更简单、直观。
jquery 向导表单
04-16
2. **导航控制**：通常包括“上一步”、“下一步”按钮，有时还会有“跳过”或“返回”选项，便于用户在步骤间自由切换。 3. **进度指示器**：通过图形元素（如条形图或圆圈）展示当前所在步骤及总步骤数，让用户...
jquery实现网站向导提示操作插件
03-19
在Web开发中，向导提示操作插件是一种常见且实用的工具，它能够引导用户逐步了解网站的功能，提高用户体验。jQuery，作为一个广泛使用的JavaScript库，提供了丰富的API和功能，使得创建这样的插件变得相对简单。本文...
jquery.wizard:带有 Unobtrusive API 的轻量级 jQuery 向导插件
07-06
`jQuery Wizard` 是一个强大的工具，适合希望快速创建交互式向导的前端开发者。通过其非侵入式 API 和丰富的事件系统，开发者可以高效地控制向导的流程，同时保持代码简洁和可维护性。使用 `jQuery Wizard`，你可以...
jquery.min.js，很好用的基础插件
10-09
jquery.min.js插件，实际运用项目中还是很好用。分享出来大家一起共享，如果大家觉得不错，希望能给个好评。
jQuery Smart Wizard:很棒的 jQuery 步骤向导插件-开源
06-28
项目已移动，请在此处查看最新版本 http://techlaboratory.net/jquery-smartwizard Smart Wizard 是一个灵活的 jQuery 插件，提供类似向导的界面。 向导通常用于向用户提供逐步的内容，它提供更好和干净的用户界面并节省空间。
jquery-smartwizard：很棒的jQuery步骤向导插件
02-02
jQuery Smart Wizard v5 很棒的jQuery步骤向导插件。 jQuery Smart Wizard是jQuery的可访问步骤向导插件。 为您的表单，结帐屏幕，注册步骤等提供简洁时尚的界面。易于实现，Bootstrap兼容性，可自定义的工具栏，主题，事件和Ajax支持是其中的少数功能。 演示版 屏幕截图 要求 （从jQuery-1.11.1 +到最新的jQuery-3.5的支持） 安装 npm install smartwizard yarn add smartwizard composer require techlab/smartwizard <!-- CSS --> < link href =" https://cdn.jsdelivr.net/npm/smartwizard@5/dist/css/smart_wizard_all.min.css " rel =" stylesheet " type =" text/css " /> <!-- JavaScript --> < script src =" https://cdn.jsdelivr.net/
html成长日记step-1
qq_36456834的博客
10-20 312
html登录
(转)jquery.validate分组验证
jackyrongvip的专栏
07-27 184
http://www.cnblogs.com/wangjq/archive/2011/03/13/1983024.html 在很多时候，我们都不是一步就将所有信息填写完整，然后提交。而是分步进行填写表单，如下所示： 第一步填写基本信息， 第二步填写教育信息 要求我们每一步操作都要进行验证，这样我们可以用以下方式进行验证： view sourcepr...
jQuery Smart Wizard 项目教程
最新发布
gitblog_00126的博客
10-10 1230
jQuery Smart Wizard 项目教程 1. 项目目录结构及介绍 jquery-smartwizard/ ├── dist/ │ ├── css/ │ │ ├── smart_wizard_all.min.css │ │ └── smart_wizard_theme_arrows.min.css │ └── js/ │ ├── jquery.smart...
jquery smartWizard插件的使用
wjs7740的专栏
10-16 5465
jquery的smartWizard插件常用在一些向导式的，按步骤的功能中，是的用户按照我们设定的步骤进行操作，这样一方面有较好的用户体验，可以将庞大的表格数据分解成多个步骤，是的每个步骤的数据量减少；另一方面流程比较清晰，先做那个下一步做什么都是可控可设定的。 下面说一下如何使用，首先html中引入jquery的smartWizard插件对应的jquery.smartWizard-2.0.
jquery validate (jquery 验证的三种方式)
MJZ_优快云的专栏
05-27 4478
jquery  验证非常简单，下面总结常用的三种方式： 第一种方式：也是比较标准的方式：  首先引入jquery  插件和 jquery 验证插件： 第一步：引入插件 第二步： 定义表单的错误输出：   #frm label.error { color: Red; } 第三步：添加错误处理方法； jquery验证，需要有
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值