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

Задача

Изменить дизайн 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

Что качать?

• библиотеку jquery
• (3.77 Kb) — плагин autoresize
• (27.41 Kb) - можно не использовать, если нет необходимости в функции изменения размера textarea мышью
• (22.62 Kb) оригинал был изменен.
• (2.6 Kb) для поддержки скроллинга колесиком мыши.
• (1.98 Kb) сам плагин.
• таблица стилей.

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

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

<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()

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

Для всех полей с классом 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});
});

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

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

Напоследок

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

По теме:

• Нестандартное textarea: в поисках решения

Материалы:

• james.padolsey :: jquery-plugin-autoresize
• jquery plugin :: jScrollPane
• jQuery UI :: resizable