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

Code
1<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>
2<script>
3// Создано на http://studioad.ru
4var i,mXp,mYp,oWp,oHp,sW,sH,xr,yr,zr,info,area;
5function resizeIt(obj){
6    area=obj;
7    info = area.rel ? area.rel.split(':') : [];
8    sW = info[0] ? info[0] : arinf(area).w;
9    sH = info[1] ? info[1] : arinf(area).h;
10    area.rel=sW+':'+sH;
11    }
12i=false;
13IE=/*@cc_on!@*/false;
14xr=yr=zr=false;
15addHandler(document,'mousemove',function(event){
16    if(IE){event=window.event;if(xr||yr||zr){event.returnValue=false}}
17    oW = arinf(area).w;
18    oH = arinf(area).h;
19    oT = getElm(area).t;
20    oL = getElm(area).l;
21    mX = getMouse(event).x;
22    mY = getMouse(event).y;
23    if(i){
24    if(oWp+mX-mXp>=sW&&(xr||zr)){area.style.width=oWp+mX-mXp+'px'}else if(xr||zr){area.style.width=sW+'px'}
25    if(oHp+mY-mYp>=sH&&(yr||zr)){area.style.height=oHp+mY-mYp+'px'}else if(yr||zr){area.style.height=sH+'px'}
26    }
27    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()}
28    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()}
29    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()}
30    else{if(!i){cur('');xr=yr=zr=false;}}
31    });
32addHandler(document,'mouseup',function(){if(i){cur('');xr=yr=zr=false};i=false});
33function setMD(){
34    addHandler(document,'mousedown',function(event){if(xr||yr||zr){
35     if(IE){event=window.event}else{event.preventDefault()}
36     i  =tr ue;
37     mXp = getMouse(event).x;
38     mYp = getMouse(event).y;
39     oWp = arinf(area).w;
40     oHp = arinf(area).h;
41     }});
42    }
43function arinf(e){
44    var w,h;
45    w=parseInt(e.style.width);
46    h=parseInt(e.style.height);
47    return {w:w,h:h};
48    }
49function cur(n){
50    if(!window.opera){area.style.cursor=n;document.body.style.cursor=n}
51    }
52function getMouse(e){
53    x = e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft;
54    y = e.clientY+document.body.scrollTop+document.documentElement.scrollTop;
55    return {x:x,y:y};
56    }
57function getElm(e){
58    var el=e.offsetLeft;
59    var el2=e.offsetTop;
60    while(e.offsetParent!=null){e=e.offsetParent;el+=e.offsetLeft;el2+=e.offsetTop;if(e.tagName=='HTML'){break}}
61    return {l:el,t:el2};
62    }
63function addHandler(object, event, handler){
64    if(object.addEventListener){object.addEventListener(event,handler,false);}else
65    if(object.attachEvent){object.attachEvent('on'+event,handler);}else
66    {object['on'+event]=handler;}
67    }
68</script>

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

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

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


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