Simply include the files in your HTML page and write a simple line of code like this:
toastr.success('Are you the six fingered man?', 'Inigo Montoya');
Hans is a great developer / designer and has recently helped me created some nice responsive designs in some demos and Pluralsight courses. You can see the layout he helped design and create in my latest course, JsRender Fundamentals on Pluralsight now.
There are 4 methods to learn. info, warning, success and error. The each have a message and an optional title.
// Display a info toast, with no title toastr.info('Are you the six fingered man?')
// Display a warning toast, with no title
toastr.warning('My name is Inigo Montoya. You Killed my father, prepare to die!')
// Display a success toast, with a title
toastr.success('Have fun storming the castle!', 'Miracle Max Says')
// Display an error toast, with a title
toastr.error('I do not think that word means what you think it means.', 'Inconceivable!')
After having it in alpha for a few weeks and accepting feedback on it, we decided today to take it to beta as the API has stabilized.
toastr is Responsive
Just include the viewport meta tag and the toastr-responsive.css, and toastr will adjust to different device sizes. See toastr and its responsive web design here on responsinator.com
Some important links:
- see toastr in action at toastr’s demo page here
- grab toastr from github at https://github.com/CodeSeven/toastr
What Else Can toastr Do?
Check out the demo for these and other examples of toastr in action.
- Override the css classes to change the appearance
- Set the fadeOut, fadeIn, and timeOut settings
- Set timeOut to 0 to make the toast sticky
- Position the toast in the top left, top right, bottom right, or bottom left
- Set the message to HTML content and/or wire event handlers up to that content.
- For debugging, set the debug info to true to show all of the options and setting in the browser’s console window
Feel free to check out toastr’s unit tests, which you can run online here. We decided to go simple and use QUnit, which does the job quite nicely.
I published a package on NuGet for toastr that you can find here. Be sure to allow searching for pre-release packages (NuGet disables that by default). We do not foresee any changes to the API so this beta should be pretty solid. If we receive no major issues, we’ll go RC very soon.