cuText - нестандартный textarea на JQuery

Подготовил: Александр Головко Дата публикации: 23.09.2010

Задача

Изменить дизайн textarea, реализовать стильную вертикальную полосу прокрутки.

красивые textarea

Требования

  • легкость интеграции
  • кроссбраузерность
  • максимальная приближенность к работе обычного textarea
    • в основе — обычный textarea
    • стандартная реакция на атрибуты name, id, disabled
    • настраиваемый вид скролла, прокрутка мышью
    • опционально возможность менять размер textarea мышью в любом браузере (как в Safari и Chrome)
  • при отключенном javascript остаются обычные textarea

Реализация

Для решения поставленной задачи пришлось насильно «подружить» три плагина. Это autoResize (спасибо, James Padolsey!), jScrollPane и UI resizable.

Так родился cuText 0.9.

Пример возможностей. Проверено в:

  • IE 6-8
  • Firefox 3
  • Opera 9.5-10
  • Safari 3
  • Chrome 6

Что качать?

Быстрый старт

Подключаем библиотеки:

<script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
<script type="text/javascript" src="js/autoresize.jquery.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script> 
<script type="text/javascript" src="js/jScrollPane.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/cutext.js"></script>

…и таблицу стилей:

<link href="css/cutext.css" rel="stylesheet" type="text/css" />

Подразумевается, что в HTML-коде где-то есть textarea:

	<form action="#" method="post">
		<div>
			<textarea rows="" cols=""></textarea>
		</div>
	</form>

Инициализируем плагин cuText, например, так:

<script type="text/javascript">
jQuery(function(){
	jQuery("textarea").cuText();
});
</script>

Вот и все.

А теперь подробнее

Функция cuText(), которая отвечает за инициализацию, может принимать следующие параметры:

Параметры cuText()

Название параметра Описание тип значения
scrollbarWidth ширина полосы прокрутки (по умолчанию 18) число в пикселях
showArrows показывать ли стрелки прокрутки (по умолчанию — true) true / false
resizable можно ли менять размер textarea мышью (по умолчанию — false) true / false
minWidth минимальная ширина, до которой можно стянуть textarea мышью (если возможность изменения размеров включена) число в пикселях
minHeight минимальная высота, до которой можно стянуть textarea мышью (если возможность изменения размеров включена) число в пикселях

Примеры инициализации

Для всех полей с классом cuText с возможностью изменения размеров:

<script type="text/javascript">
jQuery(function(){
	jQuery('.cuText').cuText({resizable: true});
});
</script>

Поле с id="cuText" с возможностью изменения размеров, минимальными размерами, без стрелок в полосе прокрутки, ширина полосы 12px:

<script type="text/javascript">
jQuery(function(){
	jQuery('#cuText').cuText({
		resizable: true,
		scrollbarWidth : 12,
		showArrows: true,
		minWidth : 200,
		minHeight: 100
	});
});
</script>

Ограничение: оформление и ресайз

Инициализировать плагин с параметром resizable: true можно только для тех textarea, для оформления которых не использовалась цельная фоновая картинка (в демо-примере это все поля, кроме шестого). Ведь при ресайзе цельный фон не потянется и верстка будет выглядеть некрасиво. Это ограничение считаю не очень существенным, так как сам ресайз у обычных textarea реализован только в некоторых браузерах, т.е. не является стандартом.

Немного подробнее про подключаемые *.js

Кроме собственно jquery в демонстрационном примере подключается еще 5 js-файлов общим весом почти 60Kb. Возникает резонный вопрос, можно ли этот вес уменьшить? Да, можно. Плагин jquery-ui-1.8.custom.min.js нужен только в случае, если необходимо, чтобы пользователь мог мышью менять размер стильных textarea. Если эта функция не нужна, смело убираем данный плагин.

jScrollPane.js и jquery.mousewheel.min.js отвечают за стильную прокрутку. Понятно, что если таковая уже внедрена в проект (а как правило так и есть, то есть если используются стильные textarea, то и select, как правило, стилизован), тогда эти файлы уже подключены.

