Логин:
Пароль:
Страница 1 из 11
Форум » О uCoz » Скрипты » Прогресс бар для формы регистрации
Прогресс бар для формы регистрации
AndreyДата: Понедельник, 20.04.2015, 15:45:22 | Сообщение # 1
Технарь
Offline
3

Симпатичный прогресс бар для формы регистрации, с приятным эффектом перелистывания

Мой тест на Фидле

Создаем разметку формы:
Код
<form id="msform">
     <!-- Сам прогресс бар -->
     <ul id="progressbar">
     <li class="active">Настройка учетной записи</li>
     <li>Социальные профили</li>
     <li>Персональные настройки</li>
     </ul>

     <fieldset>
     <h2 class="fs-title">Создайте свой аккаунт</h2>
     <h3 class="fs-subtitle">Шаг 1</h3>
     <input type="text" name="email" placeholder="Email">
     <input type="password" name="pass" placeholder="Пароль">
     <input type="password" name="cpass" placeholder="Повтор пароля">
     <input type="button" name="next" class="next action-button" value="Далее">
     </fieldset>

     <fieldset>
     <h2 class="fs-title">Социальные профили</h2>
     <h3 class="fs-subtitle">Введите ваши соц. сети</h3>
     <input type="text" name="twitter" placeholder="Twitter">
     <input type="text" name="facebook" placeholder="Facebook">
     <input type="text" name="gplus" placeholder="Google Plus">
     <input type="button" name="previous" class="previous action-button" value="Назад">
     <input type="button" name="next" class="next action-button" value="Далее">
     </fieldset>
     <fieldset>
     <h2 class="fs-title">Персональные данные</h2>
     <h3 class="fs-subtitle">Заполните свои данные</h3>
     <input type="text" name="fname" placeholder="Имя">
     <input type="text" name="lname" placeholder="Фамилия">
     <input type="text" name="phone" placeholder="Телефон">
     <textarea name="address" placeholder="Адресс"></textarea>
     <input type="button" name="previous" class="previous action-button" value="Назад">
     <input type="submit" name="submit" class="submit action-button" value="Готово">
     </fieldset>
</form>


Подключаем JavaScript который будет обрабатывать преключение наших шагов и прогресс бар:
Код
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/jquery.easing-1.3.min.js"></script>
<script src="/js/js.js"></script>


Осталось прописать CSS стиль нашей форме:
Код
body {
   font-family: arial, verdana;
}
#msform {
   width: 400px;
   margin: 50px auto;
   text-align: center;
   position: relative;
}
#msform fieldset {
   background: white;
   border: 0 none;
   border-radius: 3px;
   box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
   padding: 20px 30px;
     
   box-sizing: border-box;
   width: 80%;
   margin: 0 10%;
     
   /*stacking fieldsets above each other*/
   position: absolute;
}
/*Hide all except first fieldset*/
#msform fieldset:not(:first-of-type) {
   display: none;
}
/*inputs*/
#msform input, #msform textarea {
   padding: 15px;
   border: 1px solid #ccc;
   border-radius: 3px;
   margin-bottom: 10px;
   width: 100%;
   box-sizing: border-box;
   font-family: montserrat;
   color: #2C3E50;
   font-size: 13px;
}
/*buttons*/
#msform .action-button {
   width: 100px;
   background: #27AE60;
   font-weight: bold;
   color: white;
   border: 0 none;
   border-radius: 1px;
   cursor: pointer;
   padding: 10px 5px;
   margin: 10px 5px;
}
#msform .action-button:hover, #msform .action-button:focus {
   box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}
/*headings*/
.fs-title {
   font-size: 15px;
   text-transform: uppercase;
   color: #2C3E50;
   margin-bottom: 10px;
}
.fs-subtitle {
   font-weight: normal;
   font-size: 13px;
   color: #666;
   margin-bottom: 20px;
}
/*progressbar*/
#progressbar {
   margin-bottom: 30px;
   overflow: hidden;
   /*CSS counters to number the steps*/
   counter-reset: step;
}
#progressbar li {
   list-style-type: none;
   color: white;
   text-transform: uppercase;
   font-size: 9px;
   width: 33.33%;
   float: left;
   position: relative;
}
#progressbar li:before {
   content: counter(step);
   counter-increment: step;
   width: 20px;
   line-height: 20px;
   display: block;
   font-size: 10px;
   color: #333;
   background: white;
   border-radius: 3px;
   margin: 0 auto 5px auto;
}
/*progressbar connectors*/
#progressbar li:after {
   content: '';
   width: 100%;
   height: 2px;
   background: white;
   position: absolute;
   left: -50%;
   top: 9px;
   z-index: -1; /*put it behind the numbers*/
}
#progressbar li:first-child:after {
   /*connector not needed before the first step*/
   content: none;   
}
/*marking active/completed steps green*/
/*The number of the step and the connector before it = green*/
#progressbar li.active:before,  #progressbar li.active:after{
   background: #27AE60;
   color: white;
}


И заливаем прикреплённый ниже архив в папку "js"

Всё, готово!

Материал подготовил: Andrey
Для того чтоб скачать прикреплённые файлы нужно Зарегестрироватся, или войти на сайт под своим логином
 
профиль
Форум » О uCoz » Скрипты » Прогресс бар для формы регистрации
Страница 1 из 11
Поиск: