@alterebro

Script para mostrar y ocultar capas.

viernes, enero 12, 2007 @2:18

Script unobtrusivo para mostrar y ocultar divs. Al cargar checkea la existencia de algun hash en la URL y de encontrarlo muestra la capa correspondiente.
Para usarlo necesita ser configurado el valor de menu_id al valor del id del elemento que contiene el menu con los enlaces a todos los hashes correspondientes a las capas que van a ser mostradas/ocultadas.
Demo online: Show-Hide Layers Script

var show_hide = {
menu_id : 'menu',
divs : function() {
var lis = document.getElementById(this.menu_id).getElementsByTagName('li')
var div_items = new Array()
for( var h=0; h<lis.length; h++) {
div_items[h] = (lis[h].getElementsByTagName('a')[0].hash).substr(1)
}
return div_items
},
hide_all : function() {
for (var i=0; i<this.divs().length; i++) {
document.getElementById(this.divs()[i]).style.display = 'none'
}
},
show_layer : function(which_one) {
this.hide_all()
document.getElementById(which_one).style.display = 'block'
},
create_links : function() {
for (var j=0; j<document.getElementById(this.menu_id).getElementsByTagName('li').length; j++) {
document.getElementById(this.menu_id).getElementsByTagName('li')[j].getElementsByTagName('a')[0].onclick = function() {
var target_div = this.hash.substr(this.hash.indexOf('#')+1)
show_hide.show_layer(target_div)
return false
}
}
},
get_currentlocation : function() {
var current_hash = 0
for (var k=0; k<this.divs().length; k++) {
if (this.divs()[k] == document.location.hash.substr(1)) current_hash = k
}
return current_hash
},
init : function() {
this.create_links()
this.show_layer(this.divs()[this.get_currentlocation()])
},
load_me : function() {
var w3 = (document.createElement && document.getElementsByTagName)
if (!w3) return

if (window.attachEvent) window.attachEvent('onload',function(){eval('show_hide.init()')})
else if (window.addEventListener) window.addEventListener('load',function(){eval('show_hide.init()')},false)
}
}
show_hide.load_me()

Etiquetas:

0 comentarios

Publicar un comentario

Suscribirse a Enviar comentarios [Atom]

Enlaces a esta entrada:

Crear un enlace