Главная > Формы > Разработка поэтапной формы регистрации при помощи RhinoSlider

Разработка поэтапной формы регистрации при помощи RhinoSlider


9 августа 2012, 13:15. Разместил: Design FactoRy
Что вы чувствуете, когда перед вами предстает очень длинная форма регистрации на сайте или на страницах сервиса? В основном, людям такие длинные формы докучают. В идеальном мире такая форма должна быть максимально простой и короткой, и в ней должно быть как можно меньше полей, и если нет возможности ограничиться минимум полей, то лучше разделить форму на несколько этапов.

Одна из причин, почему Facebook и Twitter стали настолько популярными в наши дни, кроется как раз в простоте. Пользователи могут без труда авторизоваться (или зарегистрироваться) в системах.

Если вы используете обычные формы регистрации, и требуете от людей много информации, то лучше всего разделить эту форму на несколько этапов. Таким образом форма разделяется на несколько отдельных разделов, и пользователь видит эти разделы один за другим. К тому же, форма регистрации в несколько этапов требует гораздо меньше пространства на странице.

Разработка поэтапной формы регистрации при помощи RhinoSlider
Разработка поэтапной формы регистрации при помощи RhinoSlider

В нашем сегодняшнем руководстве мы хотим рассказать вам о процессе создания формы регистрации в несколько этапов используя Rhinoslider. Полагаем, что сначала вам хотелось бы ознакомиться с демо.

Демо | Скачать
Внимание! У вас нет прав для просмотра скрытого текста.


Почему Rhinoslider?

В последовательной форме регистрации как только вы закончите заполнять 1 этап, вы перейдете ко второму этапу в то время, как первый этап будет скрыт. Обычно мы используем эффект скольжения при переходе от этапа к следующему. Но сегодня мы будем применять слайдер немного иначе.

Нам доступно огромное множество отличных слайдеров, и поэтому нам не придется заново изобретать колесо, создавая слайдер с нуля. Поэтому для данного руководства мы выбрали Rhinoslider, так как он может предложить нам отличные эффекты и его очень просто настраивать. Итак, давайте приступим к разработке нашей формы.

Введение в Rhinoslider

Перед тем как перейти непосредственно к разработке формы, вам нужно уловить принцип работы RhinoSlider. Разработчики рекомендуют создавать собственные версии вместо того, чтобы использовать полную версию со всеми эффектами. Мы скачали стандартную версию для нашего руководства.

Вы можете открыть файл демо в браузере, и тогда увидите на экране нечто подобное.

Разработка поэтапной формы регистрации при помощи RhinoSlider

Итак, давайте для начала посмотрим на код демо-файла.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Multi Step Form with Rhinoslider 1.05</title>
<link type="text/css" rel="stylesheet" href="css/rhinoslider-1.05.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/rhinoslider-1.05.min.js"></script>
<script type="text/javascript" src="js/mousewheel.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slider').rhinoslider();
});
</script>
<style type="text/css">
body { background-color:#000; }

#slider {
width:600px;
height:250px;

/*IE bugfix*/
padding:0;
margin:0;
}

#slider li { list-style:none; }

#page {
width:600px;
margin:50px auto;
}
</style>
</head>
<body>
<div id="page">
<ul id="slider">
<li><img src="img/slider/01.jpg" alt="" /></li>
<li><img src="img/slider/02.jpg" alt="" /></li>
<li><img src="img/slider/03.jpg" alt="" /></li>
<li><img src="img/slider/04.jpg" alt="" /></li>
<li><img src="img/slider/05.jpg" alt="" /></li>
</ul>
</div>
</body>
</html>

