html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件
LobiPanel是一款基于jQuery UI的Bootstrap Panel面板功能增強(qiáng)插件。通過(guò)該插件可以為Bootstrap的原生Panel面板增加編輯標(biāo)題，最大化，最小化，面板拖動(dòng)關(guān)閉面板等功能。
使用方法
使用該Bootstrap面板功能增強(qiáng)插件需要引入jquery，jquery ui相關(guān)文件和bootstrap相關(guān)文件，以及l(fā)obipanel.css和lobipanel.js文件。
HTML結(jié)構(gòu)
LobiPanel最基本的HTML結(jié)構(gòu)如下，它完全是bootstrap標(biāo)準(zhǔn)的panel結(jié)構(gòu)：
Panel title
Lorem ipsum...
初始化插件
在頁(yè)面DOM元素加載完畢之后，可以通過(guò)lobiPanel()方法來(lái)初始化該插件。
$(function(){
$('.panel').lobiPanel({
// 配置參數(shù)
...
});
});
完成上面的操作之后，就可以得到類似下圖的Panel面板。
使用面板右上角的圖標(biāo)按鈕，你可以執(zhí)行以下一些操作：
按鈕將從文檔中移除該P(yáng)anel面板。注意，這個(gè)操作是不可撤銷的。
按鈕可以使面板全屏打開(kāi)。
按鈕從指定的URL中加載內(nèi)容到.panel-body中。
按鈕可以使面板浮動(dòng)起來(lái)，并可以通過(guò)鼠標(biāo)進(jìn)行拖拽。再次點(diǎn)擊這個(gè)按鈕就可以使面板回到原來(lái)的位置上。
按鈕有2個(gè)功能：
1、收縮已經(jīng)展開(kāi)的面板。
2、最小化該面板。
配置參數(shù)
以下所有的參數(shù)都可以通過(guò)data-*來(lái)設(shè)置，你只需要將參數(shù)的駝峰格式修改為連線格式即可。例如：connectWith參數(shù)使用data-*來(lái)表示就是data-connect-with。
你也可以在data-*屬性中插入一個(gè)對(duì)象，例如：data-close="{tooltip: 'Something'}"。
參數(shù)
類型
默認(rèn)值
描述
draggable
Boolean
true
面板是否可以拖動(dòng)。注意，該選項(xiàng)需要jQuery ui draggable的支持
sortable
Boolean
false
面板是否可以排序。注意，該選項(xiàng)需要jQuery ui sortable的支持
connectWith
String
".ui-sortable"
jQuery ui排序插件選項(xiàng)
resize
String
"both"
設(shè)置面板縮放的方向，可選值有："both", "vertical", "horizontal", "none"
minWidth
Integer
200
面板的最小寬度
minHeight
Integer
100
面板的最小高度
maxWidth
Integer
1200
面板的最大寬度
maxHeight
Integer
700
面板的最大高度
loadUrl
String
""
加載內(nèi)容的URL地址，如果沒(méi)有提供reload按鈕就不會(huì)加載任何東西
tooltips
Boolean
true
是否在面板控制按鈕上顯示tooltips
toggleIcon
String
"glyphicon glyphicon-cog"
下拉菜單切換圖標(biāo)
expandAnimation
Integer
100
擴(kuò)展到全屏的動(dòng)畫持續(xù)時(shí)間
collapseAnimation
Integer
100
從全屏收縮回來(lái)的動(dòng)畫持續(xù)時(shí)間
unpin
Object
{
icon : 'glyphicon glyphicon-move',
tooltip : 'Unpin'
}
icon屬性是切換拖動(dòng)按鈕的圖標(biāo)，tooltip屬性是按鈕的提示文本
reload
Object
{
icon : 'glyphicon glyphicon-refresh',
tooltip : 'Reload'
}
icon屬性是重新加載按鈕的圖標(biāo)，tooltip屬性是按鈕的提示文本
minimize
Object
{
icon : 'glyphicon glyphicon-minus',
icon2 : 'glyphicon glyphicon-plus',
tooltip : 'Minimize'
}
icon屬性是全屏按鈕的圖標(biāo)，icon2是收縮按鈕的圖標(biāo)，tooltip屬性是按鈕的提示文本
close
Object
{
icon : 'glyphicon glyphicon-remove',
tooltip : 'Close'
}
icon屬性是關(guān)閉按鈕按鈕的圖標(biāo)，tooltip屬性是按鈕的提示文本
editTitle
Object
{
icon: 'glyphicon glyphicon-pencil',
icon2: 'glyphicon glyphicon-floppy-disk',
tooltip: 'Edit title'
}
方法
可以通過(guò)2個(gè)方法來(lái)調(diào)用該插件的方法。
1、你可以獲取LobiPanel的對(duì)象實(shí)例，然后調(diào)用方法。
//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、或者你也可以直接調(diào)用方法。
$('.lobipanel').lobiPanel('startLoading');
$('.lobipanel').lobiPanel("setPosition", 400, 360);
var position = $('.lobipanel').lobiPanel("getPosition");
方法
參數(shù)
返回類型
描述
isPanelInit
none
Boolean
檢查面板是否被初始化。面板被初始化后會(huì)帶有.lobipanel class和data-inner-id屬性
isPinned
none
Boolean
檢測(cè)面板是否是固定的
pin
none
LobiPanel對(duì)象
固定面板
unpin
none
LobiPanel對(duì)象
將面板浮動(dòng)
togglePin
none
LobiPanel對(duì)象
將面板在固定和浮動(dòng)之間切換
isMinimized
none
LobiPanel對(duì)象
檢測(cè)面板是否被最小化
minimize
none
LobiPanel對(duì)象
最小化面板
maximize
none
LobiPanel對(duì)象
最大化面板
toggleMinimize
none
LobiPanel對(duì)象
在最大化和最小化之間切換
isOnFullScreen
none
Boolean
檢測(cè)面板是否擴(kuò)展到全屏
toFullScreen
none
LobiPanel對(duì)象
將面板擴(kuò)展到全屏
toSmallSize
none
LobiPanel對(duì)象
將面板收縮到最小
toggleSize
none
LobiPanel對(duì)象
在全屏和最小面板之間切換
close
none
LobiPanel對(duì)象
關(guān)閉面板(將面板從文檔中移除)
setWidth(width)
width - Integer, REQUIRED new width of the panel
LobiPanel對(duì)象
改變面板的寬度，如果寬度超出minWidth和maxWidth之間的范圍，將使用minWidth或maxWidth來(lái)作為寬度
setHeight(height)
height - Integer, REQUIRED new height of the panel
LobiPanel對(duì)象
改變面板的高度，如果高度超出minHeight和maxHeight之間的范圍，將使用minHeight或maxHeight來(lái)作為高度
setSize(width, height)
width - Integer, REQUIRED new width of the panel
height - Integer, REQUIRED new height of the panel
LobiPanel對(duì)象
通過(guò)指定的寬度和高度來(lái)設(shè)置面板的尺寸
getPosition
none
{
x: 'left coordinate',
y: 'top coordinate'
}
獲取面板的當(dāng)前位置
getWidth
none
面板的Integer類型寬度
獲取面板的寬度
getHeight
none
面板的Integer類型高度
獲取面板的高度
bringToFront
none
LobiPanel對(duì)象
如果面板被其它元素遮蓋，使用該方法將面板放置在前面
enableDrag
none
LobiPanel對(duì)象
使面板可以被拖動(dòng)，在浮動(dòng)面板中該方法自動(dòng)被調(diào)用
disableDrag
none
LobiPanel對(duì)象
禁止拖動(dòng)面板
enableResize
none
LobiPanel對(duì)象
使面板可以修改尺寸
disableResize
none
LobiPanel對(duì)象
禁止面板修改尺寸
startLoading
none
LobiPanel對(duì)象
開(kāi)始加載
stopLoading
none
LobiPanel對(duì)象
停止加載
setLoadUrl(url)
url - String , REQUIRED
LobiPanel對(duì)象
設(shè)置loadUrl屬性
load(params)
params - Mixed，OPTIONAL
LobiPanel對(duì)象
通過(guò)ajax來(lái)加載內(nèi)容到.panel-body中
destroy
none
jQuery元素
銷毀LobiPanel實(shí)例
startTitleEditing
none
LobiPanel對(duì)象
編輯面板的標(biāo)題
isTitleEditing
none
Boolean
檢測(cè)面板標(biāo)題是否在編輯中
cancelTitleEditing
none
LobiPanel對(duì)象
取消新編輯的標(biāo)題，恢復(fù)原來(lái)的面板標(biāo)題
finishTitleEditing
none
LobiPanel對(duì)象
完成面板標(biāo)題的編輯
enableTooltips
none
LobiPanel對(duì)象
允許在面板控制按鈕上顯示提示文本
disableTooltips
none
LobiPanel對(duì)象
禁止在面板控制按鈕上顯示提示文本
事件
使用事件：
$('.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
當(dāng)面板初始化時(shí)調(diào)用
beforeUnpin.lobiPanel
面板浮動(dòng)前被調(diào)用
onUnpin.lobiPanel
面板浮動(dòng)后被調(diào)用
beforeClose.lobiPanel
面板被關(guān)閉前調(diào)用
onClose.lobiPanel
面板被移除后調(diào)用
beforeToFront.lobiPanel
面板通過(guò)z-index屬性被顯示時(shí)調(diào)用
onToFront.lobiPanel
當(dāng)面板被點(diǎn)擊并通過(guò)z-index屬性被顯示時(shí)調(diào)用
beforePin.lobiPanel
面板被固定前調(diào)用
onPin.lobiPanel
面板被固定后調(diào)用
beforeMinimize.lobiPanel
面板最小化前調(diào)用
onMinimize.lobiPanel
面板最小化后調(diào)用
beforeMaximize.lobiPanel
面板最大化前調(diào)用
onMaximize.lobiPanel
面板最大化后調(diào)用
beforeFullScreen.lobiPanel
面板擴(kuò)展到全屏前調(diào)用
onFullScreen.lobiPanel
面板擴(kuò)展到全屏后調(diào)用
beforeSmallSize.lobiPanel
面板擴(kuò)展從全屏?xí)r尚前調(diào)用
onSmallSize.lobiPanel
面板擴(kuò)展從全屏?xí)r尚后調(diào)用
beforeLoad.lobiPanel
在面板內(nèi)容被加載前調(diào)用
startLoading.lobiPanel
當(dāng)通過(guò)ajax調(diào)用內(nèi)容時(shí)觸發(fā)
loaded.lobiPanel
當(dāng)面板內(nèi)容被加載后觸發(fā)
resizeStart.lobiPanel
resize操作開(kāi)始時(shí)觸發(fā)
onResize.lobiPanel
在resize操作期間觸發(fā)
resizeStop.lobiPanel
在浮動(dòng)面板resize操作結(jié)束時(shí)觸發(fā)
dragged.lobiPanel
在排序結(jié)束，DOM元素位置改變后觸發(fā)
總結(jié)
以上是生活随笔為你收集整理的html5拖动的面板 panel,基于jQuery UI的Bootstrap Panel面板功能增强插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 西北大学计算机转专业,西北大学可以转专业
- 下一篇： 计算机算法知识总结,移动笔试知识点之--