Lecaw

Учимся создавать Web-сайты

Progression.js – Интерактивная форма обратной связи для сайта с индикатором загрузки

June 24, 2013 211hits

Progression.js - jQuery плагин, который отображает в реальном времени подсказки пользователям и индикатор загрузки.

ДЕМО Исходные файлы

 

Для начала подключите библиотеку jQuery и файлы плагина progression.css и progress.js. Разместите их перед закрывающим тегом head.

<link href='progression.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="/progression.js"></script>

Создание формы обратной связи для сайта

В форме вы должны указать уникальный идентификатор, а также устанавите атрибут data-progression для всех элементов в которых должны отображаться подсказки.

Вспомогательный текст подсказки может быть установлен путем добавления атрибута data-helper к элементам.

<form id="myform">
    <p>
    	<label for="">Name</label> 
    	<input data-progression="" type="text" data-helper="Help users through forms by prividing helpful hinters" name="name" value="" placeholder="" />
    </p>
  </form>

Инициализация плагина

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

На начальном уровне вы можете запустить плагин таким образом:

$(document).ready(function ($) {
    $("#myform").progression();
});

Добавление настроек:

$("#myform").progression({
        tooltipWidth: '200',
        tooltipPosition: 'right',
        tooltipOffset: '50',
        showProgressBar: true,
        showHelper: true,
        tooltipFontSize: '14',
        tooltipFontColor: 'fff',
        progressBarBackground: 'fff',
        progressBarColor: '6EA5E1',
        tooltipBackgroundColor: 'a2cbfa',
        tooltipPadding: '10',
        tooltipAnimate: true
    });	

Настройки

tooltipWidth – Ширина подсказки в px, значение по умолчанию – 200

tooltipPosition – Расположение подсказки слева от формы, либо справа, значение по умолчанию – right

tooltipOffset – Ширина смещения подсказки, значение по умолчанию – 50

showProgressBar – Отображение индикатора загрузки, значение по умолчанию – true

showHelper – Отображение подсказки, значение по умолчанию – true

tooltipFontSize – Размер шрифта, значение по умолчанию – 14

tooltipFontColor – Цвет ссылок, значение по умолчанию – ffffff

progressBarBackground – Цвет фона индикатора загрузки, значение по умолчанию – ffffff

progressBarColor – Цвет индикатора загрузки, значение по умолчанию – 6EA5E1

tooltipPadding – Отступ для подсказки, значение по умолчанию – 10

tooltipAnimate – Анимация подсказки, значение по умолчанию - true

ДЕМО Исходные файлы

Дополнительная информация