jQuery Status Box Plugin

This plugin/widget makes for easily making nice status boxes. These are great for feedback from events to users.

EZ Example:

This should go away…

Jump to Download

It has 3 event actions. Open, Close, and Collide. Open is when a message comes in and it’s been in standby. Close is when it’s timer expires and it goes to hide again, and Collide is when you issue a new message before the old one has closed.

Simply all you have to do is the following:

Init:

1
$('.identifier').statusbox();

Or you can pass new functions to handle open/close/collide events, and the duration before the box is closed.
After that, you simply have to issue a display command:

1
2
3
4
5
6
7
8
9
10
11
12
13
var params = {
  duration : 2000,
  open : function(obj) {
    obj.slideDown('slow');
  },
  close : function(obj) {
    obj.slideUp('slow');
  },
  collide : function(obj) {
    obj.effect('highlight', {}, 2000);
  }
};
$('.identifier').statusbox(params);

After that, you simply have to issue a display command:

1
$('.identifier').statusbox('display', 'Show this message.');

It will roll down, show the message, and roll back up.

Versions:

Download jQuery Status Box Widget v1.1 (1.92 kB js) (for jQuery UI 1.8.x)

Download jQuery Status Box Widget v1.0 (2.01 kB js) (for jQuery UI 1.7.x)

Leave a Reply

*

twitter