Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continúa navegando, consideramos que acepta su uso.
Las cookies de este sitio web se usan para personalizar el contenido y los anuncios, ofrecer funciones de redes sociales y analizar el tráfico. Además, compartimos información sobre el uso que haga del sitio web con nuestros partners de redes sociales, publicidad y análisis web, quienes pueden combinarla con otra información que les haya proporcionado o que hayan recopilado a partir del uso que haya hecho de sus servicios. Puede cambiar la configuración u obtener más información aquí

Aceptar

Google

tunait.com » Tutorial » Mostrar/ocultar información


Mostrar y ocultar información (II)

Listas dependientes con PHP y mySQL (I)

Aplicando los estilos CSS

Aplicamos algo de formato a nuestra lista de empresas. Un ejemplo sencillo podría ser algo así

    <style type="text/css">
       .tituloItem{
          cursor: pointer;
          font-weight: bold;
       }
       .contenidoItem{
          border-left: 1px dotted #aaaaaa;
          border-bottom: 1px solid #aaaaaa;
          padding-left: 10px;
          padding-bottom: 3px;
          font-weight: normal;
          margin-bottom: 10px;
          margin-top: 0;
       }
       .contenidoItem p{
          margin: 3px;
       }
    </style>
     

Y ahora alguien dirá que falta agregar el display con un valor de none para la clase contenidoItem para que la información asociada a cada empresa se encuentre inicialmente oculta ¿no? Pues no. Las páginas web pueden ser más o menos vistosas y pueden tener más o menos 'cosas chulas' pero la misión principal de una página web es portar información y que esa información pueda ser siempre accesible por cualquier persona que acceda a nuestra página desde cualquier dispositivo . Desde luego que lo último que nos interesa es que aquellos visitantes que naveguen nuestro sitio sin Javascript se queden sin poder acceder a la información. De nada nos sirve darnos el trabajo de ponerla si luego no se llega a mostrar. De forma que de entrada la información estará toda visible y, en caso de que el agente de usuario (el programa que usa el dispositivo para navegar) que cargue la página disponga de soporte para Javascript y además se encuentre activado será entonces cuando el propio Javascript se encargue de poner la propiedad CSS display de los contenedores de información a un valor de none.

Para ello agregaremos una función que se encargue de hacerlo tras cargarse el listado de empresas en el navegador.

Lo primero que haremos será guardar el elemento que contiene el listado dentro de una variable de nombre listado.

listado = document.getElementById('listaEmpresas')

Una vez localizado el objeto buscamos dentro de él los elementos que querremos ocultar cambiando su propiedad display a none. En el ejemplo hemos guardado la información dentro de elementos div así que serán esos elementos los que seleccionemos y se guardarán en la variable contenedores que será una variable de tipo array (listado de elementos)

contenedores = listado.getElementsByTagName('div')

Ahora vemos cuántos de estos contenedores existen dentro de nuestro listado. Para ello le pedimos su propiedad length (longitud) y la guardamos en una variable de nombre numContenedores

numContenedores = contenedores.length

ok, ahora nos vamos a pasear por cada uno de ellos para colocarles su propiedad display con un valor none pero antes nos hemos de asegurar de que se lo aplicamos sólo a los contenedores div que nos interesa. En el ejemplo usamos un solo div por empresa pero tal vez estos div podrían contener a su vez a otros div dependiendo de la cantidad de información que queramos meter y de cómo queramos distribuirla. Así que nos fijaremos nada más en los contenedores div cuyo id sea item_n. Para ellos usamos la sentencia condicional if para ver si es uno de los div que buscamos y nos fijamos si su id contiene la cadena 'item_' usando el método indexOf()

if(contenedores[m].id.indexOf('item_') == 0)

en caso de cumplirse la condición le ponemos al elemento la propiedad display con su valor a none

contenedores[m].style.display = 'none'

La función completa nos quedaría algo así

       function ocultaItems(){
          listado = document.getElementById('listaEmpresas')
          contenedores = listado.getElementsByTagName('div')
          numContenedores = contenedores.length
          for(m=0; m < numContenedores; m++){
             if(contenedores[m].id.indexOf('item_') == 0)
             contenedores[m].style.display = 'none'
          }
       }
     

Sólo nos queda realizar la llamada a la función detrás del listado de empresas.

<script type="text/javascript">
<!--
ocultaItems()
//-->
</script>

La parte de Javascript quedará de la siguiente forma

<script type="text/javascript">
<!--
   function items(id){
      var obj = document.getElementById('item_' + id)
      if(obj.style.display == 'block') obj.style.display = 'none'
      else obj.style.display = 'block'
   }
   function ocultaItems(){
      listado = document.getElementById('listaEmpresas')
      contenedores = listado.getElementsByTagName('div')
      numContenedores = contenedores.length
      for(m=0; m < numContenedores; m++){
         if(contenedores[m].id.indexOf('item_') == 0)
         contenedores[m].style.display = 'none'
      }
   }
//-->
</script>
     

Y aquí el ejemplo en marcha:

Mostrar y ocultar información (I)

 


Copyright © 2006 www.tunait.com todos los derechos reservados