UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it's easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.
The event Emitter is used by many of the components to emit events like "hide" and "show" among others, but it's public API! so you're free to use it in your projects.
Currently the Emitter API is defined as following:
var emitter = new ui.Emitter;
emitter.on('event', callback);
emitter.once('event', callback);
emitter.off('event', callback);
emitter.off('event');
emitter.emit('event', foo, bar, baz);The Dialog component is the basis of more specific components such the Confirmation Dialog.
Click here to open a simple dialog that closes after 2 seconds.
new ui.Dialog({ title: 'Title', message: "I'm a simple dialog" })
.show()
.hide(2000);
By default dialogs do not have a close button, but it's easy to add one! Click here to try it.
new ui.Dialog({ title: 'Title', message: "I'm a dialog that wont auto-close" })
.closable()
.show();
ui.dialog(msg) is a nice shortcut, try it here.
ui.dialog('Just another dialog')
.closable()
.show();
How about a title this time? try it.
ui.dialog('Title', 'Just another dialog')
.closable()
.show();
Dialogs will remain open until you .close() them, optionally providing a delay in milliseconds. Try it.
var dialog = ui.dialog("I'll close in 2 seconds").show();
setTimeout(function(){
dialog.hide();
}, 2000);
This method adds an overlay, which may be clicked (by default) to close the dialog. Test it out.
ui.dialog('Overlay time')
.closable()
.overlay()
.show();
This method adds an overlay which is not clickable, the user must interact with the dialog. Test it out.
ui.dialog('Overlay time')
.closable()
.modal()
.show();
Effects are simply applied via CSS classes, no JavaScript animations, so they're nice and fast! Try out the slide effect.
ui.dialog('Hello!')
.effect('slide')
.show()
.hide(1500);
Try a few more, and remember, they're just classes! create your own.
Dialog is aware of the "active" dialog, and when shown will hide the other. Test it out! click one of the links below and then quickly click another.
Dialogs are of course not limited to the textual content mentioned so far, jQuery objects and other UIKit components may also be passed.
The Confirmation extends Dialog to provide a confirmation dialog.
Click here to confirm removal of a user.
new ui.Confirmation({ title: 'Remove user', message: 'are you sure?' })
.show(function(ok){
if (ok) ui.dialog('user removed!').show().hide(1500);
});
Much like ui.dialog() there's a shortcut, try it here. We can tweak the button text with .ok() and .cancel().
ui.confirm('Remove user', 'are you sure?')
.ok('Remove')
.cancel('No dont!')
.show(function(ok){
if (ok) ui.dialog('user removed!').show().hide(1500);
});
You may omit the title as well, try it here. Clicking cancel or close will invoke the callback with false.
ui.confirm('are you sure?')
.closable()
.show(function(ok){
if (ok) ui.dialog('done!').show().hide(1500);
else ui.dialog('never-mind').show().hide(1500);
});
A simple, small, elegant color picker component.
With default dimensions of 180x180. On change rgb(0,0,0) will update channels individually, or rgb(0,0,0) with toString().
var picker = new ui.ColorPicker;
picker.el.appendTo('#default-color-picker');
picker.on('change', function(color){
$('.r').text(color.r)
$('.g').text(color.g)
$('.b').text(color.b)
$('.rgb').text(color.toString()).css('background', color)
});
Adjust both width and height.
var picker = new ui.ColorPicker;
picker.size(100);
picker.el.appendTo('#color-picker-size');
Either the width or height may be adjusted individually.
var picker = new ui.ColorPicker;
picker.width(80);
picker.el.appendTo('#color-picker-width');
Tight uikit integration means that components can interact, providing you with a simple API, simply add the picker as the message. Click to try it.
ui.dialog('Select a color', new ui.ColorPicker)
.effect('slide')
.closable()
.show();
A simple double-sided card component.
The following example displays a ColorPicker on the back face and a simple paragraph on the front. Any component or jQuery()-able value may be used. You may also programmatically flip the card.
var picker = new ui.ColorPicker;
var card = ui.card('<p>Click to show a color picker</p>', picker);
card.el.appendTo('#card');
$('#flip').click(function(){
card.flip();
})
Unobtrusive growl-style notifications.
Notifications come in three flavours, ui.notify() for general "info" messages, ui.warn() for warnings, and ui.error() for errors. These are identical except for the additional CSS class added to the list element. The notifications API is much like Dialog, titles are optional, and you can do things like .hide() the notification after a given duration defaulting to 4 seconds, they are .closable(), and may also be .sticky(). Click here to give it a try!
$('#notify').click(function(e){
e.preventDefault();
ui.notify('Email', 'you have 3 new messages')
.effect('slide');
setTimeout(function(){
ui.warn('Warning', 'something happened')
.effect('slide');
setTimeout(function(){
ui.error('Error', 'something failed')
.closable()
.hide(8000)
.effect('slide');
setTimeout(function(){
ui.notify('Stick notification')
.sticky()
.effect('slide');
}, 200);
}, 200);
}, 200);
});
Simple menu component.
A Menu is comprised of textual menu items and optional arbitrary callback functions. To add an item invoke Menu#add(), and to remove pass the same text to Menu#remove(). Give it a try! right click on this page.
var menu = ui.menu()
.add('Add item')
.add('Edit item', function(){ console.log('edit'); })
.add('Remove item', function(){ console.log('remove'); })
.add('Remove "Add item"', function(){
menu
.remove('Add item')
.remove('Remove "Add item"');
});
menu.on('Add item', function(){
console.log('item added');
});
oncontextmenu = function(e){
e.preventDefault();
menu.moveTo(e.pageX, e.pageY).show();
};
The split button component
The SplitButton component emits three events, "click" when the button itself is clicked, "show" and "hide" for when the contents display is toggled. This component is abstract, it is not bound to a Menu or ColorPicker etc, one should inherit from this component to display content.
var button = new ui.SplitButton('Action');
button.on('click', function(){
ui.notify('Button clicked');
});
button.on('show', function(){
ui.notify('Show dropdown');
});
button.on('hide', function(){
ui.notify('Hide dropdown');
});
button.el.appendTo('.example-split-button');