<h1>Проскальзывающая форма ввода информации на основе jQuery</h1>  
  <div id="wrapper">  
  <div id="steps">  
  <form id="formElem" name="formElem" action="" method="post">  
  <fieldset class="step">  
  <legend>Учетная запись</legend>  
   

   
  <label for="username">Имя пользователя</label>  
  <input id="username" name="username" />  
  </p>  
   

   
  <label for="email">Email</label>  
  <input id="email" name="email" type="email" />  
  </p>  
   

   
  <label for="password">Пароль</label>  
  <input id="password" name="password" type="password" />  
  </p>  
  </fieldset>  
  <fieldset>  
  ...  
  </fieldset>  
  </form>  
  </div>  
  <div id="navigation" style="display:none;">  
  <ul>  
  <li class="selected">  
  <a href="#">Учетная запись</a>  
  </li>  
  <li>  
  <a href="#">Персональные данные</a>  
  </li>  
  <li>  
  <a href="#">Платеж</a>  
  </li>  
  <li>  
  <a href="#">Установки</a>  
  </li>  
  <li>  
  <a href="#">Подтверждение</a>  
  </li>  
  </ul>  
  </div>  
  </div>

#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;  
  }

#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.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;  
  }

$(function() {  
  /*  
  Количество наборов полей  
  */  
  var fieldsetCount = $('#formElem').children().length;  
  /*  
  текущая позиция / ссылка навигации  
  */  
  var current = 1;  
  /*  
  Складываем и сохраняем ширину каждого набора полей  
  устанавливаем общую сумму в качестве общей ширины элемента шагов  
  */  
  var stepsWidth = 0;  
  var widths = new Array();  
  $('#steps .step').each(function(i){  
  var $step = $(this);  
  widths[i] = stepsWidth;  
  stepsWidth += $step.width();  
  });  
  $('#steps').width(stepsWidth);  
  /*  
  Для исключения проблем с IE, устанавливаем фокус на первом поле в форме  
  */  
  $('#formElem').children(':first').find(':input:first').focus();
  /*  
  показываем строку навигации  
  */  
  $('#navigation').show();  
  /*  
  При нажатии кнопки мыши на навигационной ссылке форма проскальзывает  
  до соответствующего набора полей  
  */  
  $('#navigation a').bind('click',function(e){  
  var $this = $(this);  
  var prev = current;  
  $this.closest('ul').find('li').removeClass('selected');  
  $this.parent().addClass('selected');  
  /*  
  Сохраняем положение ссылки в текущей переменной  
  */  
  current = $this.parent().index() + 1;  
  /*  
  анимация / проскальзывание на соответствующий набор полей.  
  Порядок ссылок навигации соответствует порядку наборов полей  
  Также, после проскальзывания, мы переключаем фокус ввода
  на первое поле в новом наборе.  
  Если нажата последняя ссылка (подтверждение), то проверяются все наборы полей,  
  иначе мы проверяем только предыдущий набор  
  */  
  $('#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();  
  });  
  /*  
  Нажатие на закладке (на последнем поле ввода в каждом наборе), приводит
  к проскальзыванию формы на следующий шаг  
  */  
  $('#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();  
  /* включаем blur для проверки */  
  $(this).blur();  
  e.preventDefault();  
  }  
  });  
  });  
  /*  
  проверяет ошибки на всех наборах полей,  
  в случае обнаружения ошибки записывает ее в $('#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);  
  }  
  /*  
  проверяет одно поле ввода,  
  в случае ошибки возвращает -1, если ошибок нет - 1  
  */  
  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 class="'+valclass+'"></span>').insertAfter($link);  
  return error;  
  }  
  /*  
  Если есть ошибки, то форму отправить нельзя  
  */  
  $('#registerButton').bind('click',function(){  
  if($('#formElem').data('errors')){  
  alert('Пожалуйста, исправьте ошибки в форме!');  
  return false;  
  }  
  });  
  });