Mi Lindo Champoton

Alerts, Confirm y Popups

Hoy quiero presentarles unas herramientas que desarrolle en JavaScript que muestran una Alerta y un popup, para usarse en nuestros sitios web.

1. Alertas

Las alertas como sabrán se usan para mostrar mensajes a los usuarios.

En este paquete van incluidas las alertas en modo Información,Warning y Error.

Para hacer funcionar estas alertas basta con invocar la función Alerta() que construye la alerta esta función recibe 3 parámetros los 2 primeros obligatorios y el ultimo opcional.
new Alerta('El mensaje a mostrar','info',function(){
//Hacer algo aquí
});


El primer parámetro es el mensaje que queremos mostrar en la alerta, el segundo se refiere al tipo de Alerta como había dicho anteriormente se manejan 3 Información,Warning,Error, esto dependiendo de como queramos mostrar el mensaje. El ultimo parámetro de tipo Function() es opcional y sirve para ejecutar una función o código al momento de dar click en el botón aceptar de la alerta, por si queremos ejecutar algún código después de cerrar la alerta este parámetro nos viene como anillo al dedo.

2.- Confirmación

Los confirm como sabrán sirven para preguntar al usuario si en verdad quiere ejecutar una acción, como por ejemplo pedir la confirmación para eliminar un registro.

En este paquete viene incluida una simulación del confirm.

Para hacer funcionar este confirm basta con invocar la funcion Confirmacion() que construye el confirm, esta funcion recibe 3 parametros el primero obligatorio y los demas opcionales.

new Confirmacion('¿Deseas mostrar un mensaje?',
function () {
return new Alerta('Acaptaste mostrar este mensaje', 'info');
},
function(){
//Hacer algo aqui
}
);


El primer parámetro es el mensaje o pregunta que queremos hacerle al usuario, para que nos confirme. El segundo parámetro es de tipo Function() y es la función o el código que queremos ejecutar si el usuario da click en Aceptar y nos confirma la pregunta. El ultimo parámetro también de tipo Function() y es opcional y sirve para ejecutar una función o código si el usuario da click en Cancelar.

3.- Popups

Los popups como sabemos son ventanitas emergentes o modales para mostrar una pagina dentro de otra, al igual sirven para mostrar cierta parte una pagina por la razon de que no nos alcanza el espacio o porque queremos resaltar esa parte para que el visitante la vea, pero mayormente se usa para mostrar anuncios.

En este paquete viene incluida una simulación de un popup que muestra una pagina(No soy muy partidario de los anuncios, este lo use para una aplicación Web Empresarial para mostrar ventanas de captura).

Para hacer funcionar este popup basta con invocar la función AutoPopup() que construye el popup, esta función recibe 4 parámetros las 3 primeras obligatorias y la ultima opcional.


new AutoPopup('popup.htm', 'Titulo Popup', 300, 300, '');


El primer parámetro es para indicar el nombre y ruta de la pagina que queremos mostrar en el popup. El segundo parámetro es para indicarle un titulo a nuestro Popup. El tercer parámetro es para indicar el ancho en pixeles que tendrá nuestro popup(ancho de la ventana), el tercer parámetro es para indicar el alto en pixeles que tendrá nuestro popup(alto de la ventana). El ultimo parametro es para indicar parametros para la pagina que queremos mostrar, estas deben ir en el formato

parametro1=hola&parametro2=mundo

.

Espero estas herramientas les ayuden en sus futuros proyectos o les sirva como modelo para mejorar estas herramientas. Recalco si quieren modificar el código fuente, las imágenes, el css, etc. pueden hacerlo con la condición de que publiquen las mejoras que han realizado, para que quienes necesiten de estas herramientas usen lo mejor.

En el siguiente enlace de abajo podrán descargar el archivo .js, el archivo .css y las imagenes que se usaron en la creacion de estas utilidades, así como un demo para que verifiquen su funcionamiento.

Cualquier duda o sugerencia no duden en preguntar, que por aqui andaremos.

Saludos a todos. Nos vemos en el proximo blog.

Descargar codigo fuente

Simular el evento click con JavaScript

Para muchos programadores que quieren ejecutar el evento click de cualquier elemento ya sea de controles de servidor la siguiente funcion realiza las simulacion del evento click ya sea de un boton o cualquier elemento que soporte esta propiedad.

Sencillamente el ejecutar:

document.getElementById('miboton').click();

debería funcionar sin ningún problema, ya que obliga a ejecutar el evento click de este elemento pero sorpresa solo funciona con IE, si probamos con otros navegadores esto no es posible de ejecutar con esta funcion.

Para los distintos navegadores se debe usar la sig funcion:


var nouEvent = document.createEvent("MouseEvents");
nouEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var objecte = document.getElementById("miboton");
var canceled = !objecte.dispatchEvent(nouEvent);


Aquí lo que se hace es crear un evento dentro de la pagina relacionado con el mouse, en este caso queremos que sea del evento click para ello usamos la función initMouseEvent() y le pasamos los parámetros para agregar nuestra función.

Despues creamos el elemento el cual contiene la funcion click que queremos ejecutar por ultimo ejecutamos el evento con la funcion dispatchEvent() y le pasamos como parametro el evento que acabamos de crear en este caso el del click y ya con eso se ejecuta para los distintos navegadores diferentes a IE.

Espero que esta funcion les ayude tanto como a mi me ayudo.
Cualquier duda comentar.

Metodo POST (Formularios) JavaScript

Este sencillo script simula el metodo post en los campos de un formulario que deseemos pasar a una nueva pagina, sin mostrar lso valores en la URL.


function abrirReporte(keys,values)

{

var newWindow = window.open('visor.jsp', 'windows','configuraciones');

if (!newWindow) return false;

var html = "";

html += "

";

";

if (keys && values && (keys.length == values.length))

for (var i=0; i < keys.length; i++) {

html += "";

html += "";

}
html += "

newWindow.document.write(html);

return newWindow;

}
Este metodo crea una pagina de paso y redirecciona sobre la que este en el action los campos y valores que contienen los array de nombres y valores, estos deben coincidir en el orden de nombres y valor ya que en ese orden los lee la for.

Este metodo funciona perfectamente cuando queremos abrir una nueva pagina y queremos pasarle valores,ya que con el metodo tradicional simplemente no se podria.

Espero les sirva esta informacion.

Este es mi primer post

Hola a todos este es mi primer post en mi blog, solo para dar a conocerlo desde ya Gracias por acceder a el y pronto empezare a postear cosas interesantes.

Saludos nos vemos pronto