Есть ли в jQuery плагин для отображения «панели сообщений», такой как панель «неправильный пароль» Twitter в верхней части экрана?

Question

Щебет выскочит на панель сообщений в верхней части экрана, произнеся «Неверный пароль», и через 10 секунд он сдвинется и исчезнет. Chrome также показывает окно «Вы хотите сохранить пароль», используя такой способ.

Есть ли в jQuery подключаемый модуль, чтобы сделать это уже? Он также работает в IE 6? Потому что, как правило, отображение относительно окна просмотра (с использованием position: fixed) не будет работать на IE 6. Спасибо.

Обновление: спасибо за приятные решения - я намеренно хотел, чтобы он работал (1), даже если пользователь прокрутил страницу вниз, что он будет отображаться в верхней части окна, и (2) бар может быть выбран для отображения внизу экрана окна вместо (в качестве опции) ... и если он работает на IE 6, тогда еще лучше ... бедные программисты в настоящее время ...

Answer 1

Вы можете сделать это всего лишь несколько строк кода, как это:

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

Тогда просто дать класс вы используете какой-то стиль, например:

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

You can view a working demo here, настройки по мере необходимости :) Это создает <div> на лету, добавляет его к верхней части тела, поэтому не напуганный позиционирование беспокоиться о том, что это должно быть просто отлично в IE6. Когда он будет завершен, он сдвинется и удалит <div>, который был создан для очистки. Вы можете добавить обработчик кликов, чтобы удалить его мгновенно и т. Д., Независимо от ваших потребностей.

Answer 2

Ну я играл и придумал эту хорошей функции:

[живой пример на 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); 
} 

Пример:

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