面板
- 屬性方法
- 方法調(diào)用
屬性方法
id
面板的id值 默認(rèn)為nulltitle
面板上顯示的標(biāo)題
圖標(biāo)和類名
iconCls
面板上面的小圖標(biāo)(值是類名)cls
添加一個(gè)類到面板(面板最外面的類名)headerCls
添加一個(gè)類到面板頭部,默認(rèn)就是null
bodyCls
添加一個(gè)類到面板正文部分蜻韭，默認(rèn)就是nullstyle
添加一個(gè)指定的樣式到面板押框，但是由于優(yōu)先級。他不會顯示吃环。所以只能選擇沒有添加的泡仗。
樣式大小
- width
設(shè)置面板的寬度,默認(rèn)就是auto
- height
設(shè)置面板的高度 允扇，默認(rèn)就是auto
- fit
設(shè)置為true面板自適應(yīng)大小
位置:下面兩個(gè)必須一起使用,必須使用到方法里面的position absulute
left
設(shè)置面板的左邊距離（即X軸的位置）top
設(shè)置面板的頂部距離(即Y軸的位置)doSize
設(shè)置為true 在面板被創(chuàng)建的時(shí)候重置大小和布局纲缓。默認(rèn)為true
顯示圖標(biāo)牲蜀，樣式變換
border
定義是否顯示面板邊框,默認(rèn)為truenoheader
如果設(shè)置為true將不會創(chuàng)建面板標(biāo)題，默認(rèn)就是falsecontent
面板主體內(nèi)容collapsible
可折疊按鈕除秀，默認(rèn)就是falseminimizable
定義是否最小化按鈕。默認(rèn)就是falsemaximizable
定義最大化按鈕算利，默認(rèn)就是falseclosable
定義是否顯示關(guān)閉按鈕tools
數(shù)組册踩，可以自定義樣式配套圖標(biāo)
初始化面板配置
- collapsed
定義是否在初始化的時(shí)候折疊面板，默認(rèn)為false
minimized
定義是都在初始化的時(shí)候效拭，最小化面板暂吉，默認(rèn)是falsemaximized
定義是否在初始化的時(shí)候最大化面板，默認(rèn)就是falseclosed
定義是否在初始化的時(shí)候關(guān)閉面板,默認(rèn)就是falsehref
從URL讀取遠(yuǎn)程數(shù)據(jù)并且顯示到面板缎患，需要地址loadingMessage
在加載遠(yuǎn)程數(shù)據(jù)的時(shí)候慕的，面板顯示一條信息。cache
如果設(shè)置為true在超鏈接載入的時(shí)候緩存面板內(nèi)容extractor
定義從ajax應(yīng)答數(shù)據(jù)中提起內(nèi)容,然后返回?cái)?shù)據(jù)
事件列表開始(onBeforeXX, onXXX)
onBeforeLoad
在加載遠(yuǎn)程數(shù)據(jù)之前觸發(fā).onLoad
在加載遠(yuǎn)程數(shù)據(jù)時(shí)候觸發(fā)onBeforeOpen
在打開面板之前觸發(fā)onOpen
在打開面板之后觸發(fā)onBeforeClose
在面板關(guān)閉前觸發(fā)onClose
在面板關(guān)閉后觸發(fā)onBeforeCollapse
在面板折疊之前觸發(fā)挤渔，要是返回false可以終止折疊onCollapse
在面板折疊之后觸發(fā)onBeforeExpand
在面板展開之前觸發(fā)肮街。onExpand
在面板展開之后觸發(fā).
下面兩個(gè)方法必須配合方法來實(shí)現(xiàn) move和resize
onResize
在面板改變大小之后觸發(fā).2個(gè)參數(shù)第一個(gè)寬度，第二個(gè)高度
width,heightonMove
在面板移動之后觸發(fā)判导。left新的左邊距離.top新的上邊距離onMaximize
在窗口最大化觸發(fā)onRestroe
在窗口恢復(fù)到原始大小之后觸發(fā)onMinimize
在窗口最小化之后觸發(fā)
方法列表
move
移動面板的位置嫉父，參數(shù)對象包含下列屬性:left和topresize
設(shè)置面板大小和布局。參數(shù)包括width:寬度height:高度left:左邊.top:新的上邊refresh
刷新面板來裝載遠(yuǎn)程數(shù)據(jù)眼刃，如果href屬性有了新的配置绕辖，他將重寫舊的href
下面是全部代碼開始
<body>
<style>
*{margin:0px;padding:0px;}
.b{text-indent:20px;}
.c{font-size:24px;}
</style>
<div id="panel">
<p>內(nèi)容區(qū)域開始</p>
</div>
</body>
<script>
$(function(){
/*面板開始*/
$("#panel").panel({
width:500, //寬度
height:150, //高度
title:"面板", //標(biāo)題
closable: true, //這里特別注意close后面沒有e,顯示關(guān)閉按鈕
iconCls:"icon-edit", //是否顯示圖標(biāo)
left:100,
top:200,
cls:"a", //添加一個(gè)css類到面板,指的是全部的面板
headerCls:"b", //在面版的標(biāo)題添加一個(gè) css類
bodyCls:"c", //內(nèi)容標(biāo)題的 css類
style:{ //添加一個(gè)指定的樣式到面板,默認(rèn)為{} 但是寬度高度都不能寫
'font-family':"楷體",
},
border:true, //是否顯示面板邊框,默認(rèn)就是顯示。要是false就是不顯示擂红。
//doSize:false,//設(shè)置為false就是默認(rèn)大小仪际，而不載入你設(shè)置的。
//noheader:true, //要是設(shè)置為true將不會創(chuàng)建面板標(biāo)題.
//fit:true, //當(dāng)設(shè)置為true的時(shí)候面板將自適應(yīng)父容器昵骤，默認(rèn)為false
content:"這只是第一個(gè)內(nèi)容的一部分", //當(dāng)設(shè)置這個(gè)屬性后树碱，HTML標(biāo)簽里面在怎么寫內(nèi)容也不管用了.
collapsible: true, //允許折疊,默認(rèn)就是false
minimizable:true, //定義是否顯示最小化按鈕。默認(rèn)是false
maximizable:true, //定義是否顯示最大化按鈕.默認(rèn)就是false
//closed:true, //是否在初始化的時(shí)候關(guān)閉面板变秦，默認(rèn)就是 false
/*自定義按鈕圖標(biāo)*/
tools:[
{
iconCls:'icon-add',
handler:function(){window.alert("添加按鈕");}
},
{
iconCls:'icon-help',
handler:function(){window.alert("幫助按鈕");}
}
],
/*自定義按鈕圖標(biāo)結(jié)束*/
/*發(fā)送數(shù)據(jù)開始*/
href:'content.php', //發(fā)送的內(nèi)容
cache: true, //如果這是true在超鏈接載入后緩存面板內(nèi)容,默認(rèn)為true
loadingMessage: "遠(yuǎn)程數(shù)據(jù)加載中",//在加載遠(yuǎn)程數(shù)據(jù)的時(shí)候赴恨，顯示信息
extractor:function(data){
return data.substring(0,3); //提起的數(shù)據(jù)
},
/*發(fā)送數(shù)據(jù)結(jié)束*/
/*下面是加載數(shù)據(jù)開始*/
onBeforeLoad:function(){
console.log("加載數(shù)據(jù)之前");
},
onLoad:function(){
console.log("加載遠(yuǎn)程數(shù)據(jù)時(shí)候觸發(fā)");
},
onBeforeOpen:function(){
console.log("打開面板之前觸發(fā)");
},
onOpen:function(){
console.log("在打開面板之后觸發(fā)");
},
onBeforeClose:function(){
console.log("在關(guān)閉面板之前觸發(fā)");
},
onClose:function(){
console.log("在面板關(guān)閉后觸發(fā)");
},
onBeforeCollapse:function(){
console.log("點(diǎn)擊面板收縮前觸發(fā)");
},
onCollapse:function(){
console.log("面板折疊后觸發(fā)");
},
onBeforeExpand:function(){
console.log("在面板展開前觸發(fā)");
},
onExpand:function(){
console.log("在面板展開之后觸發(fā)");
},
onMaximize:function(){
console.log("窗口最大化觸發(fā)");
},
onRestore:function(){
console.log("窗口恢復(fù)原狀");
},
onMinimize:function(){
console.log("窗口最小化觸發(fā)");
},
/*此屬性必須配合方法resize來使用*/
onResize:function(width,height){
console.log("新的寬度"+width+"||"+"新的高度"+height);
},
/*此屬性必須配合方法resize來使用*/
/*此屬性移動開始,必須配合move方法*/
onMove:function(left,top){
console.log("新的左邊"+left+"||"+"新的上邊"+top);
},
/*此屬性移動結(jié)束,必須配合move方法*/
/*下面是加載數(shù)據(jù)結(jié)束*/
})
/*面板結(jié)束*/
/*方法開始*/
$("#panel").panel('panel').css('position','absolute'); //必須放在這句話的后面
/*單擊的時(shí)候放大*/
$(document).click(function(){
$("#panel").panel('resize',{
'width':600,
'height':300,
})
});
/*雙擊的時(shí)候就變位置*/
$(document).dblclick(function(){
$("#panel").panel('move',{
'left':400,
'top':200,
})
});
/*方法結(jié)束*/
/*刷新的方法*/
$("#panel").panel('refresh');
/*刷新的方法結(jié)束*/
})
</script>