* Вы можете видеть, что 5 изображений помещены в неупорядоченный список под названием #slider.
* Как только вы идентифицируете RhinoSlider посредством $(‘#slider’).rhinoslider() , все изображения будут приписаны к слайдеру, и автоматически будут переключаться.

Теперь мы знакомы с основой работы RhinoSlider, и можем приступать к разработке поэтапной формы регистрации.

Разрабатываем поэтапную форму регистрации

Нам нужно внести некоторые изменения в код инициализации, чтобы он соответствовал нашей поэтапной форме авторизации. Обратите внимание на представленный ниже код инициализации.

          $('#slider').rhinoslider({
controlsPlayPause: false,
showControls: 'always',
showBullets: 'always',
controlsMousewheel: false,
prevText: 'Back',
slidePrevDirection: 'toRight',
slideNextDirection: 'toLeft'
});

* В слайдере изображения верхняя кнопка используется для управления автоматическим воспроизведением и паузой. Нам это не потребуется в нашей форме. Так что, мы убираем кнопку, выставляя controlsPlayPause: false.
* Управление и нумерация на слайдере по умолчанию отображаются при наведении курсором мыши. Мы сделаем так, чтобы они отображались постоянно, выставив showControls: ‘always’ и showBullets: ‘always’.
* Слайдер по умолчанию переключается колёсиком мыши. Нам нужно отключить эту функцию, выставив параметр controlsMousewheel: false.
* Наконец, мы изменяем кнопку перехода к предыдущему слайду на Back.

Создаем элементы формы для этапов

Вместо изображения нам нужно будет отобразить элементы формы. В нашем демо мы создали простую форму регистрации в 3 этапа под названиями PERSONAL DETAILS, ACCOUNT DETAILS и CONTACT DETAILS. Каждый раздел будет оформлен элементами формы. Мы заменяем неупорядоченный список изображений на элементы формы, как показано ниже.

<div id="wrapper">
<h3>Account Registration</h3>

<form action="" >

<div id="slider">
<div class="form-step" >

<div class="row">
<div class="form-left">First Name *</div>
<div class="form-right"><input type="text" id="fname" name="fname" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Last Name *</div>
<div class="form-right"><input type="text" id="lname" name="lname" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Gender *</div>
<div class="form-right">
<select id="gender" name="gender">
<option value="0">Select</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select>
</div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Address</div>
<div class="form-right"><input type="text" id="address" name="address" class="form-input" /></div>
<div class="form-error"></div>
</div>

</div>
<div class="form-step" >
<div class="row">
<div class="form-left">Username *</div>
<div class="form-right"><input type="text" id="username" name="username" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Password *</div>
<div class="form-right"><input type="text" id="pass" name="pass" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Confirm Password *</div>
<div class="form-right"><input type="text" id="cpass" name="cpass" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
<div class="form-step" >
<div class="row">
<div class="form-left">Email *</div>
<div class="form-right"><input type="text" id="email" name="email" class="form-input" /></div>
<div class="form-error"></div>
</div>
<div class="row">
<div class="form-left">Mobile No</div>
<div class="form-right"><input type="text" id="mobile" name="mobile" class="form-input" /></div>
<div class="form-error"></div>
</div>
</div>
</div>
</form>
</div>

* Сначала мы добавили div под названием wrapper и заголовок под названием Account Registration.
* Затем мы заменили ul на div под названием #slider.
* Далее мы заменили пункты списка с изображениями на div’ы с классом “form-step”.
* Затем мы добавляем соответствующие поля ввода для каждого раздела.
* Как только слайдер инициализируется, div’ы с классом form-step преобразуются в слайды.

Теперь копируем изображения из папки проекта в папку вашего демо и включаем следующие CSS-стили в демо-файл.

<style type='text/css'>
body { background-color:#fff; }
#wrapper{
border: 1px solid #DCDADA;
border-radius: 5px 5px 5px 5px;
box-shadow: 2px 2px 2px #E1E1E1;
background: #fff;
width:700px;
height:480px;
background:#f4f4f4;

}
#wrapper h3{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:16px;
height:60px;
background:url(img/title.png) no-repeat left top;
margin:0;
padding:16px 0 0 20px;
text-shadow: 1px 1px 2px #000;
filter: dropshadow(color=#000, offx=1, offy=1);
color:#fff;
}
#slider {

background: #fff;
/*IE bugfix*/
padding:0;
margin:0;
width:700px;
height:400px;

}

