3 220 В этой статье вы узнаете как изменить оформление тега, используя плагин jQuery Label Better. С помощью этого расширения можно улучшить оформление элементов формы тега. Среди особенностей плагина можно отметить простоту использования – нужно только прописать атрибут placeholder, а label будет создан, при необходимости, автоматически.
В первую очередь необходимо подключить jQuery. Это нужно сделать после тега head:
|
1 |
<script src="http://code.jquery.com/jquery-1.10.2.min.js" type="text/javascript"></script> |
Для работы необходимо подключить jquery.label_better.js.
После необходимо создать скрипт, вызывающий функцию, и передать ей имя класса .label_better и тип используемой анимации:
|
1 2 3 4 5 6 7 |
<script> $(document).ready( function() { $(".label_better").label_better({ easing: "bounce" //тип анимации }); }); </script> |
Кроме этого параметра, допустимо указывать и другие:
|
1 2 3 4 5 |
position: "top", // Позиция animationTime: 500, // Время выполнения анимации easing: "ease-in-out", // Тип анимации: CSS виды, а так же "linear", "ease", "bounce". offset: 20, // Расстояние hidePlaceholderOnFocus: true // по умолчанию при фокусе плэйсхолдер будет исчезать |
Задавать значения параметров, передаваемых в плагин, можно непосредственно в тексте HTML-файла. В качестве примера можно взять атрибут data-position. Задавая его значение, можно управлять позицией смещения.
|
1 |
<input type="text" class="label_better" data-position="right" placeholder="Username"> |
Текст placeholder-а может меняться в зависимости от текущего состояния. За изменение текста отвечает атрибут data-new-placeholder. Следующий код меняет текст «Ваше имя» на «Введите имя» после получения фокуса.
|
1 |
<input class="label_better" type="text" placeholder="Ваше имя" value="" data-new-placeholder="Введите имя" /> |
Обратите внимание, что плагин работает не во всех браузерах. В Internet Explorer плагин не функционирует, а в Opera могут возникнуть проблемы с корректным отображением. Для работы с этими браузерами понадобится искать другой вариант оформления input.
