/*
MODO DE EMPLEO:
Escribir en el elemento de la página:
*/
function MenuMostrarBloquesInfo(opcionesMenu, bloquesInfo, claseSeleccionado){
/*************************************************************************/
// propiedades públicas
/*************************************************************************/
/*************************************************************************/
// propiedades privadas
/*************************************************************************/
var opcionesMenu = (opcionesMenu) ? opcionesMenu : null;// guardamos en un array todos los elementos li del menú
var bloquesInfo = (bloquesInfo) ? bloquesInfo : null;// guardamos en un array todos los bloques de información
var claseSeleccionado = (claseSeleccionado) ? claseSeleccionado : "elementoMenuSelecionado";// ver css/javascript.css
var id = 0;
/*************************************************************************/
// métodos privados
/*************************************************************************/
function updateId(opcionMenu){
var l = opcionesMenu.length;
for(var i = 0; i < l; i++){
if(opcionMenu.html() == $(opcionesMenu[i]).html()){
id = i;
return;
}
}
}
function reset(){
var l = bloquesInfo.length;
for(var i = 0; i < l; i++){
$(bloquesInfo[i]).hide();// ocultar todos los bloques de información
}
l = opcionesMenu.length;
for(i = 0; i < l; i++){
$(opcionesMenu[i]).find("a").removeClass(claseSeleccionado);// eliminamos el estilo a todos los elementos del menú
}
}
function mostrarBloque(nmb,transicion){
if(transicion){
$(bloquesInfo[nmb]).fadeIn("fast");// mostrar el bloque de información con efecto visual de cambio de opacidad (de 0 a 100)
}else{
$(bloquesInfo[nmb]).show();// mostrar el bloque de información
}
$(opcionesMenu[nmb]).find("a").addClass(claseSeleccionado);// representar como seleccionado el elemento del menú
}
/*************************************************************************/
// métodos públicos
/*************************************************************************/
this.mostrarPrimerBloque = function(id){
mostrarBloque(id);
}
this.activarMenu = function(){
var l = opcionesMenu.length;
for(var i = 0; i < l; i++){
var opcionMenu = $(opcionesMenu[i]);
opcionMenu.find("a").click(function(event){
if($(this).hasClass(claseSeleccionado)){
event.preventDefault();// evitar el refresco de la página
return;
}
updateId($(this).parent());// actualizar el valor de la propiedad id en atención a la opción del menú pulsada
reset();// ocultar TODOS los bloques de inforamción y representar el estado de repsoso de todas las opciones del menú
mostrarBloque(id,1);// mostrar el nuevo bloque de información
event.preventDefault();// evitar el refresco de la página
});
}
}
}