For documentation visit Lobipanel webpage

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

Stateful. Saves its state in localStorage

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({
    stateful: true
});

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

Default 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.

primary 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.

Info 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.

Success 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.

Warning 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.

Danger 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>