jKnotify is a JavaScript notification library based on KDE4's Knotify. It display unintrusive notifications in the corner of the screen instead of using old-school alert() style functionality, or the only slightly less annoying lightbox functionality. It can easily handle input, too, and comes with an extension (jKnotifyUi) to help build simple user interfaces.
See the bottom of the page for a demo
Usage is simple: $.jKnotify('hello!', options)
Options is, as usual, a map of optionName : value.
| Option | Default | Description |
|---|---|---|
| closable(bool) | true | Specifies whether or not the notification should have the 'x' button. |
| closeOnButtonClick(bool) | true | If true, the notification will be closed if any input button is clicked within the message property. This allows a fairly simple way to deal with user input |
| collapse(int) | false | A timer (ms) before the notification is collapsed and only the title bar is visible. |
| icon(string) | false | URL to an icon to display in the title bar. |
| passive(bool) | true | If true, the notification will close when the user clicks it. |
| timeout(int) | false | A timeout before the notification self-closes. |
| title(string) | false | A title to display in the title bar. |
| titleBar(bool) | true | Whether or not to display a title bar. Note that if you don't display this, the 'x' close-clicker will not be displayed, so you must make sure there's another way to close the notification. |
jKnotifyUI is a wrapper around jKnotify that basically acts as a form builder. The procedure is something like this:
$.jKnotifyUi().jK.toggleInput('I like chips', 'chips', true)
.jK.button('Submit', 'submit')
.jK.button('Wait, I made a mistake', 'reset')
.jK.callback(function(args) {
if (args.chips)
$.jKnotify('Yes you do!');
else
$.jKnotify('But everyone likes chips!');
})
.jK.finish();
From the above, you can see that $.jKnotifyUi() returns an object
which has a set of form building functions on it, which you then call
before finally calling .jK.finish() to create the notification.
| Function | Arguments | Description |
|---|---|---|
| jK.button | text(string)type(string) | Adds a button to the body with the given text. Valid types are: 'yes', 'no' (triggers boolean argument to callback and closes notification), 'submit' (map argument to callback, closes notification), 'cancel' (closes notification without firing callback) and 'reset' (resets input elements to default). |
| jK.callback | func(function) | Sets the callback function. What this receives depends on what input element is clicked. A yes/no box triggers a boolean argument. A submit button triggers a map of properties which are keyed by the names supplied to $.jk.textInput(). |
| jK.closable | closable(bool) | Sets whether or not the notification should be closable, i.e. whether or not there's an 'x' for the user to click. Generally you'll want this to be false as you don't want the request for input to be lost. |
| jK.form | method(string)action(string) | Creates a real HTML form which if coupled with a submit button will really submit. |
| jK.icon | url(string) | Sets an icon (in the title bar) |
| jK.selectInput | text(string) name(string) selections(map) default(string) | Adds a select box to your notification with the given text, name, selections and default value. The selections are given as a map of name: text. They are inserted in the order given. |
| jK.text | text(string) | Adds some text to the body |
| jK.textInput | text(string) name(string) options(map) | Adds a text input box. This has a visible label of 'text' and it is referred to in the callback's arguments as 'name'. Valid options (and defaults) are: {closeOnEnter: true, password: false, default: ''}. |
| jK.title | title(string) | Sets a title |
| jK.toggleInput | text (string) name (string) checked(bool) | Adds a toggle (checkbox) input with the given label (text), name, and sets whether it is checked by default or not. |
Look at the source to see exactly how each of these is constructed. Really!