Lobipanel

LobiPanel is jquery plugin for bootstrap panels. It extends panels with several common and useful functions which does not come by default.

13011 Download View on Github

Features

  • Sort, drag, expand, resize, minimize bootstrap panels
  • Specify url and load content in panel from this url
  • Change the name of the panel
  • Customize action icons and action tooltips
  • Works for nested panels
  • HTML5 localStorage support:
    • Save panel state: (pinned, unpinned, collapsed, fullscreen, minimized) and apply it on page load
    • Save panel position among siblings and apply on next time

Installation and dependecies.

LobiPanel is depended on jQuery, jQuery ui and bootstrap.

1. Include necessary css/js files

<!DOCTYPE html>
<html>
   <head>
      <!--Include this css file in the <head> tag -->
      <link rel="stylesheet" href="lib/jquery-ui.min.css"/>
      <link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css"/>
      <link rel="stylesheet" href="dist/css/lobipanel.min.css"/>
   </head>

   <body>
      ...
      <!--Include these script files in the <head> or <body> tag-->
      <script src="lib/jquery.1.11.min.js"></script>
      <script src="lib/jquery-ui.min.js"></script>
      <script src="bootstrap/dist/js/bootstrap.min.js"></script>
      <script src="dist/js/lobipanel.min.js"></script>
   </body>
</html>

2. Initialize plugin

Basic usage

LobiPanel initialization is simple. Just create correct markup of bootstrap panel and call plugin

<div class="panel panel-default">
    <div class="panel-heading">
        <div class="panel-title">
            <h4>Panel title</h4>
        </div>
    </div>
    <div class="panel-body">
        Lorem ipsum...
    </div>
</div>
<script>
   $(function(){
        $('.panel').lobiPanel({
            //Options go here
            ...
        });
    });
</script>

And you will get the following result.

Panel title

Lorem ipsum...

Using the buttons on the right side of the panel heading you can perform several actions.

  • This button removes the panel from document.

    Warning!!!. This operation can not be undone.

  • This button expands the panel on full screen.
  • This button loads content in .panel-body from specified URL.
  • This button takes out the panel from its position in DOM hierarchy and makes it floating.

    Anytime you like (with the same button) you can put the panel in its position.

  • This button has two functions.
    1. It collapses and expands the panel.
    2. It minimizes the panel at the bottom of the page when panel is taken out from DOM hierarchy.

On small screen panel controls are hidden and dropdown toggle button is shown.

Options

Options can be set via data-* attributes also. Just used dashed version instead of camelCase. For example: connectWith option via data-* attributes will be data-connect-with.

You can also use objects via data-* attributes. Example: data-close="{tooltip: 'Something'}"

