jquery Message Tip plugin TOASTR usage details

Toastr is a simple, beautiful message tip plugin based on jquery, simple and convenient to use, and can automatically disappear according to the set time-out.

1, the use is very simple, the first choice to introduce Toastr JS, CSS files

Html

<script src="<%=path%>/res/toastr/toastr.min.js"></script><link rel="stylesheet " href="<%=path%>/res/toastr/toastr.min.css ">

2. Effect

3. Integrated use

1 //general message hint, default background is light blueToastr.info ("you've got new news!");
2 //success message hint, default background is light greenToastr.success ("you've got new news!");
3 //warning message hint, the default background is orangeToastr.warning ("you've got new news!");
4 //error message hint, default background is light redToastr.error ("you've got new news!");
5 //a message box with a captionToastr.success ("you've got new news!","message Prompt");
  6 //Another method of callingtoastr["Info"]("you've got new news!","message Prompt");

4. Custom Usage

Different effects can be achieved by setting custom parameters

Custom parameters:
Javascript

1Toastr.options = {  2CloseButton:false,  3Debugfalse,  4ProgressBar:true,  5Positionclass:"Toast-bottom-center",  6OnClickNULL,  7Showduration:" -",  8Hideduration:" +",  9TimeOut:" -",  TenExtendedTimeout:" +",   OneShoweasing:"Swing",   AHideeasing:"Linear",   -Showmethod:"FadeIn",   -Hidemethod:"FadeOut"   the};

Parameter description:
Closebutton:false, whether to show the Close button (the upper right corner of the Cue box Close button);
Debug:false, whether for debugging;
Progressbar:false, whether to display the progress bar (set the closing time-out progress bar);
Positionclass, where the message box appears on the page

1 toast-top-  left top 2 toast-top-    right Top 3 toast-top-  Center  Top center 4 toast-top-full-widthtop, Width covered full screen 5 toast-botton-right   6 toast-bottom-left7 toast-bottom-Center8 Toast-bottom-full-width

1 onclick, click the message box to customize the event2Showduration: " -", Show action time3Hideduration: " +", Hide action time4TimeOut: " -", auto-off time-out5ExtendedTimeout: " +"6 showeasing: "Swing",7 hideeasing: "Linear",8 showmethod: "FadeIn" is displayed in the same way as jquery9Hidemethod: "FadeOut" hides the same way as jquery

jquery Message Tip plugin TOASTR usage details