jQuery是否有一个插件来显示“消息栏”，如屏幕顶部的Twitter“错误密码”栏？

Twitter会弹出屏幕顶部的消息栏，说“密码错误”，10秒后，它会向上滑动并消失。 Chrome还会使用这种方式显示“您是否要保存密码”消息框。

jQuery是否有插件可以做到这一点？ 它在IE 6中也有效吗？ 因为通常，相对于视口的显示（使用position: fixed ）将无法在IE 6上运行。谢谢。

更新：感谢很好的解决方案 – 即使用户向下滚动页面时，我也特意希望它能正常工作（1），它会显示在窗口屏幕的顶部，（2）可能会选择显示栏而不是在窗口屏幕的底部（作为一个选项）…如果它在IE 6上工作，那么它甚至更好……现在可怜的程序员……

Answer 1

你可以用几行代码完成这个，如下所示：

 ​​​​function topBar(​​​message) { $("
", { '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; }​ 

你可以在这里查看一个有效的演示 ，根据需要进行调整:)这会在运行中创建一个

，将它添加到正文的顶部，所以没有时髦的定位需要担心，这在IE6中应该没问题。 当它完成时，它将滑动并删除它创建的

以进行清理。 无论您的需求是什么，您都可以添加点击处理程序以立即删除它。

Answer 2

好吧，我玩了一下，想出了这个不错的function：

[ http://jsfiddle.net/2arVf/上的实例%5D

 // // 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, '
', // create an array to add our // two handlers with #yes and #no IDs '', yes ,'', '' , no ,'' ].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 $("
").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', 'and have any html',, 'Do you like me?' ].join('
'), '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：

 
I'm the main page. I'll do some space if there is a message
 
Click me
 .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Click me too