animate - ¿Tiene jQuery un complemento para mostrar una "barra de mensajes" como la barra de "contraseña incorrecta" de Twitter en la parte superior de la pantalla?

jquery ui

Question

Twitter mostrará una barra de mensajes en la parte superior de la pantalla que dice "Contraseña incorrecta" y después de 10 segundos, se deslizará hacia arriba y desaparecerá. Chrome también muestra el cuadro de mensaje "¿Desea guardar la contraseña?" De esa manera.

¿JQuery tiene un complemento para hacer eso ya? ¿También funciona en IE 6? Debido a que generalmente, la visualización de la ventana gráfica (usando la position: fixed ) no funcionará en IE 6. gracias.

Actualización: gracias por las buenas soluciones: deliberadamente quería que funcionara (1) incluso cuando el usuario se haya desplazado hacia abajo por la página, que se mostrará en la parte superior de la pantalla de la ventana y (2) la barra puede elegirse para mostrar en la parte inferior de la pantalla de la ventana en su lugar (como una opción) ... y si funciona en IE 6, entonces es aún mejor ... los programadores pobres hoy en día ...

Answer 1

Bueno, jugué y presenté esta agradable función:

[ejemplo en vivo en http://jsfiddle.net/2arVf/ ]

//
// Usage: sendMessage(message, yes_text, no_text, class_to_style, callback_yes, callback_no)  -- for yes/no
//    or: sendMessage(message, class_to_style[, timeout])  -- informative with optional auto-hide after timeout
//

var sendMessage = function(str,yes,no,my_class,callback_yes,callback_no) {

    clearMessageTimeout(); // clear the timeout so it doesn''t accidentaly slide up

    if (typeof no == ''string'') {   // check if this is a yes/no message

        $message.slideUp(0, function() {  // slide up if not already
            // scroll to the top so the user gets to see the message             
            $("html").animate({''scrollTop'': 0}, ''fast'', function() {    // then
                $message
                .unbind(''mouseout'').attr(''class'','''')      // kill old classes
                .addClass(my_class)    // add our class styling
                .html([ str, ''<br />'', // create an array to add our
                                       // two handlers with #yes and #no IDs
                        ''<button id="yes">'', yes ,''</button>'',
                        ''<button id="no">'' , no  ,''</button>''
                      ].join('''')       // join the array and
                     )                 // insert message
                .slideDown(1000)       // slide the message down
                .find(''#yes,#no'')      // find #yes and #no
                .click(function() {    // add click handler to #yes and #no                            
                    var answer=$(this).attr(''id'');           // should be ''yes'' or ''no''
                    $message.slideUp(1000, function() {      // slide up and
                        $("html").animate({''scrollTop'': 0},  // scroll to top again and
                            eval(''callback_'' + answer)       // call our callback
                        );
                    });
                });     
            });        
        });

    } else {                  

        $message
            .unbind(''mouseout'')                // unbind previous mouseout
            .attr(''class'','''')                  // kill old classes
            .addClass(yes)                     // add our class
            .html(str)                         // insert our message
            .slideDown(1000, function() {      // slide down the message
            $message.mouseout(function() {     // bind mouse out
                setMessageTimeout(function() { // with a timeout if the pointer comes back
                    $message.slideUp(1000);    // to slide back up
                }, 1000);                      // after 1 second
            });                           
        });

        if (typeof no == ''number'') {       // if a timeout is specified
            setMessageTimeout(function() { // then it sets it
                $message.slideUp(1000);    // to slide up by itself
            }, no);                        // after x milliseconds
        }
    }
}

// Initialize messenger

$("<div></div>").prependTo(''body'').attr(''id'',''message'');

var $message = $("#message")
    .mousemove(clearMessageTimeout),
    message_timeout;

function setMessageTimeout(callback, time) {
    clearTimeout(message_timeout);
    message_timeout = setTimeout(callback, time);
}

function clearMessageTimeout() {
    clearTimeout(message_timeout);
}

Ejemplo:

$(".invoke_message").click(function(e) {

    sendMessage(

        [ ''Here I am, a message..'',
          ''I can be multiline'',
          ''<strong>and have any html</strong>'',,
          ''Do you like me?''
        ].join(''<br />''),

        ''Yeap'',''Nope'',  // yes and no text

        ''normal'',       // normal class

        function() {    // yes callback
            sendMessage(''Thank you. I/'ll be gone in 3 secs'', ''happy'', 3000);
        },

        function() {    // no callback
            sendMessage(''OK, have it your way then. You need to mouseout me to make me leave'', ''sad'');
        }

    );

    return false;
});

CSS:

body {
    padding:0;
    margin:0;
}
strong {
    font-weight:bold;
}
#message {
    color:#fff;
    text-align:center;
}
.normal {
    background-color:#888;
}
.happy {
    background-color:#cc2;
}
.sad {
    background-color:#b44;
}

HTML:

<p>I''m the main page. I''ll do some space if there is a message</p>
<p><a class="invoke_message" href="#">Click me</a></p>
.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br />.<br /><p><a class="invoke_message" href="#">Click me too</a></p>

Answer 2

Puedes hacer esto con solo unas pocas líneas de código, como esta:

​​​​function topBar(​​​message) {
  $("<div />", { ''class'': ''topbar'', text: message }).hide().prependTo("body")
      .slideDown(''fast'').delay(10000).slideUp(function() { $(this).remove(); });
}

Entonces solo dale a la clase que uses un poco de estilo, por ejemplo:

.topbar { 
    background: #990000; 
    border-bottom: solid 2px #EEE; 
    padding: 3px 0; 
    text-align: center; 
    color: white;
}​

Puede ver una demostración en funcionamiento aquí , ajustar según sea necesario :) Esto crea un <div> sobre la marcha, lo agrega a la parte superior del cuerpo, por lo que no debe preocuparse por un posicionamiento funky, esto debería estar bien en IE6. Cuando haya terminado, se deslizará hacia arriba y eliminará el <div> creado para la limpieza. Puede agregar un manejador de clics para eliminarlo al instante, etc., sean cuales sean sus necesidades.