LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题，最大化，最小化，面板拖动关闭面板等功能。
使用方法
使用该Bootstrap面板功能增强插件需要引入jquery，jquery ui相关文件和bootstrap相关文件，以及lobipanel.css和lobipanel.js文件。
HTML结构
LobiPanel最基本的HTML结构如下，它完全是bootstrap标准的panel结构：
Panel title
Lorem ipsum...
初始化插件
在页面DOM元素加载完毕之后，可以通过lobiPanel()方法来初始化该插件。
$(function(){
$('.panel').lobiPanel({
// 配置参数
...
});
});
完成上面的操作之后，就可以得到类似下图的Panel面板。
使用面板右上角的图标按钮，你可以执行以下一些操作：
按钮将从文档中移除该Panel面板。注意，这个操作是不可撤销的。
按钮可以使面板全屏打开。
按钮从指定的URL中加载内容到.panel-body中。
按钮可以使面板浮动起来，并可以通过鼠标进行拖拽。再次点击这个按钮就可以使面板回到原来的位置上。
按钮有2个功能：
1、收缩已经展开的面板。
2、最小化该面板。
配置参数
以下所有的参数都可以通过data-*来设置，你只需要将参数的驼峰格式修改为连线格式即可。例如：connectWith参数使用data-*来表示就是data-connect-with。
你也可以在data-*属性中插入一个对象，例如：data-close="{tooltip: 'Something'}"。
参数
类型
默认值
描述
draggable
Boolean
true
面板是否可以拖动。注意，该选项需要jQuery ui draggable的支持
sortable
Boolean
false
面板是否可以排序。注意，该选项需要jQuery ui sortable的支持
connectWith
String
".ui-sortable"
jQuery ui排序插件选项
resize
String
"both"
设置面板缩放的方向，可选值有："both", "vertical", "horizontal", "none"
minWidth
Integer
200
面板的最小宽度
minHeight
Integer
100
面板的最小高度
maxWidth
Integer
1200
面板的最大宽度
maxHeight
Integer
700
面板的最大高度
loadUrl
String
""
加载内容的URL地址，如果没有提供reload按钮就不会加载任何东西
tooltips
Boolean
true
是否在面板控制按钮上显示tooltips
toggleIcon
String
"glyphicon glyphicon-cog"
下拉菜单切换图标
expandAnimation
Integer
100
扩展到全屏的动画持续时间
collapseAnimation
Integer
100
从全屏收缩回来的动画持续时间
unpin
Object
{
icon : 'glyphicon glyphicon-move',
tooltip : 'Unpin'
}
icon属性是切换拖动按钮的图标，tooltip属性是按钮的提示文本
reload
Object
{
icon : 'glyphicon glyphicon-refresh',
tooltip : 'Reload'
}
icon属性是重新加载按钮的图标，tooltip属性是按钮的提示文本
minimize
Object
{
icon : 'glyphicon glyphicon-minus',
icon2 : 'glyphicon glyphicon-plus',
tooltip : 'Minimize'
}
icon属性是全屏按钮的图标，icon2是收缩按钮的图标，tooltip属性是按钮的提示文本
close
Object
{
icon : 'glyphicon glyphicon-remove',
tooltip : 'Close'
}
icon属性是关闭按钮按钮的图标，tooltip属性是按钮的提示文本
editTitle
Object
{
icon: 'glyphicon glyphicon-pencil',
icon2: 'glyphicon glyphicon-floppy-disk',
tooltip: 'Edit title'
}
方法
可以通过2个方法来调用该插件的方法。
1、你可以获取LobiPanel的对象实例，然后调用方法。
//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、或者你也可以直接调用方法。
$('.lobipanel').lobiPanel('startLoading');
$('.lobipanel').lobiPanel("setPosition", 400, 360);
var position = $('.lobipanel').lobiPanel("getPosition");
方法
参数
返回类型
描述
isPanelInit
none
Boolean
检查面板是否被初始化。面板被初始化后会带有.lobipanel class和data-inner-id属性
isPinned
none
Boolean
检测面板是否是固定的
pin
none
LobiPanel对象
固定面板
unpin
none
LobiPanel对象
将面板浮动
togglePin
none
LobiPanel对象
将面板在固定和浮动之间切换
isMinimized
none
LobiPanel对象
检测面板是否被最小化
minimize
none
LobiPanel对象
最小化面板
maximize
none
LobiPanel对象
最大化面板
toggleMinimize
none
LobiPanel对象
在最大化和最小化之间切换
isOnFullScreen
none
Boolean
检测面板是否扩展到全屏
toFullScreen
none
LobiPanel对象
将面板扩展到全屏
toSmallSize
none
LobiPanel对象
将面板收缩到最小
toggleSize
none
LobiPanel对象
在全屏和最小面板之间切换
close
none
LobiPanel对象
关闭面板(将面板从文档中移除)
setWidth(width)
width - Integer, REQUIRED new width of the panel
LobiPanel对象
改变面板的宽度，如果宽度超出minWidth和maxWidth之间的范围，将使用minWidth或maxWidth来作为宽度
setHeight(height)
height - Integer, REQUIRED new height of the panel
LobiPanel对象
改变面板的高度，如果高度超出minHeight和maxHeight之间的范围，将使用minHeight或maxHeight来作为高度
setSize(width, height)
width - Integer, REQUIRED new width of the panel
height - Integer, REQUIRED new height of the panel
LobiPanel对象
通过指定的宽度和高度来设置面板的尺寸
getPosition
none
{
x: 'left coordinate',
y: 'top coordinate'
}
获取面板的当前位置
getWidth
none
面板的Integer类型宽度
获取面板的宽度
getHeight
none
面板的Integer类型高度
获取面板的高度
bringToFront
none
LobiPanel对象
如果面板被其它元素遮盖，使用该方法将面板放置在前面
enableDrag
none
LobiPanel对象
使面板可以被拖动，在浮动面板中该方法自动被调用
disableDrag
none
LobiPanel对象
禁止拖动面板
enableResize
none
LobiPanel对象
使面板可以修改尺寸
disableResize
none
LobiPanel对象
禁止面板修改尺寸
startLoading
none
LobiPanel对象
开始加载
stopLoading
none
LobiPanel对象
停止加载
setLoadUrl(url)
url - String , REQUIRED
LobiPanel对象
设置loadUrl属性
load(params)
params - Mixed，OPTIONAL
LobiPanel对象
通过ajax来加载内容到.panel-body中
destroy
none
jQuery元素
销毁LobiPanel实例
startTitleEditing
none
LobiPanel对象
编辑面板的标题
isTitleEditing
none
Boolean
检测面板标题是否在编辑中
cancelTitleEditing
none
LobiPanel对象
取消新编辑的标题，恢复原来的面板标题
finishTitleEditing
none
LobiPanel对象
完成面板标题的编辑
enableTooltips
none
LobiPanel对象
允许在面板控制按钮上显示提示文本
disableTooltips
none
LobiPanel对象
禁止在面板控制按钮上显示提示文本
事件
使用事件：
$('.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);
});
事件
描述
init.lobiPanel
当面板初始化时调用
beforeUnpin.lobiPanel
面板浮动前被调用
onUnpin.lobiPanel
面板浮动后被调用
beforeClose.lobiPanel
面板被关闭前调用
onClose.lobiPanel
面板被移除后调用
beforeToFront.lobiPanel
面板通过z-index属性被显示时调用
onToFront.lobiPanel
当面板被点击并通过z-index属性被显示时调用
beforePin.lobiPanel
面板被固定前调用
onPin.lobiPanel
面板被固定后调用
beforeMinimize.lobiPanel
面板最小化前调用
onMinimize.lobiPanel
面板最小化后调用
beforeMaximize.lobiPanel
面板最大化前调用
onMaximize.lobiPanel
面板最大化后调用
beforeFullScreen.lobiPanel
面板扩展到全屏前调用
onFullScreen.lobiPanel
面板扩展到全屏后调用
beforeSmallSize.lobiPanel
面板扩展从全屏时尚前调用
onSmallSize.lobiPanel
面板扩展从全屏时尚后调用
beforeLoad.lobiPanel
在面板内容被加载前调用
startLoading.lobiPanel
当通过ajax调用内容时触发
loaded.lobiPanel
当面板内容被加载后触发
resizeStart.lobiPanel
resize操作开始时触发
onResize.lobiPanel
在resize操作期间触发
resizeStop.lobiPanel
在浮动面板resize操作结束时触发
dragged.lobiPanel
在排序结束，DOM元素位置改变后触发
