jQuery是否具有用于显示“消息栏"的插件?像Twitter的“密码错误"屏幕顶部的条形? [英] Does jQuery have a plugin to display a "message bar" like the Twitter "wrong password" bar at the top of screen?

问题描述

Twitter将在屏幕顶部弹出一个消息栏，显示密码错误"，并在10秒钟后向上滑动并消失. Chrome也会通过这种方式显示是否要保存密码"消息框.

Twitter will pop down a message bar at the top of the screen say "Wrong password" and after 10 seconds, it will slide up and disappear. Chrome also shows "Do you want to save the password" message box using such a way.

jQuery是否已经有插件来做到这一点?在IE 6中也可以使用吗?因为通常，相对于视口的显示(使用position: fixed)在IE 6上无法正常工作.

Does jQuery have a plug in to do that already? Does it also work in IE 6? Because usually, the display of relative to the viewport (using position: fixed) will not work on IE 6. thanks.

更新:感谢您提供了不错的解决方案-我故意希望它能够正常工作(1)，即使用户向下滚动页面，该页面也将显示在窗口屏幕的顶部，并且(2)可以选择将条形显示在窗口屏幕的底部，而不是(作为选择)...并且，如果它在IE 6上可以运行，那就更好了……如今可怜的程序员...

Update: thanks for the nice solutions -- I deliberately wanted it to work (1) even when the user has scrolled down the page, that it will show at the top of the window screen and (2) the bar might be chosen to display at the bottom of window screen instead (as an option)... and if it works on IE 6 then it is even better... poor programmers nowadays...

推荐答案

您只需执行几行代码即可，如下所示:

You can do this with just a few lines of code, like this:

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

然后只给您使用某些样式的类，例如:

Then just give the class you use some styling, for example:

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

您可以在此处查看有效的演示，并根据需要进行调整:)这将创建一个<div>即时将其添加到主体顶部，因此不必担心时髦的定位，这在IE6中应该没问题.完成后，它将滑动并删除创建的<div>进行清理.您可以添加一个单击处理程序以立即将其删除，等等，无论您需要什么.

You can view a working demo here, tweak as needed :) This creates a <div> on the fly, adds it to the top of the body, so no funky positioning to worry about, this should be just fine in IE6. When it's finished it'll slideUp and remove the <div> it created to cleanup. You can add a click handler to remove it instantly, etc, whatever your needs are.

这篇关于jQuery是否具有用于显示“消息栏"的插件?像Twitter的“密码错误"屏幕顶部的条形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！