2468
- 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">
Можешь почитать и вот эту статейку "Полно экранное слайдшоу"
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.