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

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

irbees2008 irbees2008 Опубликовано - 9 - июля Текст и ссылки
2348 - 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">

Можешь почитать и вот эту статейку "палитра цветов 1"

Опрос

Ваше мнение

TWIG -что это?
Результаты

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

Теги

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

Статистика

  • Caйту: 4365 дней
  • Новостей: 566
  • Комменты: 257
  • Зарегистрированно : 660
  • Онлайн всего: [9]
  • Гости: [8]
  • Поисковики: [1] Google
  • Были сегодня : [2] Google, Яндекс
  • SQL запросов: 21
  • Генерация страницы: 0.371сек
  • Потребление памяти: 5.122 Mb 
  •   Яндекс.Метрика