segunda-feira, 22 de julho de 2013

Checkbox com 3 estados em javaScript

         Como fazer um checkbox de 3 estados. (Three states in a checkbox)

         As imagems b0.png, b1.png e b2.png medem 13x13 px² e representam os checkboxes:
                     desmarcado
                     semi-marcado
                     marcado

         Uma de minhas estratégias para desenvolvimentos de componentes para formulários é manter um padrão para todos. Motivo: Facilitar o desenvolvimento de códigos recursivos como por exemplo os necessários à pegar ou setar os valores dos componentes. Exemplo de métodos e variaveis padrões que poderemos encontrar futuramente:
         setOptions(): insere as opções basicas do componente
         trigger(): função que é executada quando ocorre mudança de valor
         getValue: retorna valor
         setValue():atualiza valor
         reset(): coloca valor em estado default
         setEnabledTo(): seta o componente para um dos modos: seleção, edição ou inserção.
         validate(): se diferente de nulo, toda vez que ocorrer tentativa de alteração de valor, esse validade acusa se o novo valor é aceitavel ou não. retorna um valor booleano.
         mascara: String de formatação do campo. Exemplo com telefone: (##) ####-####

         Futuramente deixaremos este componente um pouco mais complexo. 


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">  
<script type="text/javascript">


    stateBox = function ()
    {
        var div = document.createElement("div");

        div.style.background="#00ffff" 
        div.style.position="absolute"; 
        div.style.top="0px"; 
        div.style.left="0px"; 
        div.style.width="13px";
        div.style.height="13px";

        div.disabled=false
        div.isTristate=false
        div.value = false

        div.style.backgroundImage =  "url('b0.png')";


        div.setValue = function (valuev)
        {
            if( valuev == false )
            {
                this.value = false
                this.style.backgroundImage =  "url('b0.png')"; 
            }
            else if( valuev == true )
            {
                this.value = true
                this.style.backgroundImage =  "url('b2.png')";
            }
            else
            {
                this.value = null
                this.style.backgroundImage =  "url('b1.png')";
            }
        }


        div.getValue = function ()
        {
            return this.value;
        }

        div.onclick =  function() 
        {
            if(!this.disabled)
            {
                if(this.isTristate)
                {
                    if( this.value == true )
                    {
                        this.value = false
                        this.style.backgroundImage =  "url('b0.png')";
                    }
                    else if( this.value == false )
                    {
                        this.value = null
                        this.style.backgroundImage =  "url('b1.png')";
                    }
                    else
                    {
                        this.value = true
                        this.style.backgroundImage =  "url('b2.png')";
                    }
                }
                else
                {
                    if( this.value == false )
                    {
                        this.value = true
                        this.style.backgroundImage =  "url('b2.png')";
                    }
                    else
                    {
                        this.value = false
                        this.style.backgroundImage =  "url('b0.png')";
                    }
                }
            }
        }

        return div;
    }


    function load()
    {
        var div = document.getElementById("div");

        chb = stateBox();
        chb.isTristate=true
        chb.setValue(null)

        div.appendChild( chb ) ;
    }
    
</script>
</head>
<body onload="load()">
    <div id="div"></div>
</body>
</html>
Postado por às
Marcadores:

Nenhum comentário:

Postar um comentário