FloatingZoneMessage
Instrucciones
Para poder usar este widget, es necesario descargar lo siguiente:

Agrega los tres archivos entre las etiquetas <HEAD> y </HEAD> de la página donde los vayas a usar. 

<script type="text/javascript" src="mootools.js"></script>
<script type="text/javascript" src="javoaxianamespace.js"></script>
<script type="text/javascript" src="FloatingZoneMessage.js"></script>

Recuerda cambiar la ruta de los archivos jS a su dirección correcta.

Crea un objeto con el comportamiento que desees de la zona antes de la etiqueta </BODY> de tu página, por ejemplo: 

<script>
var zona = new javoaxian.mootools.widgets.FloatingZoneMessage('zona',{
  style:'estiloZona',
  width:200,
  position:'lu',
  autoHide:true,
  durationVisible:3000,
  effect: {
    type:'fade',
    durationTransition:1000
  }
});
</script>

Asigna el contenido de la zona usando el método setHTML, por ejemplo: 

zona.setHTML("Est&aacute;s usando FloatingZoneMessage");

Por último, para mostrar la zona, deberás usar el método show() del objeto y para ocultarlo, deberás usar el método hide() siempre y cuando hayas puesto la propiedad autoHide con valor de false. Por ejemplo: 

zona.show();
o
zona.hide();

Consulta los ejemplos que aparecen abajo para que puedas entender mejor su funcionamiento.

Ejemplo 1
Zona sin efecto, auto ocultable, visible en la parte superior derecha
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona1 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona1',{
  style:'fzmStyle',
  width:200,
  position:'ur',
  autoHide:true,
  durationVisible:4000
});

Botón: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo1();'>

Función: 
function mostrarEjemplo1() {
zona1.setHTML("<b>Ejemplo 1:</b><br /><br />" +
  "Estas usando FloatingZoneMessage.");
  zona1.show();
}
Ejemplo 2
Zona sin efecto, NO auto ocultable, visible en la parte superior izquierda
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona2 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona2',{
  style:'fzmStyle',
  width:200,
  position:'ul',
  autoHide:false
});

Botones: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo2();'>
<input type='button' value='Ocultar' onClick='ocultarEjemplo2();'>

Funciones: 
function mostrarEjemplo2() {
  zona2.setHTML("<b>Ejemplo 2:</b><br /><br />" +
    "Estas usando FloatingZoneMessage.");
  zona2.show();
}

function ocultarEjemplo2() {
  zona2.hide();
}
Ejemplo 3
Zona con efecto fade, auto ocultable, visible en la parte inferior izquierda
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona3 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona3',{
  style:'fzmStyle',
  width:200,
  position:'dl',
  autoHide:true,
  durationVisible:4000,
  effect: {
    type:'fade',
    durationTransition:1500
  }
});

Botón: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo3();'>

Función: 
function mostrarEjemplo3() {
  zona3.setHTML("<b>Ejemplo 3:</b><br /><br />" +
    "Estas usando FloatingZoneMessage.");
  zona3.show();
}
Ejemplo 4
Zona con efecto slide, auto ocultable, visible en la parte inferior izquireda, desplazandose de izquierda a derecha
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona4 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona4',{
  style:'fzmStyle',
  width:200,
  position:'ld',
  autoHide:true,
  durationVisible:4000,
  effect: {
    type:'slide',
    durationTransition:1000
  }
});

Botón: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo4();'>

Función: 
function mostrarEjemplo4() {
  zona4.setHTML("<b>Ejemplo 4:</b><br /><br />" +
    "Estas usando FloatingZoneMessage.");
  zona4.show();
}
Ejemplo 5
Zona con efecto slide, auto ocultable, visible en la parte superior derecha, desplazandose de arriba hacia abajo
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona5 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona5',{
  style:'fzmStyle',
  width:200,
  position:'ur',
  autoHide:true,
  durationVisible:4000,
  effect: {
    type:'slide',
    durationTransition:500
  }
});

Botón: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo5();'>

Función: 
function mostrarEjemplo5() {
  zona5.setHTML("<b>Ejemplo 5:</b><br /><br />" +
    "Estas usando FloatingZoneMessage.");
  zona5.show();
}
Ejemplo 6
Zona con efecto slide, NO auto ocultable, visible en la parte inferior derecha, desplazandose de abajo hacia arriba, mostrando un formulario que simula el envio de información
 

 
Creación de objeto: 
// ANTES DE LA ETIQUETA </body>
var zona6 = new javoaxian.mootools.widgets.FloatingZoneMessage('zona6',{
  style:'fzmStyle',
  width:200,
  position:'dr',
  autoHide:false,
  effect: {
    type:'slide',
    durationTransition:500
  }
});

Botón: 
<input type='button' value='Mostrar' onClick='mostrarEjemplo6();'>

Funciones: 
function mostrarEjemplo6() {
  zona6.setHTML("<b>Ejemplo 6:</b><br /><br />" +
    "<form method='POST' action='#'>" +
    "Palabra: <input type='tex' name='palabra' size='15'><br /><br />" +
    "<input type='button' value='Enviar' onClick='presionarBotonEj6();'>");
  zona6.show();
}

function presionarBotonEj6() {
  zona6.hide();
  
  (function() {
    zona6.setHTML("<div style='text-align:center;'>" +
      "<img src='fzm_cargando.gif' />" +
      "</div>");
    zona6.show();
    
    (function() {
      zona6.hide();
    }).delay(3000);
    
    (function() {
      zona6.setHTML("Se envió la información");
      zona6.show();
      
      (function() {
        zona6.hide();
      }).delay(4000);
    }).delay(3750);
  }).delay(500);
}
Acerca de FloatingZoneMessage
FloatingZoneMessage es un widget para MooTools el cual se encarga de mostrar una zona flotante de mensajes en alguna de las esquinas del navegador.

Documentación

Licencia: The MIT License

Demo realizado por: JavoAxian
Anuncios
Ejemplos
Copyright © JavoAxian 2008