Javascript → Скрипт изменения размера textarea как в Drupal
В Drupal есть полезный jQuery скрипт, который позволяет с помощью мышки изменять размеры textarea:
Вот его немного переделанная версия, которую можно использовать вне друпала:
$(function(){ $('textarea.resizable').each(function(){ var textarea = $(this).addClass('textarea-processed'), staticOffset = null; $(this).wrap('<div class="resizable-textarea"><span></span></div>') .parent().append($('<div class="grippie"></div>').mousedown(startDrag)); var grippie = $('div.grippie', $(this).parent())[0]; grippie.style.marginRight = (grippie.offsetWidth - $(this)[0].offsetWidth) +'px'; function startDrag(e){ staticOffset = textarea.height() - e.pageY; textarea.css('opacity', 0.25); $(document).mousemove(performDrag).mouseup(endDrag); return false; } function performDrag(e){ textarea.height(Math.max(32, staticOffset + e.pageY) + 'px'); return false; } function endDrag(e){ $(document).unbind("mousemove", performDrag).unbind("mouseup", endDrag); textarea.css('opacity', 1); } }); });
CSS:
.grippie { height: 9px; overflow: hidden; background: #eee url(/images/grippie.png) no-repeat center 2px; border: 1px solid #ddd; border-top-width: 0; cursor: s-resize; }
Картинка grippie.png.
После загрузки DOM, ко всем textarea с классом resizable
будет добавлена плашка для изменения размера.
Пример работы скрипта можно посмотреть в форме комментариев, которая находится ниже.
Комментарии
не понятно, как это можно использовать
что конкретно не понятно? что такое javascript знаете? как подключать javascript файлы знаете? что такое css знаете? как подключать css файлы знаете? если по всем пунктам нет, то вам сюда
Про jquery забыли ;)
Он работает для div?
нет, но думаю можно приспособить
это баг
Чем не подходит jQuery resizable?
тем, что это 2010 год
Оставить комментарий