#slider li { list-style:none; }

#page {
width:600px;
margin:50px auto;
}

#slider{
color: #000;
background:#f4f4f4;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
}

.form-step{

padding:16% 3% !important;

}

.form-submit{
cursor: pointer;
display: block;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
background: none repeat scroll 0 0 #6F95DC;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
margin: 0 20px 20px;
padding: 10px;
text-align: center;
width: 125px;
z-index: 10;
font-weight: bold;
text-decoration: none;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94b9e9), to(#4870d2));
background-image: -moz-linear-gradient(#94b9e9, #4870d2);
background-image: -webkit-linear-gradient(#94b9e9, #4870d2);
background-image: -o-linear-gradient(#94b9e9, #4870d2);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;

}

.errorDisplay{
border:2px solid red;
}

.form-left{
color: #717171;
float: left;
font-size: 13px;
font-weight: bold;
padding: 5px;
width: 200px;
}
.form-right{
float: left;
width: 214px;
}
.row{
float: left;
margin: 5px 0;
width: 100%;
}
.form-step input[type='text']{
border: 1px solid #CFCFCF;
border-radius: 4px 4px 4px 4px;
height: 25px;
padding: 3px;
width: 200px;
}
select{
border-radius: 4px;
border: 1px solid #CFCFCF;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
background: #FFF;
padding: 2px;
height: 30px;
width:205px;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
background:#f4f4f4;
}

select option{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:12px;
background:#f4f4f4;
color:#717171;
}

.form-error{
color: red;
font-size: 12px;
padding: 8px;
}

.step-error{
background:#f5715f !important;
color:#FFF !important;
-moz-box-shadow:1px 1px 4px #C6C4C4
-webkit-box-shadow:1px 1px 4px #C6C4C4
box-shadow:1px 1px 4px #C6C4C4
}
.step-success{
background:#72e487 !important;
color:#FFF !important;
-moz-box-shadow:1px 1px 1px 4px #C6C4C4
-webkit-box-shadow:1px 1px 1px 4px #C6C4C4
box-shadow:1px 1px 1px 4px #C6C4C4
}
.bullet-desc{
font-size: 14px;
font-weight: bold;
}
</style>

Теперь слайдер должен выглядеть примерно следующим образом:

Разработка поэтапной формы регистрации при помощи RhinoSlider

Теперь давайте сравним его с финальным результатом.

* левая кнопка должна быть изменена на Back
* правая кнопка должна быть изменена на Proceed
* меню нумерации в верхней панели должно быть изменено на этапы

Превращаем иконки Rhinoslider в кнопки

Сначала нам нужно убедиться в том, что мы исключили стандартные иконки, отображенные для перехода к предыдущему или следующему слайду, и вставили кнопки для перехода назад и вперед. Откройте CSS-файл в папке CSS в каталоге Rhinoslider, и измените стили rhino-btn следующим образом.

.rhino-btn {
cursor: pointer;
display: block;
position: absolute;
right: 0;
bottom: 0;
-moz-user-select: none;
background: none repeat scroll 0 0 #6F95DC;
border-radius: 5px 5px 5px 5px;
color: #FFFFFF;
display: block;
margin: 0 20px 20px;
padding: 10px;
text-align: center;
width: 125px;
z-index: 10;
font-weight: bold;
text-decoration: none;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#94b9e9), to(#4870d2));
background-image: -moz-linear-gradient(#94b9e9, #4870d2);
background-image: -webkit-linear-gradient(#94b9e9, #4870d2);
background-image: -o-linear-gradient(#94b9e9, #4870d2);
filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#94b9e9, endColorstr=#4870d2)";
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
}

А теперь взгляните на обновленную форму.

Разработка поэтапной формы регистрации при помощи RhinoSlider

Преобразуем нумерованное меню в меню этапов

Нам нужно изменить CSS-стили, связанные с нумерованным меню для того, чтобы переместить его вверх и вместо нумерации указать этапы. Итак, мы обновляем стили в CSS-файлк Rhinoslider следующим кодом:

.rhino-bullets li a.rhino-bullet {
display: block;
width: 100%;
height: 90px;
cursor: pointer;
background: none repeat scroll 0 0 #F8FDFF;
border: 1px solid #EEEEEE;
font-size: 10px;
text-align: center;
padding: 10px 0 5px 0;
color: #000;
text-decoration:none;
-webkit-user-select:none;
-moz-user-select:none;
user-select:none;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size:13px;
}
.rhino-bullets {
position: relative;
top: -438px;
z-index: 10;
background: #fff;
padding:0;
float:left;
}

.rhino-bullets:before, .rhino-bullets:after {
position:absolute;
display:block;
left:-16px;
content:' ';
width:16px;
height:26px;

}

.rhino-bullets li {
float:left;
display:inline;
margin:0;
width: 233px;
}

.rhino-bullets li a.rhino-bullet.rhino-active-bullet {
color:#000;
background:#fff;
border-bottom: none;
}

Теперь все произведенные изменения в CSS должны выглядеть следующим образом:

Разработка поэтапной формы регистрации при помощи RhinoSlider

Добавляем описания этапов

Вместо того чтобы использовать числа для этапов, нам нужно использовать описательный текст об этапе и изображение. Итак, добавьте следующий код сразу после части инициализации слайдера.

            var info = ["PERSONAL DETAILS","ACCOUNT DETAILS","CONTACT DETAILS"];
var images = ["personal-details-icon.png","account-details.png","contact-details.png"];

$('.rhino-bullet').each(function(index){
var link_text = $(this).html();
var description = $("#rhino-item"+(link_text-1)).attr("data");

$(this).html('<p style="margin: 0pt; font-size: 13px; font-weight: bold;"><img src="./img/'+images[index]+'"></p><p class="bullet-desc">'+info[index]+'</p></a>');
});

* Теперь у нас есть 2 массива для изображений и описаний. Вставьте текст и изображения в соответствии с вашими этапами.
* Каждый этап имеет класс под названием rhino-bullet. Так что, при прохождении каждого этапа, мы заменяем число изображением и текстом из массива.

Так выглядит наша форма после того, как мы добавили текст и изображение.

Разработка поэтапной формы регистрации при помощи RhinoSlider

Настройка кнопок управления

В слайдере мы видим кнопки перехода назад и вперед на каждом слайде. Но в случае с поэтапной формой регистрации нам не нужна кнопка перехода назад в первом этапе. Давайте посмотрим, как мы можем избавиться от нее.

$(".rhino-prev").hide();
$('.rhino-next').after('<a class="form-submit" href="javascript:void(0);" >Proceed</a>');
$(".rhino-next").hide();

* Когда страница загружена, активный слайд всегда будет в первом разделе. Так что, прячьте кнопку Back с помощью $(“.rhino-prev”).hide().
* Затем, перед тем как перейти к следующему этапу, нам нужно валидировать форму. Так что, мы скрываем стандартный текст кнопки слайдера Rhinoslider, и вставляем кнопку Proceed, как показано выше.

Валидация этапов формы

Этап нам нужно завершить до того, как мы перейдем к следующему в поэтапной форме регистрации. В данном разделе мы расскажем вам о том, как добавить валидацию каждого этапа.

$('.form-submit').live("click",function(){

$('.form-error').html("");

var current_tab = $('#slider').find('.rhino-active').attr("id");

switch(current_tab){
case 'rhino-item0':
step1_validation();
break;
case 'rhino-item1':
step2_validation();
break;
case 'rhino-item2':
step3_validation();
break;
}
});

var step1_validation = function(){

var err = 0;

if($('#fname').val() == ''){
$('#fname').parent().parent().find('.form-error').html("First Name is Required");
err++;
}
if($('#lname').val() == ''){
$('#lname').parent().parent().find('.form-error').html("Last Name is Required");
err++;
}
if($('#gender').val() == '0'){
$('#gender').parent().parent().find('.form-error').html("Please Select Gender");
err++;
}
if(err == 0){
$(".rhino-active-bullet").removeClass("step-error").addClass("step-success");
$(".rhino-next").show();
$('.form-submit').hide();
$('.rhino-next').trigger('click');
}else{
$(".rhino-active-bullet").removeClass("step-success").addClass("step-error");
}

};

* Наша кнопка Proceed имеет класс form-submit. Так что, при каждом клике по этой кнопке, вызывается функция валидирования.
* Вероятно, вы уже обнаружили, что текущая вкладка использует класс rhino-active. Затем, основываясь на этом этапе, вы можете вызывать собственную функцию валидации.
* Мы показали необходимые валидации для этапа 1 в вышеприведенном коде. Валидации для других этапов можно найти в файлах проекта.
* Если во время валидации была выявлена ошибка, мы отображаем ошибки рядом с полем, и выделяем этап красным цветом с помощью применения к активному этапу класса step-error.
* Если ошибок обнаружено не было, то этап окрашивается зеленым цветом за счет класса step-success.
* Затем мы скрываем нашу собственную кнопку proceed, и отображаем стандартный текст кнопки перехода на следующий этап из Rhinoslider.
* Затем мы делаем так, что клик по кнопке next будет производиться автоматически. Реализуется это за счет функции $(‘.rhino-next’).trigger(‘click’).

Ниже вы можете видеть примеры успешной валидации и выявленной ошибки.

Разработка поэтапной формы регистрации при помощи RhinoSlider

Настройка плагина Rhinoslider

Сейчас мы переходим к финальной части руководства. Нам нужно будет внести некоторые изменения в стандартный функционал Rhinoslider для того, чтобы всё работало так, как нам нужно. В демо, которое у нас сейчас имеется, вы уже можете кликать по этапам, и переходить от одного к другому. Давайте научимся отключать это.

Отключаем возможность кликать по этапам

Откройте файл rhinoslider-1.05.min.js, который находится в папке js, и закомментируйте следующий раздел кода, который отвечает за функционал кликов.

vars.buttons.bullets.click(function(){
var itemID=$(this).attr('id').replace('-bullet','');
var $next=vars.container.find('#'+itemID);
var curID=parseInt(vars.navigation.find('.'+vars.prefix+'active-bullet').attr('id').replace('-bullet','').replace(vars.prefix+'item',''),10);
var nextID=parseInt(itemID.replace(vars.prefix+'item',''),10);
if(curID&lt;nextID){
next($slider,settings,$next);
}else if(curID&gt;nextID){
prev($slider,settings,$next);
}else{
return false;
}
if(settings.autoPlay){
pause();
}
});

Настраиваем функционал кнопки перехода к предыдущему этапу

В первом этапе мы скрыли кнопку перехода к предыдущему слайду. Теперь нам нужно показать ее в других этапах. Итак, давайте настроим функционал кнопки перехода к предыдущему этапу в Rhinoslider таким образом, чтобы он соответствовал нашим требованиям.

vars.buttons.prev.click(function(){

prev($slider,settings);
if(settings.autoPlay){
pause();
}
});

Вышеприведенный код отображает нам стандартный функционал предыдущей функции. Давайте изменим его на следующий:

vars.buttons.prev.click(function(){
$(".rhino-next").hide();
$('.form-submit').show();
$('.form-submit').html("Proceed");

if(($slider.find('.rhino-active').index()) != 0){

prev($slider,settings);
}
if($slider.find('.rhino-active').index() == 1){
$(".rhino-prev").hide();
}

if(settings.autoPlay){
pause();
}
});

* Каждый раз, когда кто-то кликает по кнопке перехода к предыдущему этапу, по умолчанию будет загружаться кнопка next. Так что нам нужно собственноручно спрятать её, и сперва отобразить кнопку подтверждения формы.
* Строка $slider.find(‘.rhino-active’).index() даст вам индекс активного этапа.
* Если этап 1 становится активным, мы скрываем кнопку перехода к предыдущему этапу. Либо мы вызываем стандартный функционал кнопки, используя calling prev($slider,settings) .

Настраиваем функционал кнопки перехода вперед (next)

Нам также нужно отредактировать функционал кнопки перехода вперед в Rhinoslider таким образом, чтобы она отвечала нашим требованиям. Давайте посмотрим, как она работает.

vars.buttons.next.click(function(){
next($slider,settings);
if(settings.autoPlay){
pause();
}
});

Вышеприведенный код показывает стандартный функционал предыдущей функции. Давайте заменим его следующим.

vars.buttons.next.click(function(){
$(".rhino-next").hide();
$('.form-submit').show();
$(".rhino-prev").show();

if($slider.find('.rhino-active').index() != ($slider.find('.rhino-item').length -1)){
next($slider,settings);
}
if($slider.find('.rhino-active').index() == ($slider.find('.rhino-item').length -2)){
$('.form-submit').html("Submit");

}

if(settings.autoPlay){
pause();
}
});

* Нам нужно скрыть кнопку перехода вперед, и отобразить нашу собственную кнопку подтверждения формы при каждом нажатии кнопки next, как мы делали это ранее, с предыдущей кнопкой.
* Нам также нужно отобразить кнопку перехода к предыдущему этапу (back).
* Затем мы отображаем Submit в качестве текста кнопки, если форма находится на первом этапе.
* Если активный этап не является последним, нам нужно вызвать next($slider,settings) для того, чтобы перейти к следующему этапу.

Итак, мы закончили процесс разработки поэтапной формы регистрации с помощью Rhinoslider. Сейчас у вас должно получиться нечто похожее на то, что вы видели в демо. Мы рекомендуем вам скачать Rhinoslider и проследовать по этапам руководства, чтобы собственноручно создать форму, чем просто рассматривать файлы проекта. Наконец, сравните вашу версию с демо, и внесите необходимые изменения.

Настройка поэтапной формы регистрации

Теперь у нас есть готовая форма, состоящая из 3 этапов. Теперь вы без труда сможете добавлять или исключать этапы, чтобы форма соответствовала вашим требованиям. Используйте следующие рекомендации по настройке

* Добавляйте или исключайте описания этапов посредством массива info.
* Добавляйте или исключайте изображения посредством массива images.
* Добавляйте или исключайте функции валидации для этапов.
* Настройте ширину класса rhino-bullets li так, чтобы он соответствовал вашим требованиям.

Завершение

Всего за пару часов вы сможете привыкнуть к работе с Rhinoslider, и собственноручно создать поэтапную форму регистрации. Нам кажется, что вам стоит попробовать сделать это, чтобы уметь разрабатывать формы, которые бы отвечали вашим нуждам и подходили бы под ваши проекты.

При разработке коммерческих проектов у вас вряд ли будет время создавать все с нуля. Поэтому такие заготовки помогут вам быстрее выполнить задачу, и вам останется лишь подкорректировать некоторые моменты.

Некоторые люди любят создавать все с нуля, некоторые любят просто копировать и вставлять код, а некоторые любят учиться чему-то новому, а уже потом использовать знания в проектах. Расскажите, что вы думаете по поводу данного руководства, и оказалось ли оно полезным для вас.
Вернуться назад