post icon

Como crear fieldset colapsable

Por defecto los fieldset del HTML no son colapsables, pero es una caracteristica muy útil para aprovechar mejor el espacio que tenemos para crear nuestra página.

Además da una mejor estética al sitio que se permita colapsar ciertos bloques, para ello podemos valernos de JavaScript y los FieldSet’s. El ejemplo que veremos será de lo más sencillo, simplemente servirá para comprender el concepto y fácil de replicarlo.

Si tienen mejores formas realizar ésta tarea son bienvenidas las ideas.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Fieldset colapsables [DevTroce]</title>
    <style type="text/css">
        a
        {
            color: blue;
            cursor: pointer;
        }
    </style>

    <script type="text/javascript">
        // metodo para invocar al cargar la pagina
        function construirFieldSetColapsables() 
        {
            var fsets = document.getElementsByTagName('fieldset');
            var fset = null;
            for (var i=0; i<fsets.length; i++)
            {
                fset = fsets[i];
                if(fset.attributes['colapsado']!=null)
                    construirFieldSetColapsable(fset, fset.attributes['colapsado'].value);
            }
        }
         
        // colapsa un fieldset especifico
        function construirFieldSetColapsable(fset, colapsado)
        {
            //main content:
            var divContenido = fset.getElementsByTagName('div')[0];
            if (divContenido == null)
                return;
         
            if (colapsado == 'true')
                divContenido.style.display = 'none';
         
            //+/- ahref:
            var ahrefText = getAlternadorAHref(colapsado);
         
            //leyenda:
            var leyenda = fset.getElementsByTagName('legend')[0];
            if (leyenda != null)
                leyenda.innerHTML = ahrefText + leyenda.innerHTML;
            else
                fset.innerHTML = '<legend>' + ahrefText + '</legend>' + fset.innerHTML;
        }
        
        
        function getAlternadorAHref(colapsado)
        {
            var ahrefText = "<a onClick='alternadorFieldset(this.parentNode.parentNode);' style='text-decoration: none;'>";
            ahrefText = ahrefText + getItemExpansor(colapsado) + "</a>&nbsp;";
            return ahrefText;
        }
         
        function getItemExpansor(colapsado)
        {
            var ecChar;
            if (colapsado=='true')
                ecChar='+';
            else
                ecChar='-';
         
            return ecChar;
        }
         
        function alternadorFieldset(fset)
        {
            var ahref = fset.getElementsByTagName('a')[0];
            var div = fset.getElementsByTagName('div')[0];
         
            if (div.style.display != "none")
            {
                ahref.innerHTML=getItemExpansor('true');
                div.style.display = 'none';
            }
            else
            {
                ahref.innerHTML=getItemExpansor('false');
                div.style.display = '';
            }
        }
        //-->
    </script>

</head>
<body onload="construirFieldSetColapsables();">
    <fieldset colapsado="true">
        <legend>Devtroce</legend>
        <div>
            Este fieldset est&aacute colapsado por defecto, adem&aacutes contiene una leyenda
        </div>
    </fieldset>
    <br />
    <fieldset colapsado="false">
        <div>
            Este fieldset est&aacute expandido por defecto, y no utiliza leyenda
        </div>
    </fieldset>
    <br />
    <fieldset>
        <legend>Fieldset Normal</legend>
        <div>
            Este fieldset no es colapsable.. Para lograrlo debes agregar los atributos al tag,
            asi: &lt;fieldset colapsado="false" ... o &lt;fieldset colapsado="true" ...
        </div>
    </fieldset>
</body>
</html>

fuente: bytes.com

Comentarios desde Facebook:

  1. avatar
    RIK PERU Internet Explorer Windows
    4 mayo 2011 at 14:12 #

    TODOS LOS PROBLEMAS QUE EH TENIDO CON MYSQL TOMCAT DENTRO DE MI IDE ECLIPSE AN SIDO PRINCIPALMENTE POR EL PUERTO DEL MYSQL EN LA CONEXION DE TU JSP, Y EN LAS VARIABLES DE ENTORNO,

    ACA TENGO LA WEB QUE ME AYUDO A CONFIGURAR ESOS PARAMETROS

Responder