jQuery Roadmap plugin

Персональные данные

Инициалы * Место проживания Место работы Должность Дата рождения

Интересные каналы

Новости в мире
Политика
IT-события
Наука и техника
Новкинки автопрома
Новый год

Завершение регистрации

Инициалы Логин Почтовый адрес Группы подписки

Пример подключения

Вставте на страницу ссылки на js и css файлы плагина
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://letmefree.github.io/jquery.roadmap.js"></script>
<link href="http://letmefree.github.io/jquery.roadmap.css" rel="stylesheet" />
Добавте элемент div, в котором будет отображаться плагин
<div id="rmp"> </div>
Инициализируйте плагин (инициализация происходит по событию $(document).ready)
$function() {
     var rmp = $("#rmp").Roadmap();
}

Настройки

Для настройки плагина используйте набор параметров, задаваемых при инициалиции
Параметр Значение по умолч. Описание
onInit null Хендлер, вызываемый при инициализации плагина.
allowJump true Определяет возможность перехода между формами в произвольном порядке

(если true - переход на новую форму с помощью клика на карте не возможен, переход осуществляется методом MoveNext(). Возврат к предыдущей форме возможен не зависимо от заданного значения allowJump)
voyagerSpeed 300 Скорость перемещения ползунка по карте
voyagerPosition 0 Начальное положение ползунка на карте
formsContainer "" Контейнер, где расположены формы, необходимые для заполнения. В качестве значение задается jQuery селектор (например "div.account")
checkpoints [] Массив участков, необхоидмых для завершения регистрации.
[{
   text: "Учетные данные",
   form: "div.account",
   validate: [{ item: "input[name=login]", pattern: /^[A-zА-я0-9]{5,}$/, validate: function(validState){} }]
}]


Где:
      text - заголовок участка,
      form - соответствующая форма участка,
      validate - [item селектор текстовых полей (расположенных на форме form) pattern Regex паттерн проверки корректности введенных данных; handler - callback, срабатывающий при валидации формы и принимающий значение true/false валидности данных согласно паттерну]
width 400 Ширина плагина, указывается в пикселях (px)