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

所属分类:输入,UI-拖和放,布局

 3625  20  查看评论 (0)
基于jQuery UI的Bootstrap Panel面板功能增强插件 ie兼容9

使用方法

使用该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'}"。

参数类型默认值描述
draggableBooleantrue面板是否可以拖动。注意,该选项需要jQuery ui draggable的支持
sortableBooleanfalse面板是否可以排序。注意,该选项需要jQuery ui sortable的支持
connectWithString".ui-sortable"jQuery ui排序插件选项
resizeString"both"设置面板缩放的方向,可选值有:"both", "vertical", "horizontal", "none"
minWidthInteger200面板的最小宽度
minHeightInteger100面板的最小高度
maxWidthInteger1200面板的最大宽度
maxHeightInteger700面板的最大高度
loadUrlString""加载内容的URL地址,如果没有提供reload按钮就不会加载任何东西
tooltipsBooleantrue是否在面板控制按钮上显示tooltips
toggleIconString"glyphicon glyphicon-cog"下拉菜单切换图标
expandAnimationInteger100扩展到全屏的动画持续时间
collapseAnimationInteger100从全屏收缩回来的动画持续时间
unpinObject{
icon : 'glyphicon glyphicon-move',
tooltip : 'Unpin'
}
icon属性是切换拖动按钮的图标,tooltip属性是按钮的提示文本
reloadObject{
icon : 'glyphicon glyphicon-refresh',
tooltip : 'Reload'
}
icon属性是重新加载按钮的图标,tooltip属性是按钮的提示文本
minimizeObject{
icon : 'glyphicon glyphicon-minus',
icon2 : 'glyphicon glyphicon-plus',
tooltip : 'Minimize'
}
icon属性是全屏按钮的图标,icon2是收缩按钮的图标,tooltip属性是按钮的提示文本
closeObject{
icon : 'glyphicon glyphicon-remove',
tooltip : 'Close'
}
icon属性是关闭按钮按钮的图标,tooltip属性是按钮的提示文本
editTitleObject{
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.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");
相关插件-拖和放,布局

touchSwipe百度新闻手机触屏滑动导航

touchSwipe百度新闻手机触屏滑动导航
  拖和放
 38315  84

jQuery拖放插件Gridly

Gridly是一个JQuery插件,它能够拖动,删除和调整一个网格的大小。
  拖和放
 48437  91

jQuery拖拽插件Draggabilly

Draggabilly 可帮你轻松实现网页上各种元素的拖放操作。它支持IE8 +和多点触控。
  拖和放
 66592  56

拖动排序插件

实现在两个div中,互相自由的拖动,并且排序
  拖和放
 14335  135

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复