Таким образом минимальный набор дополнительно подключаемых файлов — это autoresize.jquery.js и cutext.js общим весом 5.75Kb.

Список типичных вопросов

Как настроить внешний вид textarea?

Внешний вид стильного textarea определяется в cutext.css. Плагин автоматически оборачивает textarea в <div class="cuTextWrap">. В основном его стили и отвечают за вид поля:

.cuTextWrap{
	width:400px;
	background:none;
	color:#000;
	padding:3px 3px 10px 3px; /* нижний отступ больше - резервируем место для уголка ресайза */
	border:1px solid #B2B2B2;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	position: relative; /* нужно обязательно для позиционирования границ, за которые будет тянуть пользователь */
}

.cuTextWrap textarea{
	width: 100%;
	height: 80px; /* начальная высота textarea */
	display: block;
	overflow:hidden;
	border:none;
	background:none;
	color:#000;
}

Как настроить стили полосы прокрутки?

Поскольку полоса прокрутки формируется с помощью плагина jScrollPane, то и настройка производится так, как описано в статье jScrollPane. Делаем красивый скроллинг. Все необходимые стили вынесены в cutext.css.

А я уже использую в своей верстке jScrollPane. Не будет ли конфликта стилей?

Нет, не будет. Стили для textarea защищены, так как в cutext.css они все объявлены с родителем (например, .cuTextWrap .jScrollPaneContainer).

Я уже использую в своей верстке jScrollPane. А в описании плагина указано «jScrollPane.js (22.62 Kb) оригинал был изменен». Как разрулить эту ситуацию?

Опять-таки ничего страшного. Оригинал поменялся совершенно незначительно и его можно использовать для обычной прокрутки.

В оригинальном jScrollPane.js есть такие строки:

switch (e.keyCode) {
	case 38: //up
		currentArrowDirection = -1;
		currentArrowInc = 0;
		whileArrowButtonDown();
		currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
		return false;
	case 40: //down
		currentArrowDirection = 1;
		currentArrowInc = 0;
		whileArrowButtonDown();
		currentArrowTimerArr[currentArrowTimerArr.length] = setInterval(whileArrowButtonDown, 100);
		return false;

Этот код, кроме всего прочего, как бы блокирует нажатия на стрелки вверх и вниз, т.е. return false не позволяет переместить курсор внутри textarea. Эти стрелки просто перемещают прокрутку. В измененном jScrollPane.js там просто стоит return true.

В плагинах jScrollPane, autoresize и jQuery UI :: resizable есть ряд более тонких настроек поведения. Они не попали в список параметров cuText, а я хочу их использовать! Как быть?

Да, параметров у них действительно много. Переносить их все на cuText значит неоправданно усложнить его. Если нужны тонкие настройки, открываем cutext.js, ищем вызовы нужных нам плагинов и добавляем необходимые параметры.

Мне нужно использовать атрибуты в HTML чтобы задать для textarea id, name, disabled, tabindex и прочее. Будет ли это все работать после воздействия плагина?

Да, будет. В основе будет находится тот самый textarea, который изначально помещен в HTML, со всеми своими атрибутами.

Можно ли добавлять стильные textarea динамически?

Можно. Только для вновь созданного textarea нужно сразу же проинициализировать плагин. Это может выглядеть, например, так (вставка по нажатию на элемент id="btnCreate"):

jQuery("#btnCreate").click(function() {
	jQuery(this).after('<textarea class="cuText" rows="" cols="">textarea создан на лету с помощью скрипта.</textarea>');
	jQuery(this).next().cuText({resizable: true});
});

Баги/недостатки плагина

  • Большое количество используемых скриптов при максимальном функционале плагина (с резайзом). Способ бороться — поклеить скрипты в один файл. Например, так: скачать cutext-all.min.js (42.8 Kb).

Напоследок

Работу над плагином считаю продолжающейся. С удовольствием рассмотрю все замечания, пожелания и рацпредложения.

По теме:

Материалы:

Показать комментарии