Twitter的通知阿贾克斯吧，他们是如何做到的呢？ [英] Twitter notification ajax bar, how did they do it?

问题描述

我试图让很酷，阿贾克斯滑动条，Twitter的有（其微透明，白色）。

I'm trying to get that cool, ajax sliding bar that twitter has (its slightly transparent, white).

我试图寻找在HTML / CSS，但似乎他们动态注入的各种DOM层。

I tried looking at the html/css, but it seems that they dynamically inject the various DOM layers.

是否有人知道他们是如何实现的呢？

Does someone know how they implemented it?

我真的想学习如何做到这一点。

I really want to learn how to do this.

推荐答案

在Firebug或的document.ready运行此code（）

run this code in firebug or on document.ready()

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
opacity:"0.5"
})
.appendTo("body");

，你应该有一个即时通知栏...

and you should have an instant notification bar...

如果您熟悉jQuery的（我假设你是，因为这个问题被标记与jQuery），你可以调整CSS和HTML值，以满足您的需求......

If you are familiar with jQuery (which I assume you are, because the question is tagged with jquery), you can tweak the CSS and HTML values to suit your needs...

要拥有它滑下你可以这样做：

To have it slide Down you would do this:

$("<div id='notification'>Notification text here</div>").css({
position:"fixed",
top:"0px",
left:"0px",
height:"20px",
width:"100%",
backgroundColor:"#cccccc",
color:"blue",
padding:"5px",
fontWeight:"bold",
textAlign:"center",
display:"none", //<-- notice this new value
opacity:"0.5"
})
.appendTo("body");
$("#notification").slideDown("slow"); //<-- this is the animation code

免责声明：只是一个快速的东西我刮起了，也不会感到惊讶，如果它在IE浏览器没有工作

Disclaimer: just a quick thing I whipped up, won't be surprised if it didn't work in IE

这篇关于Twitter的通知阿贾克斯吧，他们是如何做到的呢？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！