Name
Type
Default
Description
draggable [Boolean]
Boolean
Default true
Makes unpinned panel draggable. Warning!!! This requires jQuery ui draggable widget to be included.
sortable [Boolean]
Boolean
Default false
Makes pinned panels sortable. Warning!!! This requires jQuery ui sortable widget to be included.
connectWith [String]
String
Default ".ui-sortable"
jQuery ui sortable plugin option. To avoid any problems this option must be same for all panels of the same parent.
resize [String]
String
Default "both"
Set unpin panel resize direction Possible values: "both", "vertical", "horizontal", "none".
minWidth [Integer]
Integer
Default 200
Minimum width unpin, resizable panel can have.
minHeight [Integer]
Integer
Default 100
Minimum height unpin, resizable panel can have.
maxWidth [Integer]
Integer
Default 1200
Maximum width unpin, resizable panel can have.
maxHeight [Integer]
Integer
Default 700
Maximum height unpin, resizable panel can have.
loadUrl [String]
String
Default ""
The url which will be used to load content. If not provided reload button will do nothing.
tooltips [Boolean]
Boolean
Default true
This will enable tooltips on panel controls.
toggleIcon [String]
String
Default "glyphicon glyphicon-cog"
Dropdown toggle icon.
expandAnimation [Integer]
Integer
Default 100
Expand to full screen animation duration
collapseAnimation [Integer]
Integer
Default 100
Collapse from full screen animation duration
state new [String]
String
Default "pinned"
Initial state of the panel. Available options: pinned, unpinned, collapsed, minimized, fullscreen
initialIndex new [Integer]
Integer
Default null
Initial index of the panel among its siblings
stateful new [Integer]
Integer
Default 100
If you set this to true you must specify data-inner-id. Plugin will save (in localStorage) it's states such as pinned, unpinned, collapsed, minimized, fullscreen, position among it's siblings and apply them when you reload the browser
unpin [Object]
Object
Default 
{
    icon : 'glyphicon glyphicon-move',
    tooltip : 'Unpin'
}
By icon property you can change the Unpin button icon. The tooltip property changes the tooltip of the button.
reload [Object]
Object
Default 
{
    icon : 'glyphicon glyphicon-refresh',
    tooltip : 'Reload'
}
By icon property you can change the Reload button icon. The tooltip property changes the tooltip of the button.
minimize [Object]
Object
Default 
{
    icon : 'glyphicon glyphicon-minus',
    icon2 : 'glyphicon glyphicon-plus',
    tooltip : 'Minimize'
}
By icon property you can change the Minimize button icon. By icon2 property you can change the Minimize button icon. The tooltip property changes the tooltip of the button.
expand [Object]
Object
Default 
{
    icon : 'glyphicon glyphicon-resize-full',
    icon2 : 'glyphicon glyphicon-resize-small',
    tooltip : 'Fullscreen'
}
By icon property you can change the Fullscreen button icon. By icon2 property you can change the Fullscreen button icon. The tooltip property changes the tooltip of the button.
close [Object]
Object
Default 
{
    icon : 'glyphicon glyphicon-remove',
    tooltip : 'Close'
}
By icon property you can change the Close button icon. The tooltip property changes the tooltip of the button.
editTitle [Object]
Object
Default 
{
    icon: 'glyphicon glyphicon-pencil',
    icon2: 'glyphicon glyphicon-floppy-disk',
    tooltip: 'Edit title'
}
...
-->

Methods

Methods can be called in two ways.

1. You can get the LobiPanel - instance and call the method

//get the LobiPanel instance
var instance = $('.lobipanel').data('lobiPanel');
//call the methods
instance.unpin();
instance.setPosition(400, 360);
instance.setLoadUrl("htpp://www.example.com");
var position = instance.getPosition();
//method chaining is also available
instance.setSize(400, 400)
.setPosition(400, 360)
.setLoadUrl("htpp://www.example.com")
.load();

2. Or you can call the method directly

$('.lobipanel').lobiPanel('startLoading');
$('.lobipanel').lobiPanel("setPosition", 400, 360);
var position = $('.lobipanel').lobiPanel("getPosition");
Name
Parameters
Return type
Description
isPanelInit - Return Boolean
Parameters none
Boolean
Checks if panel is initialized. Panel is initialized if it has .lobipanel class and data-inner-id attribute
isPinned - Return Boolean
Parameters none
Boolean
Checks if panel is pinned
pin - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Pin the panel
unpin - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Unpin the panel
togglePin - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Toggles (pin or unpin) the panel
isMinimized - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Checks if panel is minimized or not. It does not matter if panel is pinned or not
minimize - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Minimizes the panel. If panel is pinned it is minimized on its place, if panel is unpinned it is minimized at the bottom of the page

If pinned panel is minimized and buttons will not work

maximize - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Maximize the panel. This method works for minimized panel. If panel is pinned it's maximized on its place. If panel is unpinned it's maximized on position from which it was minimized.
toggleMinimize - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Toggles (minimize or maximize) the panel state
isOnFullScreen - Return Boolean
Parameters none
Boolean
Checks if panel is expanded on full screen
toFullScreen - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Expands the panel to full screen size
toSmallSize - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Collapse the panel to small size
toggleSize - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Toggles (changes to full screen size or to small size) the panel size
close - Return LobiPanel - instance
Parameters none
LobiPanel - instance
Closes the panel (Removes it from document)
setWidth(width) - Return LobiPanel - instance
Parameters:
width - Integer, REQUIRED new width of the panel
LobiPanel - instance
Change the width of the panel. If given width is out of range of minWidth and maxWidth it is reduced to maxWidth size or increased to minWidth size.
setHeight(height) - Return LobiPanel - instance
Parameters:
height - Integer, REQUIRED new height of the panel
LobiPanel - instance
Change the height of the panel. If given height is out of range of minHeight and maxHeight it is reduced to maxHeight size or increased to minHeight size.
setSize(width, height) - Return LobiPanel - instance
Parameters:
width - Integer, REQUIRED new width of the panel
height - Integer, REQUIRED new height of the panel
LobiPanel - instance
Set size (width and height) of the panel.

