今天，我们将创建一个漂亮的滑动表单，在每个步骤之后向用户显示一些验证反馈。这个表单节省了很多空间，而且很容易访问——它基本上就像一个幻灯片显示，只是我们有一个表单的字段集而不是图像。
所以让我们开始吧!
HTML将由包装容器组成，我们将在其中放置一个带有fieldset的表单。每个fieldset将是我们滑动表单中的一个步骤:
<h1>Fancy Sliding Form with jQuery</h1><div id="wrapper"> <div id="steps"> <form id="formElem" name="formElem" action="" method="post"> <fieldset>Confirm</a> </li> </ul> </div></div>与步骤的所有链接的导航将是一个最初隐藏的无序列表。我们将在JavaScript函数中显示它。
让我们看看它的风格。
CSS主包装器和步骤容器将具有以下样式:
#wrapper{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; border:2px solid #fff; background-color:#f9f9f9; width:600px; overflow:hidden;}#steps{ width:600px; overflow:hidden;}.step{ float:left; width:600px;}这个类步骤将被分配给每个字段集。让我们风格的导航:
#navigation{ height:45px; background-color:#e9e9e9; border-top:1px solid #fff; -moz-border-radius:0px 0px 10px 10px; -webkit-border-bottom-left-radius:10px; -webkit-border-bottom-right-radius:10px; border-bottom-left-radius:10px; border-bottom-right-radius:10px;}#navigation ul{ list-style:none; float:left; margin-left:22px;}#navigation ul li{ float:left; border-right:1px solid #ccc; border-left:1px solid #ccc; position:relative; margin:0px 2px;}单个链接元素将有一个整洁的CSS3渐变背景:
#navigation ul li a{ display:block; height:45px; background-color:#444; color:#777; outline:none; font-weight:bold; text-decoration:none; line-height:45px; padding:0px 20px; border-right:1px solid #fff; border-left:1px solid #fff; background:#f0f0f0; background: -webkit-gradient( linear, left bottom, left top, color-stop(0.09, rgb(240,240,240)), color-stop(0.55, rgb(227,227,227)), color-stop(0.78, rgb(240,240,240)) ); background: -moz-linear-gradient( center bottom, rgb(240,240,240) 9%, rgb(227,227,227) 55%, rgb(240,240,240) 78% )}#navigation ul li a:hover,#navigation ul li.selected a{ background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}当步骤得到验证时，我们将添加一个span，表示一切都很好，或者一个span表示表单步骤有问题:
span.checked{ background:transparent url(../images/checked.png) no-repeat top left; position:absolute; top:0px; left:1px; width:20px; height:20px;}span.error{ background:transparent url(../images/error.png) no-repeat top left; position:absolute; top:0px; left:1px; width:20px; height:20px;}表单元素的样式如下:
#steps form fieldset{ border:none; padding-bottom:20px;}#steps form legend{ text-align:left; background-color:#f0f0f0; color:#666; font-size:24px; text-shadow:1px 1px 1px #fff; font-weight:bold; float:left; width:590px; padding:5px 0px 5px 10px; margin:10px 0px; border-bottom:1px solid #fff; border-top:1px solid #d9d9d9;}#steps form p{ float:left; clear:both; margin:5px 0px; background-color:#f4f4f4; border:1px solid #fff; width:400px; padding:10px; margin-left:100px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa;}#steps form p label{ width:160px; float:left; text-align:right; margin-right:15px; line-height:26px; color:#666; text-shadow:1px 1px 1px #fff; font-weight:bold;}#steps form input:not([type=radio]),#steps form textarea,#steps form select{ background: #ffffff; border: 1px solid #ddd; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; outline: none; padding: 5px; width: 200px; float:left;}#steps form input:focus{ -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background-color:#FFFEEF;}#steps form p.submit{ background:none; border:none; -moz-box-shadow:none; -webkit-box-shadow:none; box-shadow:none;}#steps form button { border:none; outline:none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; color: #ffffff; display: block; cursor:pointer; margin: 0px auto; clear:both; padding: 7px 25px; text-shadow: 0 1px 1px #777; font-weight:bold; font-family:"Century Gothic", Helvetica, sans-serif; font-size:22px; -moz-box-shadow:0px 0px 3px #aaa; -webkit-box-shadow:0px 0px 3px #aaa; box-shadow:0px 0px 3px #aaa; background:#4797ED;}#steps form button:hover { background:#d8d8d8; color:#666; text-shadow:1px 1px 1px #fff;}现在，让我们添加一些JavaScript魔法!
JavaScript在我们的函数中，我们将首先处理滑块的显示。我们需要计算内部元素的宽度。当我们通过输入的时候，我们也会注意到滑动。当用户在一个字段集的最后一个输入中点击tab时，我们会使下一个字段集滑动到位，并将焦点集中在第一个字段上。
表单的验证基于所有需要字段的输入。如果我们滑到下一个字段集，并且没有填写上一个字段的所有输入，我们将用红色背景标记缺少的输入，并将我们的小错误空间添加到导航项。如果一切正常，我们将用check标记添加span，以便用户知道，步骤是正确的。如果其中一个步骤包含错误，我们将不允许用户提交表单。
$(function() { /* number of fieldsets */ var fieldsetCount = $('#formElem').children().length; /* current position of fieldset / navigation link */ var current = 1; /* sum and save the widths of each one of the fieldsets set the final sum as the total width of the steps element */ var stepsWidth = 0; var widths = new Array(); $('#steps .step').each(function(i){ var $step = $(this); widths[i] = stepsWidth; stepsWidth += $step.width(); }); $('#steps').width(stepsWidth); /* to avoid problems in IE, focus the first input of the form */ $('#formElem').children(':first').find(':input:first').focus(); /* show the navigation bar */ $('#navigation').show(); /* when clicking on a navigation link the form slides to the corresponding fieldset */ $('#navigation a').bind('click',function(e){ var $this = $(this); var prev = current; $this.closest('ul').find('li').removeClass('selected'); $this.parent().addClass('selected'); /* we store the position of the link in the current variable */ current = $this.parent().index() + 1; /* animate / slide to the next or to the corresponding fieldset. The order of the links in the navigation is the order of the fieldsets. Also, after sliding, we trigger the focus on the first input element of the new fieldset If we clicked on the last link (confirmation), then we validate all the fieldsets, otherwise we validate the previous one before the form slided */ $('#steps').stop().animate({ marginLeft: '-' + widths[current-1] + 'px' },500,function(){ if(current == fieldsetCount) validateSteps(); else validateStep(prev); $('#formElem').children(':nth-child('+ parseInt(current) +')').find(':input:first').focus(); }); e.preventDefault(); }); /* clicking on the tab (on the last input of each fieldset), makes the form slide to the next step */ $('#formElem > fieldset').each(function(){ var $fieldset = $(this); $fieldset.children(':last').find(':input').keydown(function(e){ if (e.which == 9){ $('#navigation li:nth-child(' + (parseInt(current)+1) + ') a').click(); /* force the blur for validation */ $(this).blur(); e.preventDefault(); } }); }); /* validates errors on all the fieldsets records if the form has errors in $('#formElem').data() */ function validateSteps(){ var FormErrors = false; for(var i = 1; i < fieldsetCount; ++i){ var error = validateStep(i); if(error == -1) FormErrors = true; } $('#formElem').data('errors',FormErrors); } /* validates one fieldset and returns -1 if errors found, or 1 if not */ function validateStep(step){ if(step == fieldsetCount) return; var error = 1; var hasError = false; $('#formElem').children(':nth-child('+ parseInt(step) +')').find(':input:not(button)').each(function(){ var $this = $(this); var valueLength = jQuery.trim($this.val()).length; if(valueLength == ''){ hasError = true; $this.css('background-color','#FFEDEF'); } else $this.css('background-color','#FFFFFF'); }); var $link = $('#navigation li:nth-child(' + parseInt(step) + ') a'); $link.parent().find('.error,.checked').remove(); var valclass = 'checked'; if(hasError){ error = -1; valclass = 'error'; } $('<span>这是它!我希望你喜欢这个滑动式的想法!