Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.10.2011, 20:14
Профессор
Отправить личное сообщение для Александр х@к Посмотреть профиль Найти все сообщения от Александр х@к
 
Регистрация: 24.08.2011
Сообщений: 159

независимые функции
<!DOCTYPE HTML>
<html>
<body>   
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Untitled Document</title>
<style type="text/css">
body, html{
    margin:0;
    padding:0;
    overflow:hidden;
    width:100%;
    height:100%;
}
div{
    background-color:white;
    margin:10px;
    border:silver 1px solid;
}
#wBody{
    position:absolute;
    top:50px;
    left:50px;
    width:250px;
    height:250px;
    margin:0;
}
</style>
<script etype="text/javascript">
function xGetElementById(e){
  if(!xStr(e)) return e;
  if(document.getElementById) return document.getElementById(e);
  else if(document.all) return document.all[e];
}
function xDef() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])=='undefined') return false;}
  return true;
}
function xStr() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='string') return false;}
  return true;
}
function xNum() {
  for(var i=0; i<arguments.length; ++i){if(typeof(arguments[i])!='number') return false;}
  return true;
}
function getCS(e,s1,s2){
    if(xDef(e.currentStyle)) var s=parseInt(eval('e.currentStyle.'+s1));
    else if(xDef(window.getComputedStyle)) var s=parseInt(window.getComputedStyle(e,'').getPropertyValue(s2));
    return (isNaN(s))?0:s;
}
function getBorderWidth(e,width){
    if(width)return getCS(e,'borderTopWidth','border-top-width')+getCS(e,'borderBottomWidth','border-bottom-width');
    else return getCS(e,'borderLeftWidth','border-left-width')+getCS(e,'borderRightWidth','border-right-width')
}
function xTop(e,y){
    if(xDef(y)) e.style.top=y+'px';
    else return e.offsetTop-getCS(e,'marginTop','margin-top');
}
function xLeft(e,x){
    if(xDef(x)) e.style.left=x+'px';
    else return e.offsetLeft-getCS(e,'marginLeft','margin-left');
}
function xWidth(e,w){
    if(w){if(w>0) e.style.width=w+'px'; else return 0}
    else if(xNum(e.style.width)) return parseInt(e.style.width);
    else return e.clientWidth+getBorderWidth(e,true);
}
function xHeight(e,h){
    if(h){if(h>0) e.style.height=h+'px'; else return 0}
    else if(xNum(e.style.height)) return parseInt(e.style.height);
    else return e.clientHeight+getBorderWidth(e);
}
</script>
</head>
 
<body>
<div id="wBody">
Parent

<div id="wReSizeXY">wReSizeXY</div>
<div id="wReSizeX">wReSizeX</div>
<div id="wReSizeY">wReSizeY</div>
<div id="wClose">wClose</div>
</div>
 
<script etype="text/javascript">
var wBody=xGetElementById('wBody');
var wReSizeXY=xGetElementById('wReSizeXY');
var wReSizeX=xGetElementById('wReSizeX');
var wReSizeY=xGetElementById('wReSizeY');
var wClose=xGetElementById('wClose');
 
initWindow(wBody,wBody,false,true,true);
initWindow(wBody,wReSizeXY,true,true,true);
initWindow(wBody,wReSizeX,true,true,false);
initWindow(wBody,wReSizeY,true,false,true);
 
wClose.onclick=function(){
    document.body.removeChild(wBody);
}

function initWindow(oBody,oInitEvent,eType,useX,useY){
    oInitEvent.onmousedown=function(event){
        event=event||window.event;
        var fncX=(eType)?xWidth:xLeft;
        var fncY=(eType)?xHeight:xTop;
        var x=event.clientX-fncX(oBody);
        var y=event.clientY-fncY(oBody);
        var minW=200;
        var minH=200;
        var cW=document.documentElement.clientWidth;
        var cH=document.documentElement.clientHeight;
        document.onmousemove=function(event){
            event=event||window.event;
            if(useX){
                fncX(oBody,event.clientX-x);
                if(eType){
                    if((xWidth(oBody)>minW)?false:xLeft(oBody)+minW>event.clientX)xWidth(oBody,minW);
                    if(xWidth(oBody)+xLeft(oBody)>cW)xWidth(oBody,cW-xLeft(oBody)-getBorderWidth(oBody,true));
                }else{
                    if(xLeft(oBody)+xWidth(oBody)>cW)xLeft(oBody,cW-xWidth(oBody));
                    if(xLeft(oBody)<0)xLeft(oBody,0);
                }
            }
            if(useY){
                fncY(oBody,event.clientY-y);
                if(eType){
                    if((xHeight(oBody)>minH)?false:xTop(oBody)+minH>event.clientY)xHeight(oBody,minH);
                    if(xHeight(oBody)+xTop(oBody)+getBorderWidth(oBody)>cH)xHeight(oBody,cH-xTop(oBody)-getBorderWidth(oBody));
                }else{
                    if(xTop(oBody)+xHeight(oBody)>cH)xTop(oBody,cH-xHeight(oBody));
                    if(xTop(oBody)<0)xTop(oBody,0);
                }
            }
        }
        document.onmouseup=function(){
            if(!eType){
                oBody.style.top=xTop(oBody)*100/cH+'%';
                oBody.style.left=xLeft(oBody)*100/cW+'%';
            }
            document.onmousemove=function(){return false;}
        }
    }
}
 
</script>
</body>
</html>

здесь использован дрег енд дроп, при этом родитель перемещается, но вот wReSizeXY, должен растягивать и верх-низ лево-право, но так как что-то неверно, то всем функциям присвоило значение родителя, теперь функция растяжки не работает, а работает только перемещение.
так вот как сделать функцию растяжки независимой.
спасибо.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
независимые функции Александр х@к Элементы интерфейса 0 24.10.2011 19:17
Как в браузерах реализуются функции DOM (например createElement) iamme Общие вопросы Javascript 7 02.09.2011 20:26
динамическое содержимое функции alfmaster Общие вопросы Javascript 2 28.05.2011 17:10
arguments вызвавшей функции mister_maxim Общие вопросы Javascript 4 12.10.2010 16:21
Подскажите, как работает простой код (замыкание функции)? Dotod Общие вопросы Javascript 5 02.12.2009 04:03