Resize textarea, в копилку.
Вложений: 1
Хай, как и в прошлой теме про Undo/Redo, я еще решил прикрутить к textarea возможность динамически изменять размер поля ввода.
Видели наверное в сафаре и хроме такую возможность... Ну нашел плагин jQuery UI Resizable, но вариант уж очень громозок по коду, стилям, в общем отмел из-за громозкости. Нашел как здесь в коментах, но он только вертикально мог менять размер окна ввода. Еще нашел простенький без jQuery. Также нашел на jQuery меняющий вертикально, вот его то я и доработал. - сделал, чтобы работал если даже несколько textarea на странице. - чтобы иконка растяжки всегда была около нижнего-правого угла textarea - ну и чтобы можно было менять как по вертикали так и по горизонтали (в общем по диагонали). Начнем: Стили: Код:
.resizer { (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 И да, чтобы отключить в сафари и хроме стандартную растяжку, можете почитать про эти трюки Я вообще очень слаб во всем этом, буду рад услышать коменты, доработки. |
Часовой пояс GMT +3, время: 01:38. |