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, время: 00:08. |