UIkit

API

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);

Example

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);
              
            

.closable()

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)

ui.dialog(msg) is a nice shortcut, try it here.

              
      ui.dialog('Just another dialog')
        .closable()
        .show();
              
            

ui.dialog(title, msg)

How about a title this time? try it.

              
      ui.dialog('Title', 'Just another dialog')
        .closable()
        .show();
              
            

.hide([ms])

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);
              
            

.overlay()

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();
              
            

.modal()

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();
              
            

.effect(name)

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.

• slide
• fade
• scale

Auto-closing

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.

• slide
• fade
• scale

Rich content

Dialogs are of course not limited to the textual content mentioned so far, jQuery objects and other UIKit components may also be passed.

• jQuery object
• ColorPicker

Example

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);
        });
              
            

ui.confirm(title, msg)

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);
        });
              
            

ui.confirm(msg)

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);
        });
              
            

Example

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)
    });
            
          

.size(n)

Adjust both width and height.

            
    var picker = new ui.ColorPicker;
    picker.size(100);
    picker.el.appendTo('#color-picker-size');
            
          

.width(n) / .height(n)

Either the width or height may be adjusted individually.

            
    var picker = new ui.ColorPicker;
    picker.width(80);
    picker.el.appendTo('#color-picker-width');
            
          

ColorPicker in a Dialog

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();
            
          

Example

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();
    })
            
          

Example

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);
  });
          

Example

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();
};
          

Example

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');