Splitter em Javascript

Vamos começar criando o HTML.


<html>
<head>
    <title>Splitter</title>
</head>
<body>

Agora vamos colocar a tag style aqui estamos configurando a p�gina para n�o ter margem e bloqueando a barra de scroll;

Agora vamos criar a tag table, essa tag fica dentro da tag body e /body.
Aqui vamos colocar os c�digos javascript e o conte�do da p�gina.



        
            
                
                     Conte�do do painel esquerdo. 
                
            
            
            
            
                
                    
                        
                            
                                 Conte�do do painel direito/topo. 
                            
                        
                    
                    
                        
                    
                    
                        
                            
                                 Conte�do do painel direito/fundo.

As tag div e /div � onde podemos colocar as imagens, textos e etc.
O evento onmousedow � quando clicamos e seguramos o bot�o do mouse. As funç�es setResizePanelVTrue() e setResizePanelHTrue() vou explicar depois.

Agora vamos criar a tag script, pode ser colocado dentro das tags head e /head:


  <script language="javascript" type="text/javascript">
  </script>

As funç�es que criaremos agora, v�o ser colocadas dentro da tag script.
A funç�o disableEnabledSelection() vai desabilitar a seleç�o de texto quando o evento onmousedow for disparado.


function disableEnabledSelection(target, isEnabled) {
    if (typeof target.onselectstart != "undefined") //IE route
    {
        if (isEnabled == false) {
            target.onselectstart = function () { return false }
            target.style.cursor = "default";
        }
        else {
            target.onselectstart = null;
            target.style.cursor = null;
        }
    }
    else if (typeof target.style.MozUserSelect != "undefined") //Firefox route
    {
        if (isEnabled == false) {
            target.style.MozUserSelect = "none"
            target.style.cursor = "default";
        }
        else {
            target.style.MozUserSelect = null;
            target.style.cursor = null;
        }
    }
    else { //All other route (ie: Opera)
        if (isEnabled == false) {
            target.onmousedown = function () { return false }
            target.style.cursor = "default";
        }
        else {
            target.onmousedown = null;
            target.style.cursor = null;
        }
    }
}

A funç�o getWidthScreen() vai obter a largura da tela do cliente.


function getWidthScreen() {
    var myWidth = 0;

    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myWidth = document.documentElement.clientWidth;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myWidth = document.documentElement.clientWidth;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myWidth = document.body.clientWidth;
    }

    return myWidth;
}

A funç�o getWidthScreen() vai obter a altura da tela do cliente.


function getHeightScreen() {
    var myHeight = 0;

    if (typeof (window.innerWidth) == 'number') {
        //Non-IE
        myHeight = window.innerHeight;
    }
    else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
        //IE 6+ in 'standards compliant mode'
        myHeight = document.documentElement.clientHeight;
    }
    else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
        //IE 4 compatible
        myHeight = document.body.clientHeight;
    }

    return myHeight;
}

A funç�o setSize() � onde vamos redimensionar as tags tr, td, div de acordo com a posiç�o do mouse e o tamanho da tela do cliente.


function setSize() {
    var objMainTR = document.getElementById('mainTR');
    var objPanelLeftTD = document.getElementById('panelLeftTD');
    var objPanelRightTD = document.getElementById('panelRightTD');
    var objPanelTopRightTR = document.getElementById('panelTopRightTR');
    var objPanelBottomRightTR = document.getElementById('panelBottomRightTR');

    var objContentLefDiv = document.getElementById('contentLefDiv');
    var objContentTopRightDiv = document.getElementById('contentTopRightDiv');
    var objContentBottomRightDiv = document.getElementById('contentBottomRightDiv');

             
    var myWidth = getWidthScreen();
    var myHeight = getHeightScreen();

    if (myHeight > 0) {
        objMainTR.style.height = myHeight + 'px';

        objPanelRightTD.style.width = (myWidth - parseInt(objPanelLeftTD.style.width) - 2) + 'px';

        objPanelBottomRightTR.style.height = (myHeight - parseInt(objPanelTopRightTR.style.height) - 2) + 'px';

        objContentLefDiv.style.height = myHeight + 'px';
        objContentTopRightDiv.style.height = parseInt(objPanelTopRightTR.style.height) + 'px';
        objContentBottomRightDiv.style.height = parseInt(objPanelBottomRightTR.style.height) + 'px';
    }
}

