Details | Last modification | View Log | RSS feed
| Rev | Author | Line No. | Line |
|---|---|---|---|
| 1 | espaco | 1 | # toastr |
| 2 | **toastr** is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended. |
||
| 3 | |||
| 4 | [](https://travis-ci.org/CodeSeven/toastr) |
||
| 5 | |||
| 6 | ## Current Version |
||
| 7 | 2.1.0 |
||
| 8 | |||
| 9 | ## Demo |
||
| 10 | - Demo can be found at http://codeseven.github.io/toastr/demo.html |
||
| 11 | - [Demo using FontAwesome icons with toastr](http://plnkr.co/edit/6W9URNyyp2ItO4aUWzBB?p=preview) |
||
| 12 | |||
| 13 | ## CDNjs |
||
| 14 | Toastr is hosted at CDN JS |
||
| 15 | |||
| 16 | #### Debug |
||
| 17 | - [//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js](//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.js) |
||
| 18 | - [//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css](//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.css) |
||
| 19 | |||
| 20 | #### Minified |
||
| 21 | - [//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js](//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js) |
||
| 22 | - [//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css](//cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css) |
||
| 23 | |||
| 24 | ## NuGet Gallery |
||
| 25 | http://nuget.org/packages/toastr |
||
| 26 | |||
| 27 | ## [Bower](http://bower.io/) |
||
| 28 | bower install toastr |
||
| 29 | |||
| 30 | |||
| 31 | ## Wiki and Change Log |
||
| 32 | [Wiki including Change Log](https://github.com/CodeSeven/toastr/wiki) |
||
| 33 | |||
| 34 | ## Breaking Changes |
||
| 35 | |||
| 36 | ####Animation Changes |
||
| 37 | The following animations options have been deprecated and should be replaced: |
||
| 38 | |||
| 39 | - Replace `options.fadeIn` with `options.showDuration` |
||
| 40 | - Replace `options.onFadeIn` with `options.onShown` |
||
| 41 | - Replace `options.fadeOut` with `options.hideDuration` |
||
| 42 | - Replace `options.onFadeOut` with `options.onHidden` |
||
| 43 | |||
| 44 | ## Quick start |
||
| 45 | |||
| 46 | ###3 Easy Steps |
||
| 47 | For other API calls, see the [demo](http://codeseven.github.io/toastr/demo.html). |
||
| 48 | |||
| 49 | 1. Link to toastr.css `<link href="toastr.css" rel="stylesheet"/>` |
||
| 50 | |||
| 51 | 2. Link to toastr.js `<script src="toastr.js"></script>` |
||
| 52 | |||
| 53 | 3. use toastr to display a toast for info, success, warning or error |
||
| 54 | |||
| 55 | // Display an info toast with no title |
||
| 56 | toastr.info('Are you the 6 fingered man?') |
||
| 57 | |||
| 58 | ### Other Options |
||
| 59 | // Display a warning toast, with no title |
||
| 60 | toastr.warning('My name is Inigo Montoya. You killed my father, prepare to die!') |
||
| 61 | |||
| 62 | // Display a success toast, with a title |
||
| 63 | toastr.success('Have fun storming the castle!', 'Miracle Max Says') |
||
| 64 | |||
| 65 | // Display an error toast, with a title |
||
| 66 | toastr.error('I do not think that word means what you think it means.', 'Inconceivable!') |
||
| 67 | |||
| 68 | // Clears the current list of toasts |
||
| 69 | toastr.clear() |
||
| 70 | |||
| 71 | ### Close Button |
||
| 72 | Optionally enable a close button |
||
| 73 | |||
| 74 | toastr.options.closeButton = true; |
||
| 75 | |||
| 76 | Optionally override the close button's HTML. |
||
| 77 | |||
| 78 | toastr.options.closeHtml = '<button><i class="icon-off"></i></button>'; |
||
| 79 | |||
| 80 | You can also override the CSS/LESS for `#toast-container .toast-close-button` |
||
| 81 | |||
| 82 | ### Display Sequence |
||
| 83 | Show newest toast at bottom (top is default) |
||
| 84 | |||
| 85 | toastr.options.newestOnTop = false; |
||
| 86 | |||
| 87 | ### Callbacks |
||
| 88 | // Define a callback for when the toast is shown/hidden |
||
| 89 | toastr.options.onShown = function() { console.log('hello'); } |
||
| 90 | toastr.options.onHidden = function() { console.log('goodbye'); } |
||
| 91 | |||
| 92 | ### Animation Options |
||
| 93 | Toastr will supply default animations, so you do not have to provide any of these settings. However you have the option to override the animations if you like. |
||
| 94 | |||
| 95 | ####Easings |
||
| 96 | Optionally override the animation easing to show or hide the toasts. Default is swing. swing and linear are built into jQuery. |
||
| 97 | |||
| 98 | toastr.options.showEasing = 'swing'; |
||
| 99 | toastr.options.hideEasing = 'linear'; |
||
| 100 | |||
| 101 | Using the jQuery Easing plugin (http://www.gsgd.co.uk/sandbox/jquery/easing/) |
||
| 102 | |||
| 103 | toastr.options.showEasing = 'easeOutBounce'; |
||
| 104 | toastr.options.hideEasing = 'easeInBack'; |
||
| 105 | |||
| 106 | ####Animation Method |
||
| 107 | Use the jQuery show/hide method of your choice. These default to fadeIn/fadeOut. The methods fadeIn/fadeOut, slideDown/slideUp, and show/hide are built into jQuery. |
||
| 108 | |||
| 109 | toastr.options.showMethod = 'slideDown'; |
||
| 110 | toastr.options.hideMethod = 'slideUp'; |
||
| 111 | |||
| 112 | |||
| 113 | ###Timeouts |
||
| 114 | Control how toastr interacts with users by setting timeouts appropriately. |
||
| 115 | |||
| 116 | toastr.options.timeout = 30; // How long the toast will display without user interaction |
||
| 117 | toastr.options.extendedTimeOut = 60; // How long the toast will display after a user hovers over it |
||
| 118 | |||
| 119 | ## Building Toastr |
||
| 120 | |||
| 121 | To build the minified and css versions of Toastr you will need [node](http://nodejs.org) installed. |
||
| 122 | |||
| 123 | Install the [Grunt](http://gruntjs.com/) command line. This might require `sudo`. |
||
| 124 | |||
| 125 | ```shell |
||
| 126 | npm install -g grunt-cli |
||
| 127 | ``` |
||
| 128 | |||
| 129 | Then, from the main project folder run this command. This should not require `sudo`. |
||
| 130 | |||
| 131 | ```shell |
||
| 132 | npm install |
||
| 133 | ``` |
||
| 134 | |||
| 135 | At this point the dependencies have been installed and you can build Toastr |
||
| 136 | |||
| 137 | ```shell |
||
| 138 | grunt |
||
| 139 | ``` |
||
| 140 | |||
| 141 | ## Authors |
||
| 142 | **Hans Fjällemark** |
||
| 143 | |||
| 144 | + http://twitter.com/hfjallemark |
||
| 145 | |||
| 146 | **John Papa** |
||
| 147 | |||
| 148 | + http://twitter.com/John_Papa |
||
| 149 | |||
| 150 | ## Credits |
||
| 151 | Inspired by https://github.com/Srirangan/notifer.js/. |
||
| 152 | |||
| 153 | |||
| 154 | ## Copyright |
||
| 155 | Copyright © 2012-2014 [Hans Fjällemark](http://twitter.com/hfjallemark) & [John Papa](http://twitter.com/John_Papa). |
||
| 156 | |||
| 157 | ## License |
||
| 158 | toastr is under MIT license - http://www.opensource.org/licenses/mit-license.php |