jQuery lobibox Plugin Demos

Messageboxes

Basic Usage

Confirm

Lobibox.confirm({
    ... //Options
});        

Alert

Lobibox.alert(
    'error|success|warning|info', // Any of the following
    {
        ... //Options
    }
);        

Prompt

Lobibox.prompt(
    '', // Any HTML5 input type is valid
    {
        ... //Options
    }
);        

Progress

Lobibox.progress({
    ... //Options
});

Window

Lobibox.window({
    ... //Options
});

Options

Default options for all messageboxes

horizontalOffset: 5, //If the messagebox is larger (in width) than window's width. The messagebox's width is reduced to window width - 2 * horizontalOffset
width           : 600,
height          : 'auto',  // Height is automatically given calculated by width
closeButton     : true,  // Show close button or not
draggable       : false,  // Make messagebox draggable 
customBtnClass  : 'lobibox-btn-default', // Class for custom buttons
modal           : true,
debug           : false,
buttonsAlign    : 'center', // Position where buttons should be aligned
closeOnEsc      : true,  // Close messagebox on Esc press

//Overriding default options
Lobibox.base.DEFAULTS = $.extend({}, Lobibox.base.DEFAULTS, {
    ... //override any options from default options
});

Available options for all messageboxes

Lobibox.base.OPTIONS = {
//DO NOT change this value. Some functionality is depended on it
    bodyClass       : 'lobibox-open',
//DO NOT change this object. Some functionality is depended on it
    modalClasses : {
        'error'     : 'lobibox-error',
        'success'   : 'lobibox-success',
        'info'      : 'lobibox-info',
        'warning'   : 'lobibox-warning',
        'confirm'   : 'lobibox-confirm',
        'progress'  : 'lobibox-progress',
        'prompt'    : 'lobibox-prompt',
        'default'   : 'lobibox-default',
        'window'    : 'lobibox-window'
    },
//This is option how buttons can be shown. What are buttonsAlign option available values
    buttonsAlign: ['left', 'center', 'right'],
//You can change the title or class of buttons from here or use the same structure object for button when creating messagebox
//closeOnClick : true will close the messagebox when clicking this type of button. Set it to false not to close messagebox when clicking on it
    buttons: {
        ok: {
            'class': 'lobibox-btn lobibox-btn-default',
            text: 'OK',
            closeOnClick: true
        },
        cancel: {
            'class': 'lobibox-btn lobibox-btn-cancel',
            text: 'Cancel',
            closeOnClick: true
        },
        yes: {
            'class': 'lobibox-btn lobibox-btn-yes',
            text: 'Yes',
            closeOnClick: true
        },
        no: {
            'class': 'lobibox-btn lobibox-btn-no',
            text: 'No',
            closeOnClick: true
        }
    }
};


//Overriding default options
Lobibox.base.OPTIONS = $.extend({}, Lobibox.base.OPTIONS, {
    ... //override any options except those above which is written "DO NOT change"
});

Default options for confirm

title           : 'Question',
width           : 500,
iconClass       : 'glyphicon glyphicon-question-sign'

//Overriding default options
Lobibox.confirm.DEFAULTS = $.extend({}, Lobibox.confirm.DEFAULTS, {
    ... //override any options from default options
});

Default options for prompt

width: 400,
attrs : {},         // Plain object of any valid attribute of input field
value: '',          // Value which is given to textfield when messagebox is created
multiline: false,   // Set this true for multiline prompt
lines: 3,           // This works only for multiline prompt. Number of lines
type: 'text',       // Prompt type. Available types (text|number|color)
label: ''           // Set some text which will be shown exactly on top of textfield

//Overriding default options
Lobibox.prompt.DEFAULTS = $.extend({}, Lobibox.prompt.DEFAULTS, {
    ... //override any options from default options
});

Default options for alert


Lobibox.alert.DEFAULTS = {
    warning: {
        title: 'Warning',
        iconClass: 'glyphicon glyphicon-question-sign' // Change warning alert icon globally 
    },
    info:{
        title: 'Information',
        iconClass: 'glyphicon glyphicon-info-sign'  // Change info alert icon globally 
    },
    success: {
        title: 'Success',
        iconClass: 'glyphicon glyphicon-ok-sign'  // Change success alert icon globally 
    },
    error: {
        title: 'Error',
        iconClass: 'glyphicon glyphicon-remove-sign'  // Change error alert icon globally 
    }
};

//Overriding default options
Lobibox.alert.DEFAULTS = $.extend({}, Lobibox.alert.DEFAULTS, {
    ... //override any options from default options
});

Default options for progress

