Ventana emergente como en gmail

[superlopez82]

Hola a tod@s...

Quisiera saber si alguien conoce algún tutorial o ha hecho algún ejemplo para que aparezca una ventana (como cuando recibes un correo de gmail y tienes abierto google talk) pero en el navegador... para informar de un aviso...



Supongo que habrá que utilizar alguna herramienta como jquery o algo similar...

un saludo y gracias por adelantado!!!

[stock]

Hola, justo estos días estoy trabajando en un desktop y necesitaba usar un sistema de mensajería como el que propones, te he preparado un ejemplo para que veas en acción el siguiente plugin:

http://www.quizzpot.com/demos/extjs/...fications.html

Ahora, el código responsable es el siguiente:

Código Javascript:

/**
 * Ext.ux.ToastWindow
 *
 * @author  Edouard Fattal
 * @date    March 14, 2008
 *
 * Modified by Crysfel Villa
 * @date December 09, 2010
 *
 * @class Ext.ux.ToastWindow
 * @extends Ext.Window
 */
 
Ext.namespace("Ext.ux");
 
 
Ext.ux.NotificationMgr = {
    positions: []
};
 
Ext.ux.Notification = Ext.extend(Ext.Window, {
    initComponent: function(){
        Ext.apply(this, {
            iconCls     : this.iconCls || 'x-icon-information',
            cls         : 'x-notification',
            width       : 200,
            autoHeight  : true,
            plain       : false,
            draggable   : false,
            bodyStyle   : 'text-align:center'
        });
        if(this.autoDestroy) {
            this.task = new Ext.util.DelayedTask(this.hide, this);
        } else {
            this.closable = true;
        }
        Ext.ux.Notification.superclass.initComponent.call(this);
    },
    setMessage: function(msg){
        this.body.update(msg);
    },
    setTitle: function(title, iconCls){
        Ext.ux.Notification.superclass.setTitle.call(this, title, iconCls||this.iconCls);
    },
    onRender:function(ct, position) {
        Ext.ux.Notification.superclass.onRender.call(this, ct, position);
    },
    onDestroy: function(){
        Ext.ux.NotificationMgr.positions.remove(this.pos);
        Ext.ux.Notification.superclass.onDestroy.call(this);
    },
    cancelHiding: function(){
        this.addClass('fixed');
        if(this.autoDestroy) {
            this.task.cancel();
        }
    },
    afterShow: function(){
        Ext.ux.Notification.superclass.afterShow.call(this);
        Ext.fly(this.body.dom).on('click', this.cancelHiding, this);
        if(this.autoDestroy) {
            this.task.delay(this.hideDelay || 5000);
       }
    },
    animShow: function(){
        this.pos = 0;
        while(Ext.ux.NotificationMgr.positions.indexOf(this.pos)>-1)
            this.pos++;
        Ext.ux.NotificationMgr.positions.push(this.pos);
        this.setSize(200,100);
        this.el.alignTo(document, "br-br", [ -20, -42-((this.getSize().height+10)*this.pos) ]);
        this.el.slideIn('b', {
            duration: 1,
            callback: this.afterShow,
            scope: this
        });
    },
    animHide: function(){
        Ext.ux.NotificationMgr.positions.remove(this.pos);
        this.el.ghost("b", {
            duration    : 1,
            scope       : this,
            callback    : this.destroy
        });
    },
    
    focus: Ext.emptyFn 
 
});
 

Este es un plugin para ExtJS, quizás una librería bastante pesada para lo que necesitas, dejo a tu consideración si quieres usar el ejemplo, yo como todo mi desktop esta basado en ExtJS no tengo problema en usar el plugin

Quizás en unos días prepare un tutorial sobre el plugin, te recomiendo visitar mi blog (Está en mi firma) donde tengo mucho material gratuito

Saludos

[IsaBelM]

supongo que esos avisos, son guardados en una bd. entonces has de implicar un lenguaje del lado del servidor, así que yo te diría que usases o ajax (un poco pesado, por que has de llamar una y otra vez a la función usando un temporizador) o comet (con lo que tienes una conexión abierta, permanente en segundo plano)

[superlopez82]

stock muchas gracias por tu respuesta... voy a echarle un vistazo a tu codigo a ver si consigo echarlo a andar...

Iniciado por IsaBelM

supongo que esos avisos, son guardados en una bd. entonces has de implicar un lenguaje del lado del servidor, así que yo te diría que usases o ajax (un poco pesado, por que has de llamar una y otra vez a la función usando un temporizador) o comet (con lo que tienes una conexión abierta, permanente en segundo plano)

IsaBelM muchas gracias tb por tu comentario... efectivamente para que esa ventana aparezca en el momento adecuado habra que utilizar llamadas al servidor usando AJAX (es lo qeu tenia pensado)... es un poco pesado pero a ver, el cliente es el que manda!!!! jejeje