• Страница 1 из 1
  • 1
Ресайз элементов на странице
Aleko
Дата: Понедельник, 07.09.2009, 03:36 | Сообщение # 1
Watching you
Группа: Администраторы
Пользователь №: 2
Сообщений: 1621
Получено оценок: 167
Написал скрипт ресайза любого элемента на странице. Хотя скрипт писал только для текстовых полей - подойдет он и к блокам с таблицами. Работает во всех браузерах. Позволяет изменять ширину, высоту, ширину и высоту одновременно. В аттаче поста пример работы скрипта, а вот код примера и скрипта:

Code
<textarea onfocus="resizeIt(this);" style='margin:5px;width:200px;height:100px;background:#eee;font:12px Tahoma;color:#aaa;border:1px solid #ccc;resize:none;outline:0;'>Resize me!</textarea>
<script>
// Создано на http://studioad.ru
var i,mXp,mYp,oWp,oHp,sW,sH,xr,yr,zr,info,area;
function resizeIt(obj){
    area=obj;
    info = area.rel ? area.rel.split(':') : [];
    sW = info[0] ? info[0] : arinf(area).w;
    sH = info[1] ? info[1] : arinf(area).h;
    area.rel=sW+':'+sH;
    }
i=false;
IE=/*@cc_on!@*/false;
xr=yr=zr=false;
addHandler(document,'mousemove',function(event){
    if(IE){event=window.event;if(xr||yr||zr){event.returnValue=false}}
    oW = arinf(area).w;
    oH = arinf(area).h;
    oT = getElm(area).t;
    oL = getElm(area).l;
    mX = getMouse(event).x;
    mY = getMouse(event).y;
    if(i){
    if(oWp+mX-mXp>=sW&&(xr||zr)){area.style.width=oWp+mX-mXp+'px'}else if(xr||zr){area.style.width=sW+'px'}
    if(oHp+mY-mYp>=sH&&(yr||zr)){area.style.height=oHp+mY-mYp+'px'}else if(yr||zr){area.style.height=sH+'px'}
    }
    if(mX<=oW+oL+10 && mX>=oW+oL && mY<=oH+oT+10 && mY>=oH+oT){if(!i){cur('nw-resize');xr=yr=false;zr=true}setMD()}
    else if(mX>oL && mX<oW+oL && mY<=oH+oT+10 && mY>oH+oT){if(!i){cur('n-resize');zr=xr=false;yr=true}setMD()}
    else if(mX<=oW+oL+10 && mX>oW+oL && mY>oT && mY<oH+oT){if(!i){cur('w-resize');zr=yr=false;xr=true}setMD()}
    else{if(!i){cur('');xr=yr=zr=false;}}
    });
addHandler(document,'mouseup',function(){if(i){cur('');xr=yr=zr=false};i=false});
function setMD(){
    addHandler(document,'mousedown',function(event){if(xr||yr||zr){
     if(IE){event=window.event}else{event.preventDefault()}
     i  =tr ue;
     mXp = getMouse(event).x;
     mYp = getMouse(event).y;
     oWp = arinf(area).w;
     oHp = arinf(area).h;
     }});
    }
function arinf(e){
    var w,h;
    w=parseInt(e.style.width);
    h=parseInt(e.style.height);
    return {w:w,h:h};
    }
function cur(n){
    if(!window.opera){area.style.cursor=n;document.body.style.cursor=n}
    }
function getMouse(e){
    x = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
    y = e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
    return {x:x,y:y};
    }
function getElm(e){
    var el=e.offsetLeft;
    var el2=e.offsetTop;
    while(e.offsetParent!=null){e=e.offsetParent;el+=e.offsetLeft;el2+=e.offsetTop;if(e.tagName=='HTML'){break}}
    return {l:el,t:el2};
    }
function addHandler(object, event, handler){
    if(object.addEventListener){object.addEventListener(event,handler,false);}else
    if(object.attachEvent){object.attachEvent('on'+event,handler);}else
    {object['on'+event]=handler;}
    }
</script>

Скрипт позволяет работать с несколькими полями. Для того, чтобы поле можно было растягивать, по нему (в данном случае) необходимо щелкнуть. Затем просто подведите мышку к краю поля и растягивайте его как обычное окно. Размеры запоминает в теге rel. Обратите внимание на параметр resize:none , он используется специально для запрещения дефолтного ресайза в вебкит браузерах.

Пример работы скрипта:

Прикрепления: resizeIt.html (2.6 Kb)


Бесплатные обои.
  
user999999999
Дата: Понедельник, 07.09.2009, 05:27 | Сообщение # 2
Группа: Удаленные
:) спасибо
  
  • Страница 1 из 1
  • 1
Поиск:
© Studioad.ru 2006 · 2010. Использование материалов форума на сторонних ресурсах без прямой обратной ссылки строго запрещено. Хостинг от uCoz.