The XWiki Notification Widget
Version 3.1 by Guillaume Delhumeau on 2011/12/22
Usage
The XWiki notification widget is a general purpose notification JavaScript class, displaying a simple message for the user, at the bottom of the screen.
Features:
- Several default aspects: plain, info, warning, error, inprogress, done.
- Stacking of multiple notifications on the screen.
- Possibility to replace a notification with another one, preserving the position.
- Automatic hide after a configurable period of time.
- Configurable icon, background and text color.
To display a notification, it suffices to create a new XWiki.widgets.Notification object. Constructor parameters:
| Parameter | Description | Optional |
|---|---|---|
| text | The notification text | no |
| type | The notification type, one of plain, info, warning, error, inprogress, done. If an unknown or no type is passed, plain is used by default. | yes |
| options | Additional configuration; supported options:
| yes |
Default parameters for the predefined notification types:
| Notification Type | Parameter Values |
|---|---|
| plain |
|
| info |
|
| warning |
|
| error |
|
| inprogress |
|
| done |
|
Example
To see the notification in action just click here.
Here is the example code of the XWiki widget which displays the inprogress notification above:
To see the notification in action just click <a href="#Example" onclick="new XWiki.widgets.Notification('This tutorial is a work in progress.', 'warning');">here</a>.
Tips
Check out the Javascript code:
- for your wiki instance:http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.js
- from git: https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.js.
Check out the CSS code:
- for your wiki instance:http://localhost:8080/xwiki/bin/skin/resources/uicomponents/widgets/notification.css
- from git: https://github.com/xwiki/xwiki-platform/blob/master/xwiki-platform-core/xwiki-platform-web/src/main/webapp/resources/uicomponents/widgets/notification.css.
