Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.01.2011, 17:05
Новичок на форуме
Отправить личное сообщение для Robox Посмотреть профиль Найти все сообщения от Robox
 
Регистрация: 09.06.2010
Сообщений: 6

Resize textarea, в копилку.
Хай, как и в прошлой теме про Undo/Redo, я еще решил прикрутить к textarea возможность динамически изменять размер поля ввода.
Видели наверное в сафаре и хроме такую возможность...

Ну нашел плагин jQuery UI Resizable, но вариант уж очень громозок по коду, стилям, в общем отмел из-за громозкости.

Нашел как здесь в коментах, но он только вертикально мог менять размер окна ввода.
Еще нашел простенький без jQuery.

Также нашел на jQuery меняющий вертикально, вот его то я и доработал.
- сделал, чтобы работал если даже несколько textarea на странице.
- чтобы иконка растяжки всегда была около нижнего-правого угла textarea
- ну и чтобы можно было менять как по вертикали так и по горизонтали (в общем по диагонали).

Начнем:

Стили:
Код:
.resizer {
	display: block;
	margin: 0px;
	padding: 0px;
}
.resizer a {
	background: url("../images/resize.gif") no-repeat 0 0;  
	width: 12px;
	height: 12px;
	margin: 0px;
	padding: 0px;	
    float: right;
	cursor: se-resize;	
}
jQuery:
(function(jQuery) {	
	jQuery.fn.resizer = function(id) {
  		return this.each(function() {
    	var me = jQuery(this);
    	if (typeof orig_w == 'undefined') var orig_w = me.width();
		if (typeof orig_h == 'undefined') var orig_h = me.height();		    
    	me.after(
      		jQuery('<div id="div_'+id+'"><a href="javascript:void(0);"></a></div>').addClass('resizer').width(orig_w).bind('mousedown', function(e) {
      		e = (typeof(e) == "undefined") ? window.event : e;  
        	var h = me.height(), w = me.width();       
        	var y = e.clientY, x = e.clientX;
        	var moveHandler = function(e) { 
        	me.height(Math.max(orig_h, e.clientY + h - y)).width(Math.max(orig_w, e.clientX + w - x)); jQuery('#div_'+id+'').width(Math.max(orig_w, e.clientX + w - x)); };
        	var upHandler = function(e) { jQuery('html').unbind('mousemove',moveHandler).unbind('mouseup',upHandler); };
        	jQuery('html').bind('mousemove', moveHandler).bind('mouseup', upHandler); return false;
      		})
    	);
  	  });
	};
})(jQuery);


После отрисовки textarea вызываем скрипт:
echo "<script type=\"text/javascript\">jQuery(document).ready(function(){jQuery('#id_textarea').resizer('id_textarea');});</script>";



кнопочку прикрепил.

тестировал в: IE7, IE8, лисе 3.5, хроме 8, сафари 5, опере 9, опере 11

И да, чтобы отключить в сафари и хроме стандартную растяжку, можете почитать про эти трюки

Я вообще очень слаб во всем этом, буду рад услышать коменты, доработки.
Изображения:
Тип файла: gif resize.gif (847 байт, 68 просмотров)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
динамическое textarea watt Элементы интерфейса 10 06.04.2012 16:40
swf crop resize x-yuri Ваши сайты и скрипты 2 14.03.2011 04:58
изменение размера textarea Vovan222 Общие вопросы Javascript 23 12.09.2010 19:14
textarea + CKEDITOR Ultimatum Events/DOM/Window 0 11.08.2010 16:01
textarea validation Петр Общие вопросы Javascript 3 08.12.2009 17:59