Toaster

A toaster is an inobtrusive mechanism for displaying messages, and has become popular in recent years. Like toast, the message "pops up" in the window corner, temporarily overlaying any content there. The message stays up for a certain duration, or until the user clicks on it.
Toasters are preferrable to alert() boxes. Alert() must always be modal, meaning all action on the page stops until the user clicks "OK". Toasters are non-modal, so the user can continue working and finish their thought before responding.
You can either set the message programmatically, or use dojo's publish/subscribe event feature. Publish/subscribe allows you to have several toasters, or several controls besides toasters, respond to a particular event.
Examples
The first example uses setContent() and show() to vary the message and display it.
<script type="text/javascript"> dojo.require("dojox.widget.Toaster"); dojo.require("dojo.parser"); </script> ... <div dojoType="dojox.widget.Toaster" id="toast" positionDirection="br-left" duration="0" style="display:hide"></div> <script> function surpriseMe() { dijit.byId('toast').setContent('Twinkies are now being served in the vending machine!','fatal',500); dijit.byId('toast').show(); } </script> <input type="button" onclick="surpriseMe()" value="Click here"/>
The next example does the same thing, but uses the publish/subscribe model. The message coming over the topic must be of the form:
- "message" : a single string with the message text
- -OR- {message: "...", type: "...", duration: "..."}: where message is the message text, duration is as the attribute, and type is either:
- fatal
- error
- warning
- message
- in decreasing order of severity.
<div dojoType="dojox.widget.Toaster" id="toast" positionDirection="br-left" duration="0" messageTopic = "testMessageTopic" ></div> <script> function surpriseMe() { dojo.publish("testMessageTopic", [ { message: "Twinkies are now being served in the vending machine!", type: "fatal", duration: 500 } ] ); } </script> <input type="button" onclick="surpriseMe()" value="Click here"/>
Dijit Types, Attributes, Events and Methods
dojox.widget.Toaster
Message that slides in from the corner of the screen, used for notifications like "new email".
|
|||
Attributes
|
|||
duration | integer | 2000 | Duration of the message, in ms. 0 means the user must acknowledge the message by clicking on it. |
messageTopic | String or object | - | Subscription topic to monitor. When a page publishes a message on this topic, the toaster will pop up. |
positionDirection | br-up br-left bl-up bl-right tr-down tr-left tl-down tl-right | br-up | Corner from which message slides into screen (e.g. br=bottom right) and direction of slide. |
separator | html | <hr> | If more than one unacknowledged message is present separate them with this. |
Events
|
|||
onSelect | called when user clicks the message to acknowledge it | ||
Methods
|
|||
hide() | Hide the toaster | ||
setContent( String message, String type, int duration) | Set the content of the message to message. type can be "message" ,"warning", "error", "fatal" and determines the color (hence the importance)of the message. Duration is in ms, like the duration attribute. | ||
show() | Display the toaster | ||
CSS Classes I'm not quite sure how to represent these yet. In this case, you set styles on dojoProgressBarColorLayer and set the class of the outer div to dojoProgressBarColor.
|
|||
Accessibility
- Printer-friendly version
- Login or register to post comments
- Subscribe post
css file
Don't forget to load dojox/widget/Toaster/Toaster.css if you want nicely colored toasters like those shown in the examples/tests.