开发者

Where can I read how to make web notifiers such as the StackExchange at the top left side of StackOverflow screen?

I'm 开发者_运维知识库not even sure what the name of that is to be able to make a search... but I would like to make those kind of things. Facebook has that too with the messages, notifications and friends requests. Thanks


I'm not sure if you expect anyone to give you a complete tutorial with source code included? :) You should probably do some digging around yourself, since a concrete answer on this could mean to write a few pages :)
How can you dig around? Thé tool for a job like that is Firebug (IMO).

With bigger tasks like these it makes sense to try to split it up in smaller pieces.
Let's say you go for a widget like the user profile popup on SO.

  1. you need some HTML to display in a popup: right click on any html element on the popup and click the 'inspect element' menu item. This brings you to the HTML tab in firebug. This allows you to figure out how the HTML is structured
  2. you need some CSS to style that popup: when you're browsing the html structure, you might already have noticed that on the right side of it is the CSS that is applied to the active element
  3. you might want to use some animation effects: for that you could use jquery. Have a look here to find out more on which effects are available and how they can be triggered. Fading is used in the profile popup on SO.
  4. then you might ask yourself the question where SO get's that html structure from, right? To find out more about which server calls are made you can use the 'NET' tab in Firebug. (When you hover over your user name (only the first time?), then you should notice there's a call made to something like: http://stackoverflow.com/users/profile-link-stats?_=someLongNumberHere
    In firebug you can then inspect the request and response. You should notice that the response is some HTML structure. This HTML structure is then inserted into the DOM.

Sooooo you can kinda glue it all together now:

  • the user hovers over his user name
  • the hovering triggers a server call (see step 4): use jquery hover to attach a handler to the user link. (subsequent hovers don't trigger that server call, so there needs to be a check to see if that profile popup was already loaded or not)
  • when the server call successfully returns (see jquery get), the returned html is inserted into the DOM and a fadeIn effect is triggered.
  • it seems a mouseout is used to fadeOut the popup

I HOPE this is the answer you were looking for. It took me a while ;)


You probably need to check out stackapps

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