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

 查看演示  website  立即下载

使用方法

使用该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.jq22.com");
var position = instance.getPosition();
//method chaining is also available
instance.setSize(400, 400)
.setPosition(400, 360)
.setLoadUrl("htpp://www.jq22.com")
.load();

2、或者你也可以直接调用方法。

$('.lobipanel').lobiPanel('startLoading');
$('.lobipanel').lobiPanel("setPosition", 400, 360);
var position = $('.lobipanel').lobiPanel("getPosition");

PREVIOUS:
NEXT:
原生JS仿Mac OS日历
前端人脸识别框架Tracking.js