Jquery message plug-in tooltip alarm prompt application example

Writing reason:

As a prompt box, jquery has a messagebox control, that is, a pop-up prompt box. However, if this control is not used for confirmation, you need to click "OK" for warning, message, or failure prompts, sometimes this operation is annoying (although you can set timeout, it will automatically disappear ).

Control requirements:

Now you need a simple message prompt control without confirmation.

1. The prompt box can be slide from the top or bottom.

2. You can set the slide time, content stay time, and slide time.

PS: relatively simple controls

The effect is as follows:

Compilation process:

1. If no document is available, we recommend that you write the definition of parameters that can be passed in at the beginning of the control.

Var defaults = {
ZIndex: 9999,
FadeInTimeOut: 1, // second
ContentTimeOut: 3,
FadeOutTimeOut: 1,
Position: "top" // show position top or bottom
};

In this way, the user is very clear about what he can set, even if there is no document, can play happily.

2. Considering browser compatibility

Because the prompt box of the control is fixed at the bottom or top, the position: fixed issue is inevitable.

IE6 IE7 IE8 fixed positioning element position: absolute is set, so location computing also needs to change.

3. Implementation of sliding effect

Slide, content stay, and slide.

The specific implementation is not described here. The Source Code link will be provided at the end.

PS: The most important thing is the above three.

Summary:

1. In the era highlighted by the user experience, this control was also made to give users a better experience.

2. When doing something (encoding), I always want to know if it can be used in a universal way, and controls and frameworks are nothing more than universal.

DEMO:

$ .MessageTip.info ({
Message: "I am sending a message .......",
FadeInTimeOut: 1, // enter the number of seconds
ContentTimeOut: 3, // content stay seconds
FadeOutTimeOut: 1, /// slip out seconds });