Хаки и Скрипты Next Generation CMS : Текст и ссылки, Интерфейс, JS : FancyText

irbees2008 Опубликовано - 17 - сентября Текст и ссылки

Адаптировал: irbees2008
Источник:
Уровень сложности исполнения: нужны навыки css html
Демо:

Этот плагин позволяет из обычного текстового поля (input) получить составной элемент (input + label) с разнообразными эффектами .
И так приступим.
1.Скачиваем исходник Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. ,распаковываем и заливаем папки js и css в папку с шаблоном.
2.В хеад подключаем стили и скрипты,если jquery второй раз подключать не надо.

Код:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="{{ tpl_url }}/js/jquery.fancy-textbox.js" type="text/javascript"></script>
    <link href="{{ tpl_url }}/css/font-awesome.css" rel="stylesheet" type="text/css" />
    <link href="{{ tpl_url }}/css/fancy-textbox.css" rel="stylesheet" type="text/css" />
    <!--[if IE]>
		<link rel="stylesheet" type="text/css" href="{{ tpl_url }}/css/fancy-textbox-ie.css" />
    <![endif]-->
    <script type="text/javascript">
        $(document).ready(function () {
            $('input').ftext();
        });
    </script>

3.Ну и сам пример инпута

Код:

<input type="text" data-animation="slide" id="fancy" data-label="Slide" data-mask="Текст" />

Ну теперь в исходниках смотрите нужный эффект и добавляете себе.

Можешь почитать и вот эту статейку "Оформляем поле поиска"

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.