Хаки и Скрипты Next Generation CMS
irbees2008 irbees2008 Опубликовано - 24 - марта Текст и ссылки
4275 - 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,они должны присутствовать обязательно.

Можешь почитать и вот эту статейку "С Наступающим Новым 2015 Годом"

Опрос

Ваше мнение

какой форум лучше для вас
Результаты

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

Теги

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

Статистика

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