If given width is out of range of minWidth and maxWidth it is reduced to maxWidth size or increased to minWidth size.

If given height is out of range of minHeight and maxHeight it is reduced to maxHeight size or increased to minHeight size.

getPosition
- Return Object 
{
    x: 'left coordinate',
    y: 'top coordinate'
}
Parameters: none 
{
    x: 'left coordinate',
    y: 'top coordinate'
}
Get the current position of the panel
getWidth - Return Integer width of the panel
Parameters: none
Integer width of the panel
Get width of the panel
getHeight - Return Integer height of the panel
Parameters: none
Integer height of the panel
Get height of the panel
bringToFront - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
If panel is overlapped by another panel this metho will show overlapped panel on front. This is automatically done when you click panel which is on back
enableDrag - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Enable dragging of panel. This is automatically called when panel is unpinned
disableDrag - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Disable dragging of the panel. This is automatically called when panel is pinned, or minimized on footer, or maximized on full screen.
enableResize - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Enable resize of the panel
disableResize - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Disable resize of the panel
startLoading - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Start spinner of the panel loading
stopLoading - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Stop spinner of the panel loading
setLoadUrl(url) - Return LobiPanel - instance
Parameters:
url - String , REQUIRED. Url to load content
LobiPanel - instance
Set loadUrl property.
load(params) - Return LobiPanel - instance
Parameters:
params - Mixed, OPTIONAL This parameter may be String (which will be used as url to load content) or Object of the following format. 
{
    url: 'String', //OPTIONAL load url
    data: 'PlainObject or String', //OPTIONAL: A plain object or string of parameters which is sent to the server with the request.
    callback: 'function' //OPTIONAL:  callback function which is called when load is finished
}
LobiPanel - instance
Loads content by ajax into .panel-body. If parameter was not provided, loadUrl property will be used as URL.
destroy - Return jQuery element
Parameters: none
jQuery element
Destroy the LobiPanel instance
startTitleEditing - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Creates input field to edit panel title
isTitleEditing - Return Boolean
Parameters: none
Boolean
Check if panel title is being edited (if it is in edit process)
cancelTitleEditing - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Cancel the panel new title and return to previous title when it is changed but not saved
finishTitleEditing - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Finish the panel title editing process and save new title
enableTooltips - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Enable tooltips on panel controls
disableTooltips - Return LobiPanel - instance
Parameters: none
LobiPanel - instance
Disable tooltips on panel controls
-->

Events

Using event

$('.lobipanel').on('init.lobiPanel', function(ev, lobiPanel){
    window.console.log("init event called");
});
$('.lobipanel').on('beforeUnpin.lobiPanel', function(ev, lobiPanel){
    window.console.log("Before unpin", lobiPanel);
});
$('.lobipanel').on('onSmallSize.lobiPanel', function(ev, lobiPanel){
    window.console.log("On small size", ev, lobiPanel);
});
$('.lobipanel').on('loaded.lobiPanel', function(ev, lobiPanel, result, status, xhr){
    window.console.log("Loaded", ev, lobiPanel, result, status, xhr);
});
Name
Parameters
Description
init.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is initialized
beforeUnpin.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is unpinned
onUnpin.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is unpinned
beforeClose.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is closed
onClose.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is removed
beforeToFront.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel (which is overlapped by another panel) is shown with high z-index
onToFront.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel (which is overlapped by another panel) is clicked and it is shown with high z-index
beforePin.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is pinned
onPin.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is pinned
beforeMinimize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is minimized
onMinimize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is minimized
beforeMaximize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is maximized
onMaximize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is maximized
beforeFullScreen.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is expanded on full screen
onFullScreen.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is expanded on full screen
beforeSmallSize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel is collapsed from full screen to small size
onSmallSize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel is collapsed from full screen to small size
beforeLoad.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
Before panel content is loaded
startLoading.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
When panel starts loading content by ajax
loaded.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
result - result of ajax call
status - status of ajax call
xhr - XMLHttpRequest object
When panel content is loaded
resizeStart.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
This event is triggered at the start of a resize operation.
onResize.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
This event is triggered during the resize
resizeStop.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
This event is triggered at the end of the unpin panel resize operation.
dragged.lobiPanel
Parameters:
event - jQuery event
LobiPanel - instance of plugin
This event is triggered when sorting is stopped and the DOM position has changed.

