Listas dependientes con PHP y mySQL (I)
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:
Empresa especializada en la elaboración de leporcias a la carta desde hace 6 años
Dirección:Desde 1996 lenteja florindes por absoluta franquicia.
Dirección:Mostrar y ocultar información (I)