面板
- 属性方法
- 方法调用
属性方法
id
面板的id值 默认为nulltitle
面板上显示的标题
图标和类名
iconCls
面板上面的小图标(值是类名)cls
添加一个类到面板(面板最外面的类名)headerCls
添加一个类到面板头部,默认就是null
bodyCls
添加一个类到面板正文部分，默认就是nullstyle
添加一个指定的样式到面板，但是由于优先级。他不会显示。所以只能选择没有添加的。
样式大小
- width
设置面板的宽度,默认就是auto
- height
设置面板的高度 ，默认就是auto
- fit
设置为true面板自适应大小
位置:下面两个必须一起使用,必须使用到方法里面的position absulute
left
设置面板的左边距离（即X轴的位置）top
设置面板的顶部距离(即Y轴的位置)doSize
设置为true 在面板被创建的时候重置大小和布局。默认为true
显示图标，样式变换
border
定义是否显示面板边框,默认为truenoheader
如果设置为true将不会创建面板标题，默认就是falsecontent
面板主体内容collapsible
可折叠按钮，默认就是falseminimizable
定义是否最小化按钮。默认就是falsemaximizable
定义最大化按钮，默认就是falseclosable
定义是否显示关闭按钮tools
数组，可以自定义样式配套图标
初始化面板配置
- collapsed
定义是否在初始化的时候折叠面板，默认为false
minimized
定义是都在初始化的时候，最小化面板，默认是falsemaximized
定义是否在初始化的时候最大化面板，默认就是falseclosed
定义是否在初始化的时候关闭面板,默认就是falsehref
从URL读取远程数据并且显示到面板，需要地址loadingMessage
在加载远程数据的时候，面板显示一条信息。cache
如果设置为true在超链接载入的时候缓存面板内容extractor
定义从ajax应答数据中提起内容,然后返回数据
事件列表开始(onBeforeXX, onXXX)
onBeforeLoad
在加载远程数据之前触发.onLoad
在加载远程数据时候触发onBeforeOpen
在打开面板之前触发onOpen
在打开面板之后触发onBeforeClose
在面板关闭前触发onClose
在面板关闭后触发onBeforeCollapse
在面板折叠之前触发，要是返回false可以终止折叠onCollapse
在面板折叠之后触发onBeforeExpand
在面板展开之前触发。onExpand
在面板展开之后触发.
下面两个方法必须配合方法来实现 move和resize
onResize
在面板改变大小之后触发.2个参数第一个宽度，第二个高度
width,heightonMove
在面板移动之后触发。left新的左边距离.top新的上边距离onMaximize
在窗口最大化触发onRestroe
在窗口恢复到原始大小之后触发onMinimize
在窗口最小化之后触发
方法列表
move
移动面板的位置，参数对象包含下列属性:left和topresize
设置面板大小和布局。参数包括width:宽度height:高度left:左边.top:新的上边refresh
刷新面板来装载远程数据，如果href属性有了新的配置，他将重写旧的href
下面是全部代码开始
<body>
<style>
*{margin:0px;padding:0px;}
.b{text-indent:20px;}
.c{font-size:24px;}
</style>
<div id="panel">
<p>内容区域开始</p>
</div>
</body>
<script>
$(function(){
/*面板开始*/
$("#panel").panel({
width:500, //宽度
height:150, //高度
title:"面板", //标题
closable: true, //这里特别注意close后面没有e,显示关闭按钮
iconCls:"icon-edit", //是否显示图标
left:100,
top:200,
cls:"a", //添加一个css类到面板,指的是全部的面板
headerCls:"b", //在面版的标题添加一个 css类
bodyCls:"c", //内容标题的 css类
style:{ //添加一个指定的样式到面板,默认为{} 但是宽度高度都不能写
'font-family':"楷体",
},
border:true, //是否显示面板边框,默认就是显示。要是false就是不显示。
//doSize:false,//设置为false就是默认大小，而不载入你设置的。
//noheader:true, //要是设置为true将不会创建面板标题.
//fit:true, //当设置为true的时候面板将自适应父容器，默认为false
content:"这只是第一个内容的一部分", //当设置这个属性后，HTML标签里面在怎么写内容也不管用了.
collapsible: true, //允许折叠,默认就是false
minimizable:true, //定义是否显示最小化按钮。默认是false
maximizable:true, //定义是否显示最大化按钮.默认就是false
//closed:true, //是否在初始化的时候关闭面板，默认就是 false
/*自定义按钮图标*/
tools:[
{
iconCls:'icon-add',
handler:function(){window.alert("添加按钮");}
},
{
iconCls:'icon-help',
handler:function(){window.alert("帮助按钮");}
}
],
/*自定义按钮图标结束*/
/*发送数据开始*/
href:'content.php', //发送的内容
cache: true, //如果这是true在超链接载入后缓存面板内容,默认为true
loadingMessage: "远程数据加载中",//在加载远程数据的时候，显示信息
extractor:function(data){
return data.substring(0,3); //提起的数据
},
/*发送数据结束*/
/*下面是加载数据开始*/
onBeforeLoad:function(){
console.log("加载数据之前");
},
onLoad:function(){
console.log("加载远程数据时候触发");
},
onBeforeOpen:function(){
console.log("打开面板之前触发");
},
onOpen:function(){
console.log("在打开面板之后触发");
},
onBeforeClose:function(){
console.log("在关闭面板之前触发");
},
onClose:function(){
console.log("在面板关闭后触发");
},
onBeforeCollapse:function(){
console.log("点击面板收缩前触发");
},
onCollapse:function(){
console.log("面板折叠后触发");
},
onBeforeExpand:function(){
console.log("在面板展开前触发");
},
onExpand:function(){
console.log("在面板展开之后触发");
},
onMaximize:function(){
console.log("窗口最大化触发");
},
onRestore:function(){
console.log("窗口恢复原状");
},
onMinimize:function(){
console.log("窗口最小化触发");
},
/*此属性必须配合方法resize来使用*/
onResize:function(width,height){
console.log("新的宽度"+width+"||"+"新的高度"+height);
},
/*此属性必须配合方法resize来使用*/
/*此属性移动开始,必须配合move方法*/
onMove:function(left,top){
console.log("新的左边"+left+"||"+"新的上边"+top);
},
/*此属性移动结束,必须配合move方法*/
/*下面是加载数据结束*/
})
/*面板结束*/
/*方法开始*/
$("#panel").panel('panel').css('position','absolute'); //必须放在这句话的后面
/*单击的时候放大*/
$(document).click(function(){
$("#panel").panel('resize',{
'width':600,
'height':300,
})
});
/*双击的时候就变位置*/
$(document).dblclick(function(){
$("#panel").panel('move',{
'left':400,
'top':200,
})
});
/*方法结束*/
/*刷新的方法*/
$("#panel").panel('refresh');
/*刷新的方法结束*/
})
</script>
