Est-ce que jQuery a un plugin pour afficher une "barre de message" comme la barre Twitter "mauvais mot de passe" en haut de l'écran?

Question

Twitter apparaîtra une barre de message en haut de l'écran dire "Mot de passe incorrect" et après 10 secondes, il va glisser vers le haut et disparaître. Chrome affiche également "Voulez-vous enregistrer le mot de passe" boîte de message en utilisant un tel moyen.

Est-ce que jQuery a déjà un plug-in? Fonctionne-t-il également dans IE 6? Parce que généralement, l'affichage de par rapport à la fenêtre (en utilisant position: fixed) ne fonctionnera pas sur IE 6. merci.

Mise à jour: merci pour les bonnes solutions - je voulais délibérément qu'il fonctionne (1) même lorsque l'utilisateur a fait défiler la page, qu'il apparaîtra en haut de l'écran de la fenêtre et (2) le barre pourrait être choisi pour afficher en bas de l'écran de la fenêtre à la place (en option) ... et si cela fonctionne sur IE 6, il est encore mieux ... mauvais programmeurs de nos jours ...

Answer 1

Vous pouvez le faire avec seulement quelques lignes de code, comme celui-ci:

​​​​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; 
}​ 

You can view a working demo here, tweak comme nécessaire :) Cela crée un <div> à la volée, ajoute à la partie supérieure du corps, donc pas de positionnement funky à se soucier, cela devrait être très bien dans IE6. Quand c'est fini, il va glisser et enlever le <div> 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 j'ai joué et est venu avec cette belle fonction:

[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>