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.

Vamos começar criando o HTML.

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

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

<style>
        body 
        {
	        margin-top:0px;
	        margin-left:0px;
	        margin-right:0px;
	        margin-bottom:0px;
	        scroll:no;
        }        
</style>

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.

<table cellpadding="0" cellspacing="0" border="0" style="width:100%">
        <tr id="mainTR">
            <td id="panelLeftTD" style="width:200px;background-color:#DBDBDB;cursor:default;" valign="top">
                <div id="contentLefDiv" style="width:100%;overflow-y:scroll;">
                     Conteúdo do painel esquerdo. 
                </div>
            </td>
            <td style="width:2px;background-color:#A0C0E7;cursor:e-resize;" onmousedown="setResizePanelHTrue();">
            </td>
            <td id="panelRightTD" style="width:200px;background-color:#DBDBDB;" valign="top">
                <table cellpadding="0" cellspacing="0" border="0" width="100%">
                    <tr id="panelTopRightTR" style="height:200px;cursor:default;">
                        <td>
                            <div id="contentTopRightDiv" style="width:100%;overflow-y:scroll;">
                                 Conteúdo do painel direito/topo. 
                            </div>
                        </td>
                    </tr>
                    <tr style="height:2px;background-color:#A0C0E7;cursor:n-resize;" onmousedown="setResizePanelVTrue();">
                        <td></td>
                    </tr>
                    <tr id="panelBottomRightTR" style="height:200px;cursor:default;">
                        <td>
                            <div id="contentBottomRightDiv" style="width:100%;overflow-y:scroll;">
                                 Conteúdo do painel direito/fundo. 
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

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.