Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 24 - марта Текст и ссылки
3349 - 0
  • Автор: Мэри Лу (Маноэла Илич)
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

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

Код:
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/fonts/font-awesome-4.2.0/css/font-awesome.min.css" />
<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/set1.css" />
Как видите мы подключили стиль сброса стилей,стиль иконочного шрифта,и сам стиль наших input.
2.Перед закрытием тега body добавляем скрипты
Код:
<script src="{{ tpl_url }}/js/classie.js"></script>
<script>
(function() {
if (!String.prototype.trim) {
(function() {
// Make sure we trim BOM and NBSP
var rtrim = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
String.prototype.trim = function() {
return this.replace(rtrim, '');
};
})();
}

[].slice.call( document.querySelectorAll( 'input.input__field' ) ).forEach( function( inputEl ) {
// in case the input is already filled..
if( inputEl.value.trim() !== '' ) {
classie.add( inputEl.parentNode, 'input--filled' );
}

// events:
inputEl.addEventListener( 'focus', onInputFocus );
inputEl.addEventListener( 'blur', onInputBlur );
} );

function onInputFocus( ev ) {
classie.add( ev.target.parentNode, 'input--filled' );
}

function onInputBlur( ev ) {
if( ev.target.value.trim() === '' ) {
classie.remove( ev.target.parentNode, 'input--filled' );
}
}
})();
</script>
3.Ну и выбираем в файле index.html нашего исходника понравившийся вариант ,ну я как всегда приведу первый пример
Код:
<span class="input input--haruki">
<input class="input__field input__field--haruki" type="text" id="input-1" />
<label class="input__label input__label--haruki" for="input-1">
<span class="input__label-content input__label-content--haruki">First Name</span>
</label>
</span>
4.Ну вроде все,если есть интерес покопаться в коде,то в файлах стилей set1.css и set1.css каждый вариант разделён,но в этих файлах в начале файла идут общие стили поля input,они должны присутствовать обязательно.

Можешь почитать и вот эту статейку "Тег input"

Опрос

Ваше мнение

Ваше отношение к TWIG
Результаты

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

Теги

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

Статистика

  • Caйту: 3323 дня
  • Новостей: 542
  • Комменты: 254
  • Зарегистрированно : 570
  • Онлайн всего: [10]
  • Гости: [10]
  • Были сегодня : [3] Яндекс, Google, irbees2008
  • SQL запросов: 31
  • Генерация страницы: 0.113сек
  • Потребление памяти: 4.939 Mb 
  •   яндекс.ћетрика