width               : 500,
showProgressLabel   : true,     // Show percentage of progress
label               : '',       // Show progress label
progressTpl         : false,    //Template of progress bar
<!-- You can use bootstrap progress bar by correct template -->
<!-- FOR EXAMPLE -->
<!-- This element must have class "lobibox-progress-outer" -->
<div class="progress lobibox-progress-outer">
    <!-- This element must have class "lobibox-progress-element" -->
    <div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>
</div>

//Overriding default options
Lobibox.progress.DEFAULTS = $.extend({}, Lobibox.progress.DEFAULTS, {
    ... //override any options from default options
});


                            

Default options for window

width           : 480,
height          : 600,
content         : '',       // HTML Content of window
url             : '',       // URL which will be used to load content
draggable       : true,     // Override default option
autoload        : true,     // Auto load from given url when window is created
loadMethod      : 'GET',    // Ajax method to load content
showAfterLoad   : true,     // Show window after content is loaded or show and then load content
params          : {}        // Parameters which will be send by ajax for loading content

//Overriding default options
Lobibox.window.DEFAULTS = $.extend({}, Lobibox.window.DEFAULTS, {
    ... //override any options from default options
});

Methods

In order to call methods, first you must get the instance of the messagebox.

There are two ways to get the instance of the messagebox

// 1. Save the instance in variable when showing messagebox
var lobibox = Lobibox.confirm({
    msg         : "Are you sure you want to delete this user?"
});
// 2. Or you can select the lobibox message element and get instance by data attribute
var lobibox = $('.lobibox-confirm').data('lobibox');

// And you can call any avaiable method
lobibox.hide();
lobibox.show();
lobibox.setWidth(600);
lobibox.setPosition(200, 400);
lobibox.setTitle('New title');

Methods for all messageboxes

Name
Parameters
Return type
Description
hide - Return Instance
Parameters none
Instance
Hide the messagebox
destroy - Return Instance
Parameters none
Instance
Removes the messagebox from document
setWidth(width) - Return Instance
Parameters
width - Integer, REQUIRED new width of messagebox
Instance
Set the width of messagebox
setHeight(height) - Return Instance
Parameters
height - Integer, REQUIRED new height of messagebox
Instance
Set the height of messagebox
setSize(width, height) - Return Instance
Parameters
width - Integer, REQUIRED new width of messagebox
height - Integer, REQUIRED new height of messagebox
Instance
Set the width and height of messagebox
setPosition(left, top) - Return Instance
Parameters
left - (Integer|String), REQUIRED left coordinate of messsagebox or string representaing position. Available: ('top', 'center', 'bottom')
top - Integer, OPTIONAL Top coordinate of messagebox
Instance
Set position of messagebox
setTitle(title) - Return Instance
Parameters
title - String, REQUIRED new title of messagebox
Instance
Set the title of messagebox
getTitle - Return String
Parameters none
String
Get the title of messagebox
show - Return Instance
Parameters none
Instance
Show messagebox

Methods for prompt

Name
Parameters
Return type
Description
setValue(val) - Return Instance
Parameters
val - String, REQUIRED value of input
Instance
Set value of input
getVaue - Return String
Parameters none
String
Get value of input

Methods for progress

Name
Parameters
Return type
Description
setProgress(progress) - Return Instance
Parameters
progress - Integer, REQUIRED progress value
Instance
Set progress value
getProgress - Return Integer
Parameters none
Integer
Get progress value

Methods for window

Name
Parameters
Return type
Description
setParams(params) - Return Instance
Parameters
params - Object, REQUIRED new params
Instance
Setter method for params option
getParams - Return Object
Parameters none
Object
Getter method for params
setLoadMethod(method) - Return Instance
Parameters
method - String, REQUIRED new method
Instance
Setter method of loadMethod option
getLoadMethod - Return String
Parameters none
String
Getter method for loadMethod option
setContent(content) - Return Instance
Parameters
content - String, REQUIRED new content
Instance
Setter method of content option. Change the content of window
getContent - Return String
Parameters none
String
Getter method of content option
setUrl(url) - Return Instance
Parameters
url - String, REQUIRED new url
Instance
Setter method of url option
getUrl - Return String
Parameters none
String
Getter method of url option
load(callback) - Return Instance
Parameters
callback - Function, OPTIONAL callback function
Instance
Loads content to window by ajax from specific url

Events

Using events

Lobibox.alert('info', {
    onShow: function(lobibox){
        
    }
});

Common events for all types messagebox

