Хаки и Скрипты Next Generation CMS

Анимация подсказок в формах ?Это эффектно !!!

irbees2008 irbees2008 Опубликовано - 9 - июля Текст и ссылки
2407 - 0
  • Адаптировал: irbees2008
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

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

Итак приступим
1.Скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем, и заливаем файл Superplaceholder.js в папку с вашим шаблоном ну и там можно его поместить в папку с вашими скриптами,у меня это папка JS.
2.Подключаем там где будем использовать наш скрипт

Код:
<script src="{{ tpl_url }}/js/superplaceholder.js"></script>
У меня получилось вот так.
3.Ну и сам скрипт где задаются все настройки
Код:
	<script>
superplaceholder({
el: inp1,
sentences: [ 'Введите ваш Email', '[email protected]', '[email protected]' ],
options: {
loop: true
}
})

superplaceholder({
el: inp2,
sentences: [ '1 спец. символ', '1 символ в верхнем регистре', 'Например, GhjY*54DsH' ],
options: {
loop: true,
letterDelay: 30
}
})

superplaceholder({
el: inp3,
sentences: [ 'Поддерживает любой формат', 'http://google.com', 'www.facebook.com', 'atman.biz' ],
options: {
letterDelay: 80,
loop: true,
startOnFocus: false
}
})
</script>
Это пример из демки
Сейчас немного разберемся что к чему
Вот сам синтаксис нашего скрипта:
Код:
superplaceholder({
el: <таргет на input>,
sentences: <массив с текстовыми данными>,
options: {} // кастомизируемые параметры, опционально
});

Вот так применяется по умолчанию:
Код:
superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Пример отображения 1', 'Пример отображения 2']
});
Ну и последнее это опции нашего скрипта :
Код:
superplaceholder({
el: document.querySelector('input'),
sentences: [ 'Пример отображения 1', 'Пример отображения 2'],
options: {
// Задержка между буквами (в миллисекундах)
letterDelay: 100, // миллисекунды
// Задержка между предложениями (в миллисекундах)
sentenceDelay: 1000,
// Начало на состояние :focus. Установите false для автостарта
startonfocus: true,
// Зациклить предложения
loop: false,
// Перемешивать показанные предложения
shuffle: false,
// Показывать курсор или нет. Показывать по умолчанию
showCursor: true,
// Вид курсора
cursor: '|'
}
});
Вот и все ,пользуемся
Ах да забыл,смотрите чтобы в формах было наличие placeholder, вот так примерно
Код:
<input  type="text" value="" placeholder="Email">

Можешь почитать и вот эту статейку "Это простенький график посещаемости на странице статистики сайта"

Опрос

Ваше мнение

Какие темы вам интереснее?
Результаты

Последние комментарии

Теги

Anything in here will be replaced on browsers that support the canvas element

Статистика

  • Caйту: 4488 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 670
  • Онлайн всего: [5]
  • Гости: [5]
  • Были сегодня : [3] Google, Яндекс, dankeanke
  • SQL запросов: 22
  • Генерация страницы: 0.31сек
  • Потребление памяти: 5.124 Mb 
  •   Яндекс.Метрика