Курилка.co.ua
Orphus RSS kurilka.co.ua

Category

Archives

jQuery плагин ресайза (resize) TEXTAREA

Author wmas wmas | Category Category JavaScript

Здравствуйте, уважаемые посетители моего блога Курилка.co.ua. markItUp — достаточно простой и удобный редактор, работающий с библиотекой jQuery. Но если приглядеться, то и у него (как и у всего на свете?) можно найти своих недостатки. Да и вообще, иногда гораздо приятней работать с тем, что понимаешь, что не так шаблонно.

В данной заметке, я хотел бы поделиться с вами jQuery плагином, который позволяет изменять размеры TEXTAREA, просто перемещая соответствующую границу. О плагине я узнал из статьи: resizehandle : une poignée pour agrandir la fenêtre de saisie (Fil). Кто знает (если не ошибаюсь) французский, может ознакомиться. Авторами плагина являются Николас Мартин (Nicolas Martin), Оливье Мецниер (Olivier Meunier) и их помощники. Если ошибся с именами – поправьте.

Начнём же мы с того, что понадобится подключить библиотеку jQuery:

<script src="http://www.jquery.info/scripts/jquery-1.1.2.pack.js" type="text/javascript"></script>

Не вдаваясь в подробности, приведу код плагина с небольшими, в меру моего понимания, комментариями:

<script type="text/javascript"><!--
// создаём плагин resizer
jQuery.fn.resizer = function() {
  // выполняем плагин для каждого объекта
  return this.each(function() {
    // определяем объект
    var me = jQuery(this);
    // вставляем в после объекта...
    me.after(
      // в нашем случае это наш "ресайзер" и производим обработку события mousedown
      jQuery('<div class="resizehandle"></div>').bind('mousedown', function(e) {
        // определяем высоту textarea
        var h = me.height();
        // определяем кординаты указателя мыши по высоте
        var y = e.clientY;
        // фнкция преобразовывает размеры textarea
        var moveHandler = function(e) { me.height(Math.max(20, e.clientY + h - y)); };
        // функци прекращает обработку событий
        var upHandler = function(e) { jQuery('html').unbind('mousemove',moveHandler).unbind('mouseup',upHandler); };
        // своего рода, инициализация, выше приведённых, функций
        jQuery('html').bind('mousemove', moveHandler).bind('mouseup', upHandler);
      })
    );
  });
}
// --></script>

Как вы видите, код получился небольшим и в чём-то даже понятным. Думаю лучше всего его поместить в отдельный файл, скажем resizehandle.js. Нам осталось лишь инициировать действие плагина для TEXTAREA. Как таковой, это можно сделать по ID, классу или тегу. Я предпочитаю ID, как наиболее определённый. Выглядеть это может следующим образом:

<script type="text/javascript"><!--
$(document).ready(function(){
  $("#textarea").resizer();
});
// --></script>
<textarea id="textarea" style="width:100%; height:200px"></textarea>

Здесь просто дожидаемся загрузки документа и инициализируем наш плагин. Стоит также позаботиться об оформлении нашей «грани» или «ресайзера», называйте как это будет удобней. К примеру, вот так:

<style>
.resizehandle {
  background:transparent url("http://www.jquery.info/images/resizer.png") no-repeat scroll 45%;
  cursor:s-resize;
  font-size:0.1em;
  height:16px;
  width:100%;
}
</style>

Обратите внимание, что класс .resizehandle уже прописан в плагине, так что если что придётся править ручками.

На этом вроде бы всё. Если в моей заметке вы найдшли какие-то ошибки, или можете что-то уточнить — пишите в комментариях, буду благодарен. Спасибо за внимание.

Publish: Вторник Ноя 25, 2008

4 Responses for "jQuery плагин ресайза (resize) TEXTAREA"

feed for comments on this post

  • Комментарий #2408 author: GonZig Reply
    publish: Четверг Сен 3, 2009 at 6:37 пп

    Блин! Если бы раньше сюда зашел… Кучу времени потерял и получил то же самое. Я делал код для изменения ширины колонок в таблице… (как в ёкселе)

  • Комментарий #2411 author: wmas Reply
    publish: Понедельник Сен 7, 2009 at 8:18 пп

    2GonZig: hi! Да, всегда так получается, что найти то что нам нужно получается зачастую тогда, когда оно не нужно :cry:

  • Комментарий #2543 author: shirohonoo Reply (subscribed to comments)
    publish: Пятница Янв 15, 2010 at 10:38 дп

    2GonZig: а можешь рассказать, как это делается (или код выложить)? а то у меня сейчас именно такая задача стоит — ресайз колонок… и не знаю, с какой стороны подойти…
    спасибо.

  • Комментарий #2746 author: Андрюха Reply
    publish: Воскресенье Сен 19, 2010 at 1:58 пп

    Спасибо!


Popular links

Copyright © since 2006 Курилка.co.ua,
powered by WordPress