基于jQuery UI的Bootstrap Panel面板功能增强插件 Lobipanel - jQuery plugin for bootstrap panels

jQuery之家 返回下载页

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>