Javascript → Скрипт изменения размера textarea как в Drupal

15.02.2010

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

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

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

Комментарии

Гость
16.04.2010, 07:00

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

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

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

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

это баг

Добавить комментарий