Name
Parameters
Description
onShow
Parameters:
Lobibox - instance of plugin
Before messagebox is shown
shown
Parameters:
Lobibox - instance of plugin
After messagebox is shown
beforeClose
Parameters:
Lobibox - instance of plugin
Before messagebox is closed
hidden
Parameters:
Lobibox - instance of plugin
After messagebox is closed

Progress messagebox event

Name
Parameters
Description
progressUpdated
Parameters:
Lobibox - instance of plugin
When progressbar progress is changed
progressCompleted
Parameters:
Lobibox - instance of plugin
When progressbar progress is completed

Examples

Lobibox.confirm({
    msg: "Are you sure you want to delete this user?",
});     
Lobibox.alert(type, //AVAILABLE TYPES: "error", "info", "success", "warning"
{
    msg: "Lorem ipsum dolor sit amet byron frown tumult minstrel wicked clouded bows columbine full"
});
Lobibox.prompt('text', //Any input type will be valid
{
    title: 'Please enter username',
    //Attributes of <input>
    attrs: { 
        placeholder: "Username"
    }
});
Lobibox.progress({
    title: 'Please wait',
    label: 'Uploading files...',
    onShow: function ($this) {
        var i = 0;
        var inter = setInterval(function () {
            window.console.log(i);
            if (i > 100) {
                inter = clearInterval(inter);
            }
            i = i + 0.1;
            $this.setProgress(i);
        }, 10);
    }
});        
Lobibox.progress({
    title: 'Please wait',
    label: 'Uploading files...',
    progressTpl : '<div class="progress lobibox-progress-outer">\n\
                <div class="progress-bar progress-bar-danger progress-bar-striped lobibox-progress-element" data-role="progress-text" role="progressbar"></div>\n\
                </div>',
    onShow: function ($this) {
        var i = 0;
        var inter = setInterval(function () {
            window.console.log(i);
            if (i > 100) {
                inter = clearInterval(inter);
            }
            i = i + 0.1;
            $this.setProgress(i);
        }, 10);
    }
});  
Lobibox.window({
    title: 'Window title',
    content: '...'
});        

Custom buttons

 Lobibox.alert('error', {
    msg: 'This is an error message',
    //buttons: ['ok', 'cancel', 'yes', 'no'],
    //Or more powerfull way
    buttons: {
        ok: {
            'class': 'btn btn-info',
            closeOnClick: false
        },
        cancel: {
            'class': 'btn btn-danger',
            closeOnClick: false
        },
        yes: {
            'class': 'btn btn-success',
            closeOnClick: false
        },
        no: {
            'class': 'btn btn-warning',
            closeOnClick: false
        },
        custom: {
            'class': 'btn btn-default',
            text: 'Custom'
        }
    },
    callback: function(lobibox, type){
        var btnType;
        if (type === 'no'){
            btnType = 'warning';
        }else if (type === 'yes'){
            btnType = 'success'; 
        }else if (type === 'ok'){
            btnType = 'info';
        }else if (type === 'cancel'){
            btnType = 'error';
        }
        Lobibox.notify(btnType, {
            size: 'mini',
            msg: 'This is ' + btnType +' message'
        });
    }
});        

Disable icon

Lobibox.confirm({
    iconClass: false,
    msg: 'Are you sure?'
});        

Advanced usage of Lobibox.window

Lobibox.window({
    title: 'Window title',
    //Available types: string, jquery object, function
    content: function(){
        return $('.container');
    },
    url: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',
    autoload: false,
    loadMethod: 'GET',
    //Load parameters
    params: {
        param1: 'Lorem',
        param2: 'Ipsum'
    },
    buttons: {
        load: {
            text: 'Load from url'
        },
        close: {
            text: 'Close',
            closeOnClick: true
        }
    },
    callback: function($this, type, ev){
        if (type === 'load'){
            $this.load(function(){
                //Do something when content is loaded
            });
        }
    }
});        

Callbacks

All popup boxes have callback option

Lobibox.confirm({
    msg: "Are you sure you want to delete this user?",
    callback: function ($this, type, ev) {
        //Your code goes here
    }
});        

Progress does not update itself.

But you can implement it easily when uploading or waiting something

Notifications

Basic usage

Lobibox.notify(
    'warning',  // Available types 'warning', 'info', 'success', 'error'
    {
        ...
    }
);    

Options

Default options for lobibox notifications

