xandeadx.ru Блог музицирующего веб-девелопера

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 будет добавлена плашка для изменения размера.

Пример работы скрипта можно посмотреть в форме комментариев, которая находится ниже.

Похожие записи

Комментарии RSS

не понятно, как это можно использовать

что конкретно не понятно? что такое javascript знаете? как подключать javascript файлы знаете? что такое css знаете? как подключать css файлы знаете? если по всем пунктам нет, то вам сюда

Про jquery забыли ;)

Он работает для div?

нет, но думаю можно приспособить

grippie.style.marginRight = (grippie.offsetWidth - $(this)[0].offsetWidth) +'px';

это баг

Чем не подходит jQuery resizable?

тем, что это 2010 год

Оставить комментарий

Содержимое этого поля является приватным и не будет отображаться публично. Если у вас есть аккаунт в Gravatar, привязанный к этому e-mail адресу, то он будет использован для отображения аватара.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Доступные HTML теги: <a> <i> <b> <strong> <code> <ul> <ol> <li> <blockquote> <em> <s>
  • Строки и параграфы переносятся автоматически.
  • Подсветка кода осуществляется с помощью тегов: <code>, <css>, <html>, <ini>, <javascript>, <sql>, <php>. Поддерживаемые стили выделения кода: <foo>, [foo].

Подробнее о форматировании