laurie71 edited this page May 2, 2011 · 8 revisions
Clone this wiki locally

Welcome to the jquery-toaster wiki!





The toast plugin is used to actually create and manipulate toast messages. To create a toast:


where selector is a jQuery selector for some existing page content to convert into a toast message, or the markup of the toast message itself, as in:

    $('<p>This is a toast message.</p>').toast();


Options are specified in the standard way, as a hash passed to the initial call to .toast(). For example, to set the sticky option:

    $('<p>This is a toast message.</p>').toast({ sticky: true });

The supported options are:

  • closeText default: Close

    • The text to use as the title attribute on the close link/icon.
  • duration default: 6000

    • The duration, in milliseconds, after which the toast message will fade away. To prevent toasts from fading out automatically, see the sticky option.
  • selector default: .toaster

    • The jQuery selector for the toast message container. If selector doesn't match an element on the page, it will be created.
  • sticky default: false

    • By default toast messages fade away after a short time (see the duration option). Set sticky to false to make a toast stay until closed by the user.
  • type default: none

    • The type of toast message: none, info, notice, warn and error are supported by default. Specifying none will remove the icon image to the left of the notice content.
  • width default: 200

    • The width of the toast message.


Methods are invoked in the standard way, by calling .toast() with the name of the method:


To call a method on a toast that was created on the fly, you can save a reference to the toast when you create it:

var t = $(selector).toast();


  • close
    • fired when a toast message is closed.