Главная » Файлы » jQuery скрипты | jQuery снипепеты | jQuery плагины


Обратимся к twitter чтобы понять принцип работы плагина. Сообщения в twitter ограничены 140символами. Когда вы пишите сообщение, то видите информацию о том, сколько еще символов вы можете использовать. При приблежение к установленному лимиту также меняется цвет текста у счетчика.

На вашем сайте вы можете использовать этот плагин для окна комментариев или контактной формы, если там необходимо ограничить длину сообщения.
Как работает плагин

Прежде всего плагин создает элемент для счетчика и размещает его сразу поле поля формы. При каждом срабатывание keyup или change для текстового поля вызывается функция подсчета символов. Если количество символов находится в зоне ‘предупреждение’, то к элементу с выводом счетчика добавляется CSS класс (используется чтобы изменить цвет счетчика). При достижение счетчика нуля и переходе к отрицательным значениям, добавляется еще один класс, чтобы можно было задать другой стиль.

Вот код, который генерирует плагин по умолчанию:

Code
<span class="counter">140</span>


Подключаем Jquery и наш плагин:

Code
<script type="text/javascript" src="http://ucozmaster.ru/jquery/jquery.js"></script>
<script type="text/javascript" src="http://ucozmaster.ru/jquery/charCount.js"></script>


Запустить плагин с настройками по умолчанию можно так:

Code

<script>
$("#message1").charCount();
</script>


Запуск с указанием параметров:
Code

<script>
$("#message2").charCount({
  allowed: 50,
  warning: 20,
  counterText: 'Characters left: '
});
</script>


В CSS:

Code
form .counter{
  position:absolute;
  right:0;
  top:0;
  font-size:20px;
  font-weight:bold;
  color:#ccc;
}
form .warning{color:#600;}
form .exceeded{color:#e00;}





Ваша оценка:

Рейтинг: 0.0 Всего:0 Добавил: Михалыч

Другие новости

Поделиться ссылкой

Ссылка:
BB-code:
HTML:
Комментарии
Всего комментариев: 0