title: true,                // Title of notification. Do not include it for default title or set custom string. Set this false to disable title
size: 'normal',             // normal, mini, large
showClass: 'flipInX',       // Show animation class. (Uses animate.css)
hideClass: 'zoomOutDown',   // Hide animation class (Uses animate.css)
icon: true,                 // Icon of notification. Leave as is for default icon or set custom string
msg: '',                    // Message of notification
img: null,                  // Image source string
closable: true,             // Make notifications closable
delay: 5000,                // Hide notification after this time (in miliseconds)
delayIndicator: true,       // Show timer indicator
closeOnClick: true,         // Close notifications by clicking on them
width: 400,                 // Width of notification box
sound: true,                // Sound of notification. Set this false to disable sound. Leave as is for default sound or set custom soud path
position: "bottom right"    // Place to show notification. Available options: "top left", "top right", "bottom left", "bottom right"        

//Overriding default options
Lobibox.notify.DEFAULTS = $.extend({}, Lobibox.notify.DEFAULTS, {
    ... //override any options from default options
});

Available options for lobibox notifications

Lobibox.notify.OPTIONS = {
    'class': 'animated-fast',
    soundPath: 'src/sounds/',
//You can override options for large notifications from here
    large: {
        width: 500
    },
//You can override options for small notifications from here
    mini: {
        'class': 'notify-mini'
    },
//Default options of different style notifications
    success: {
        'class': 'lobibox-notify-success',
        'title': 'Success',
        'icon': 'glyphicon glyphicon-ok-sign',
        sound: 'sound2.mp3'
    },
    error: {
        'class': 'lobibox-notify-error',
        'title': 'Error',
        'icon': 'glyphicon glyphicon-remove-sign',
        sound: 'sound4.mp3'
    },
    warning: {
        'class': 'lobibox-notify-warning',
        'title': 'Warning',
        'icon': 'glyphicon glyphicon-exclamation-sign',
        sound: 'sound5.mp3'
    },
    info: {
        'class': 'lobibox-notify-info',
        'title': 'Information',
        'icon': 'glyphicon glyphicon-info-sign',
        sound: 'sound6.mp3'
    }
};   

//Overriding default options
Lobibox.notify.OPTIONS = $.extend({}, Lobibox.notify.OPTIONS, {
    ... //override any options from default options
});

Methods

Name
Parameters
Return type
Description
remove - Return Instance
Parameters none
Instance
Delete the notification

Examples

Basic notifications Can be closed by clicking on it
Lobibox.notify(type, {
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes. Slight fallen one opportunity dyspepsia, puzzled quickening throbbing row worm numerous sagittis wreaths.'
});
With image
Lobibox.notify(type, {
    ...
    img: '...', //path to image
});
Disable sound
Lobibox.notify(type, {
    ...
    sound: false,
});        
Custom title
Lobibox.notify(type, {
    ...
    title: 'Custom title',
});      
Without icon and image
Lobibox.notify(type, {
    ...
    icon: false,
});      
Increase delay time
Lobibox.notify(type, {
    ...
    delay: 15000,  //In milliseconds
});      
Sticky (without delay)
Lobibox.notify(type, {
    ...
    delay: false,
});      
Alternative position
Lobibox.notify(type, {
    ...
    position: 'bottom right' //AVAILABLE OPTIONS: 'top left', 'top right', 'bottom left', 'bottom right'
});      
Change width
Lobibox.notify(type, {
    ...
    width: 400 //Any Integer
});      
Change Animation

For animation Lobibox is depended on animate.css. You can use any animate.css classes

By default .animated class is added

Lobibox.notify(type, {
    ...
    showClass: 'fadeInDown',
    hideClass: 'fadeUpDown',
    width: 400 //Any Integer
});      

Large Notifications

Large notifications

  • are sticky
  • can be closed only by clicking close button
  • does not have delay
  • are larger in width
Lobibox.notify(type, {
    ...
    size: 'large',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        

With Image

Lobibox.notify(type, {
    ...
    img: '...',
    size: 'large',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        
Alternative position
Lobibox.notify(type, {
    ...
    size: 'large',
    position: 'bottom left',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        
Change animation
Lobibox.notify(type, {
    ...
    size: 'large',
    showClass: 'fadeInDown',
    hideClass: 'fadeUpDown',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        

Mini notifications

For mini notifications icon and image is shown on small size and title is disabled by default. Although you can enable it by giving title parameter when initializing.

Lobibox.notify(type, {
    ...
    size: 'mini',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        

With image

Lobibox.notify(type, {
    ...
    size: 'mini',
    img: '...',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        

Without icon

Lobibox.notify(type, {
    ...
    size: 'mini',
    icon: false,
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});        

With title

Lobibox.notify(type, {
    ...
    size: 'mini',
    title: 'Lorem ipsum',
    msg: 'Lorem ipsum dolor sit amet against apennine any created, spend loveliest, building stripes.'
});