В этом уроке Вы вместе с нами займетесь созданием счетчика, который будет контролировать количество оставшихся символов для ввода в текстовое поле. Ниже Вы можете просмотреть пример получившегося счетчика, а также скачать необходимые файлы:
Шаг 1. Подключение библиотеки jQuery и плагина Limit
Первым делом нам нужно подключить библиотеку jQuery и плагин Limit, без которого правильная работа счетчика невозможна. Делаем это, вставляя следующий код между тегами и :
Code
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.limit.js"></script>
Шаг 2. Стилизация текстового поля.
Теперь необходимо немного приукрасить наше текстовое поле, придать ему несколько стилей. Вы можете заняться дизайном сами или хотя бы немного изменить мои исходные стили, которые находятся в файле style.css. Вам всего лишь остается подключить его в верхней части Вашей страницы следующим образом:
Code
<link href="style.css" rel="stylesheet" type="text/css" media="all" />
Шаг 3. Каркас текстового поля.
Далее создадим простую текстовую область (Textarea) и придадим ей все использовавшиеся нами стили:
Code
<div class="form">
<p>
<span class="w">
<textarea class="input"></textarea>
<br>
<span id="charsLeft"></span> знаков осталось.
</span>
</p>
</div>
Шаг 4. Вставка основного jQuery-кода.
В этом, последнем шаге нам всего лишь остается разместить jQuery-код, который будет играть основную роль в работе нашего счетчика символов. Следующий код Вам нужно будет вставить перед закрытием тега body:
Code
<script type="text/javascript">
$(document).ready(function(){
$('textarea').limit('100','#charsLeft');
});
</script>
limit-signs.zip
Сайт
Форум
Фотоальбом
Настройки
Расширенный поиск
Лента новостей
05.06.2010, Суббота в 23:06
