基于jQuery UI的Bootstrap Panel面板功能增强插件

LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增强插件。通过该插件可以为Bootstrap的原生Panel面板增加编辑标题，最大化，最小化，面板拖动关闭面板等功能。

使用方法

使用该Bootstrap面板功能增强插件需要引入jquery，jquery ui相关文件和bootstrap相关文件，以及lobipanel.css和lobipanel.js文件。

<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"/>

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

HTML结构

LobiPanel最基本的HTML结构如下，它完全是bootstrap标准的panel结构：

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

初始化插件

在页面DOM元素加载完毕之后，可以通过lobiPanel()方法来初始化该插件。

$(function(){
    $('.panel').lobiPanel({
        // 配置参数
        ...
    });
});    
  

完成上面的操作之后，就可以得到类似下图的Panel面板。

使用面板右上角的图标按钮，你可以执行以下一些操作：

• 按钮将从文档中移除该Panel面板。注意，这个操作是不可撤销的。
• 按钮可以使面板全屏打开。
• 按钮从指定的URL中加载内容到.panel-body中。
• 按钮可以使面板浮动起来，并可以通过鼠标进行拖拽。再次点击这个按钮就可以使面板回到原来的位置上。
• 按钮有2个功能：
  • 1、收缩已经展开的面板。
  • 2、最小化该面板。

配置参数

以下所有的参数都可以通过data-*来设置，你只需要将参数的驼峰格式修改为连线格式即可。例如：connectWith参数使用data-*来表示就是data-connect-with。

你也可以在data-*属性中插入一个对象，例如：data-close="{tooltip: 'Something'}"。

方法

可以通过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");    
  

事件

使用事件：

$('.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);
});    
  

LobiPanel插件的github地址为：https://github.com/arboshiki/lobipanel