A funç�o setResizePanelVTrue() coloca para true a vari�vel isResizePanelV, indicando que nesse momento pode ser redimensionado verticalmente.


var isResizePanelV;

function setResizePanelVTrue() {
    isResizePanelV = true;
}

A funç�o setResizePanelHTrue() coloca para true a vari�vel isResizePanelH, indicando que nesse momento pode ser redimensionado horizontalmente.


var isResizePanelH;

function setResizePanelHTrue() {
    isResizePanelH = true;
}

A funç�o setResizePanelFlase() coloca para false as vari�veis isResizePanelV e isResizePanelH, indicando que nesse momento n�o pode ser redimensionado verticalmente e horizontalmente. Essa funç�o � chamada quando o evento onmouseup � disparado, esse evento � disparado quando o soltamos o bot�o do mouse.


function setResizePanelFalse() {
    isResizePanelV = false;
    isResizePanelH = false;

    disableEnabledSelection(document.body, true);
}

A funç�o rezisePanel() � chamada quando o evento onmousemove � disparado, a funç�o verifica qual redimensionamento est� habilitado.


function resizePanel(evt) {
    if (isResizePanelV) {
        resizePanelV(evt);
    }
    else if (isResizePanelH) {
        resizePanelH(evt);
    }
}

A funç�o resizePanelV() obt�m o valores do mouse, redimensiona verticalmente o objeto panelTopRightTR, chama a funç�o setSize() e a funç�o disableEnabledSelection().


function resizePanelV(evt) {
    if (isResizePanelV) {
        var objPanelTopRightTR = document.getElementById('panelTopRightTR');

        var e = null;
        var isMz = false; //Indica que o browser � Mozila
        var valueWidth = 0;

        if (window.event) {
            e = window.event; //Dados do evento.
        }
        else {
            e = evt; //Dados do evento.
            isMz = true;
        }

        disableEnabledSelection(document.body, false); //Desabilita a seleç�o de texto;

        if (isMz == false && (e.pageX || e.pageY)) {
            valueHeight = e.pageY;
        }
        else if (isMz == false && (e.clientX || e.clientY)) {
            valueHeight = (e.clientY + document.body.scrollTop + document.documentElement.scrollTop);
        }
        else if (isMz) {
            valueHeight = e.pageY;
        }

        var myHeight = getHeightScreen();

        if ((myHeight - 200) > valueHeight) {
            if (valueHeight > 200) {
                objPanelTopRightTR.style.height = valueHeight + 'px';
            }
            else {
                objPanelTopRightTR.style.height = '200px';
            }

            setSize();
        }
    }
}

A funç�o resizePanelH() obt�m o valores do mouse, redimensiona horizontalmente o objeto panelLeftTD, chama a funç�o setSize() e a funç�o disableEnabledSelection().


function resizePanelH(evt) {
    if (isResizePanelH) {
        var objPanelLeftTD = document.getElementById('panelLeftTD');

        var e = null;
        var isMz = false;//Indica que o browser � Mozila.
        var valueWidth = 0;

        if (window.event) {
            e = window.event;//Dados do evento.
        }
        else {
            e = evt;//Dados do evento.
            isMz = true;
        }

        disableEnabledSelection(document.body, false);//Desabilita a seleç�o de texto;

        if (isMz == false && (e.pageX || e.pageY)) {
            valueWidth = e.pageX;
        }
        else if (isMz == false && (e.clientX || e.clientY)) {
            valueWidth = (e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft);
        }
        else if (isMz) {
            valueWidth = e.pageX;
        }

        var myWidth = getWidthScreen();

        if ((myWidth - 300) > valueWidth) {
            if (valueWidth > 200) {
                objPanelLeftTD.style.width = valueWidth + 'px';
            }
            else {
                objPanelLeftTD.style.width = '200px';
            }

            setSize();
        }
    }
}

Aqui indicamos aos eventos quais funç�es ser�o chamadas quando forem disparados os eventos.


        window.onload = setSize;
        window.onresize = setSize;
        document.body.onmousemove = resizePanel;
        document.body.onmouseup = setResizePanelFalse;

Abaixo mostro como vai ficar a visualizaç�o.

At� o pr�ximo artigo.

Splitter em Javascript

Nesse artigo vamos ver como usar o splitter em javascript. Vamos ver as funções, resizePanelV, setResizePanelHTrue, resizePanelH, setSize, disableEnabledSelection, entre outras.

Artigos relacionados