LobiPanel is jquery plugin for bootstrap panels. It extends panels with several common and useful functions which does not come by default.
LobiPanel is depended on jQuery, jQuery ui and bootstrap.
<!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>
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.
Warning!!!. This operation can not be undone.
.panel-body
from specified URL.Anytime you like (with the same button) you can put the panel in its position.
On small screen panel controls are hidden and dropdown toggle button is shown.
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'}"
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");
Boolean
none
Boolean
.lobipanel
class and data-inner-id
attribute
Boolean
none
Boolean
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
If pinned panel is minimized and buttons will not work
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
Boolean
none
Boolean
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
Integer
, REQUIRED
new width of the panelLobiPanel
- instance
minWidth
and maxWidth
it is reduced to maxWidth
size or increased to minWidth
size.
LobiPanel
- instance
Integer
, REQUIRED
new height of the panelLobiPanel
- instance
minHeight
and maxHeight
it is reduced to maxHeight
size or increased to minHeight
size.
LobiPanel
- instance
Integer
, REQUIRED
new width of the panelInteger
, REQUIRED
new height of the panelLobiPanel
- instance
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.
Object
{
x: 'left coordinate',
y: 'top coordinate'
}
none
{
x: 'left coordinate',
y: 'top coordinate'
}
Integer
width of the panel
none
Integer
width of the panel
Integer
height of the panel
none
Integer
height of the panel
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
String
, REQUIRED
. Url to load contentLobiPanel
- instance
loadUrl
property.
LobiPanel
- instance
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
.panel-body
. If parameter was not provided, loadUrl
property will be used as URL.
jQuery element
none
jQuery element
LobiPanel
- instance
none
LobiPanel
- instance
Boolean
none
Boolean
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
LobiPanel
- instance
none
LobiPanel
- instance
$('.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);
});
event
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginz-index
event
- jQuery eventLobiPanel
- instance of pluginz-index
event
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginresult
- result of ajax callstatus
- status of ajax callxhr
- XMLHttpRequest objectevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of pluginevent
- jQuery eventLobiPanel
- instance of plugin$('selector').lobiPanel();
$('selector').lobiPanel({
reload: false,
close: false,
editTitle: false
});
$('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'
}
});
Unpin the panel and try to resize it.
$('selector').lobiPanel({
minWidth: 300,
minHeight: 300,
maxWidth: 600,
maxHeight: 480
});
Load content from specified url and apply highlight code
$('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
});
Drag panels by clicking on the headers
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
$('.panel').lobiPanel({
sortable: true
});
data-*
attributes# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @fat |
3 | Larry | the Bird |
<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>
<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>