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