Basic example

Panel title
Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiPanel();

Disable control buttons

Panel title
Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiPanel({
    reload: false,
    close: false,
    editTitle: false
});

Use font awesome icons

Panel title
Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiPanel({
    reload: {
        icon: 'fa fa-refresh'
    },
    editTitle: {
        icon: 'fa fa-edit',
        icon2: 'fa fa-save'
    },
    unpin: {
        icon: 'fa fa-arrows'
    },
    minimize: {
        icon: 'fa fa-chevron-up',
        icon2: 'fa fa-chevron-down'
    },
    close: {
        icon: 'fa fa-times-circle'
    },
    expand: {
        icon: 'fa fa-expand',
        icon2: 'fa fa-compress'
    }
});

Constrain panel size

Unpin the panel and try to resize it.

Panel title
Lorem ipsum dolor sit amet concealed leaf shah proper council binary. Concealed assured affairs faces, finish easily glows shouted faint. Sentence islands spouting we unbeguiled, faces concealed. Diam rays countries, faces fames peeling bind wary catch solomon, painting, they beats evil. Failing newer landscapes steal retinues vidi rays echoes sheltered evil. Veins concealed spouting obtaining delight wild. Venenatis failing wreaths shouted countries wild, privilege climbing. 
$('selector').lobiPanel({
    minWidth: 300,
    minHeight: 300,
    maxWidth: 600,
    maxHeight: 480
});

Load content from url

Load content from specified url and apply highlight code

Content from url

$('selector').on('loaded.lobiPanel', function(ev, lobiPanel){
    var $body = lobiPanel.$el.find('.panel-body');
    $body.html('<div class="highlight"><pre><code>' + $body.html() + '</code></pre></div>');
    hljs.highlightBlock($body.find('code')[0]);
});
$('selector').lobiPanel({
    loadUrl: 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css',
    bodyHeight: 400
});

Multiple panels with drag & drop

Drag panels by clicking on the headers

Panel title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Panel title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Panel title

64x64

Media heading

Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin commodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.

Panel title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Panel title

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
$('.panel').lobiPanel({
    sortable: true
});

Initialize with data-* attributes

This is panel title
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter 
<div class="panel panel-default lobipanel" data-inner-id="lobipanel-data-attributes" data-body-height="300" data-tooltips="false" data-min-width="400" data-resize="horizontal" data-close="{tooltip: 'custom'}">
   <div class="panel-heading">
       <div class="panel-title">
           This is panel title
       </div>
   </div>
   <div class="panel-body">
        content
   </div>
</div>

Nested LobiPanel example

LobiPanel title

Nested LobiPanel title

Panel 1

Panel title

Panel 2

Panel title

Panel 3

Panel title

Panel 4

Panel title

Panel 5
--> 
<div class="panel panel-info lobipanel">
    <div class="panel-heading">
        <div class="panel-title">
            <h4>LobiPanel title</h4>
        </div>
    </div>
    <div class="panel-body">
        <div class="panel panel-warning lobipanel">
            <div class="panel-heading">
                <div class="panel-title">
                    <h4>Nested LobiPanel title</h4>
                </div>
            </div>
            <div class="panel-body">
                Panel 1
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 2
                    </div>
                </div>
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 3
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 4
                    </div>
                </div>
                <div class="panel panel-default lobipanel" data-sortable="true">
                    <div class="panel-heading">
                        <div class="panel-title">
                            <h4>Panel title</h4>
                        </div>
                    </div>
                    <div class="panel-body">
                        Panel 5
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
-->

VPS servers from 5$.

Easily deploy an SSD cloud server on @DigitalOcean in 55 seconds. Sign up using the following link and receive $10 in credit