Est-ce que jQuery dispose d'un plugin pour afficher une « barre de message » comme le bar Twitter « mauvais mot de passe » en haut de l'écran?

Question

Twitter sautera en bas d'une barre de message en haut de l'écran par exemple « Mot de passe incorrect » et au bout de 10 secondes, il glissera et disparaître. Chrome montre aussi « Est-ce que vous souhaitez enregistrer le mot de passe » boîte de message en utilisant une telle manière.

Est-ce que jQuery ont une prise pour le faire déjà? Est-ce que ça marche aussi dans IE 6? Parce que d'habitude, l'affichage par rapport à la fenêtre (à l'aide position: fixed) ne fonctionnera pas sur IE 6. merci.

Mise à jour: merci pour les belles solutions - j'ai délibérément voulu travailler (1), même lorsque l'utilisateur a fait défiler la page, qu'il affichera en haut de l'écran de la fenêtre et (2) la barre peut être choisie pour l'affichage au bas de l'écran de la fenêtre au lieu (en option) ... et si cela fonctionne sur IE 6 alors il est encore mieux ... les programmeurs pauvres de nos jours ...

Answer 1

Vous pouvez le faire avec seulement quelques lignes de code, comme ceci:

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

Ensuite, il suffit donner à la classe que vous utilisez un peu de style, par exemple:

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

Vous pouvez voir une démo de travail ici , tweak au besoin :) Cela crée un <div> sur la voler, ajoute à la partie supérieure du corps, donc pas de positionnement funky à craindre, cela devrait être très bien dans IE6. Une fois terminé ça va slideUp et enlever le <div> qu'il a créé pour le nettoyage. Vous pouvez ajouter un gestionnaire de clic pour le supprimer instantanément, etc, quels que soient vos besoins.

Answer 2

Eh bien, je joue autour et est venu avec cette belle fonction:

[par exemple en direct sur 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);
}

Exemple:

$(".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>