LobiPanel

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.

Using 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 it is taken out from DOM hierarchy.

Basic example

Disable control buttons

Use font awesome icons

Constrain panel size

Unpin the panel and try to resize it.

Load content from url

Load content from specified url and apply highlight code

Multiple panels with drag & drop

Drag panels by clicking on the headers

Panel title

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

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

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 title

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

Initialize with data-* attributes

<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