第一百九十九节，jQuery EasyUI，Panel(面板)组件
jQuery EasyUI，Panel(面板)组件
学习要点：
1.加载方式
2.属性列表
3.事件列表
4.方法列表
本节课重点了解EasyUI中Panel(面板)组件的使用方法，这个组件不依赖于其他组件。
一．加载方式
//class 加载方式
<div class="easyui-panel" data-options="closable:true"title="My Panel" style="width:500px;">
<p>内容区域</p>
</div>
panel()将元素执行面板方法
//JS 加载调用
$('#box').panel({
width:500,
height:150,
title : '面板',
closable : true,
});
二．属性列表
id string 面板的 ID 值。默认为 null。设置面板的id
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
id:'pox' //设置面板的id
});
});
title string 面板显示的标题文本。默认为 null。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板' //面板显示的标题
});
});
iconCls string 设置一个 16x16 图标的 CSS 类 ID 显示在面板左上角。默认为 null。设置面板标题左边图标
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit' //设置面板标题左边图标
});
});
width number 设置面板宽度。默认值 auto。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150 //设置面板高度
});
});
height number 设置面板高度。默认值 auto。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150 //设置面板高度
});
});
left number 设置面板距离左边的位置（即 X 轴位置）。默认为null。，结合定位使用
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
left:200, //设置面板距离左边的位置（即 X 轴位置）
top:200 //设置面板距离顶部的位置（即 Y 轴位置）
});
$('#box').panel('panel').css('position','absolute'); //获取面板对象，设置定位
});
top number 设置面板距离顶部的位置（即 Y 轴位置）。默认为null。结合定位使用
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
left:200, //设置面板距离左边的位置（即 X 轴位置）
top:200 //设置面板距离顶部的位置（即 Y 轴位置）
});
$('#box').panel('panel').css('position','absolute'); //获取面板对象，设置定位
});
cls string 添加一个 CSS 类 ID 到面板。默认为 null。给面板添加一个class来设置css
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
cls:'pppox' //给面板添加一个class来设置css
});
});
headerCls string 添加一个 CSS 类 ID 到面板头部。默认为 null。给面板头部添加一个class来设置css
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
headerCls:'pppox' //给面板头部添加一个class来设置css
});
});
bodyCls string 添加一个 CSS 类 ID 到面板正文部分。默认为null。给面板正文添加一个class来设置css
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
bodyCls:'pppox' //给面板正文添加一个class来设置css
});
});
style subject 添加一个当前指定样式到面板。默认为{}。添加一个指定css样式到面板，注意如果给内置的样式有冲突可以没有效果
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
bodyCls:'pppox', //给面板正文添加一个class来设置css
style: { //添加一个指定css样式到面板，注意如果给内置的样式有冲突可以没有效果
'min-height': '250px'
}
});
});
fit boolean 当设置为 true 的时候面板大小将自适应父容器。默认为 false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
bodyCls:'pppox', //给面板正文添加一个class来设置css
fit:true //当设置为 true 的时候面板大小将自适应父容器。默认为 false。
});
});
border boolean 定义是否显示面板边框。默认为 true
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
border:false //定义是否显示面板边框。默认为 true
});
});
doSize boolean 如果设置为 true，在面板被创建的时候将重置大小和重新布局。默认为 true。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
doSize:true //如果设置为 true，在面板被创建的时候将重置大小和重新布局。默认为 true。
});
});
noheader boolean 如果设置为 true。将不会创建面板标题。默认为false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
noheader:true //如果设置为 true。将不会创建面板标题。默认为false。
});
});
content string 面板主体内容。默认为 null。，设置面板主体内容
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
content :'这是修改后的主体内容' //设置面板主体内容
});
});
collapsible boolean 定义是否显示可折叠按钮。默认为 false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true //定义是否显示可折叠按钮。默认为 false。
});
});
minimizable boolean 定义是否显示最小化按钮。默认为 false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
minimizable :true //定义是否显示最小化按钮。默认为 false。
});
});
maximizable boolean 定义是否显示最大化按钮。默认为 false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
maximizable :true //定义是否显示最大化按钮。默认为 false。
});
});
closable boolean 定义是否显示关闭按钮。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
closable :true //定义是否显示关闭按钮。
});
});
tools array,selector自定义工具菜单，可用值：(1)数 组 ， 每 个 元 素 都 包 含 ’iconCls’ 和’handler’属性。(2)指向工具菜单的选择器。默认为[]。
自定义根据按钮接收一个数组，数组里接收对象，以键值对的方式设置iconCls图标，和handler点击后的操作，要设置多个图标数组里就接收多个对象
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
closable :true, //定义是否显示关闭按钮。
tools:[{ //自定义工具菜单
iconCls:'icon-edit', //iconCls图标
handler:function () {
alert('点击后的操作'); //handler点击后的操作
}
}]
});
});
collapsed boolean 定义是否在初始化的时候折叠面板。默认值为false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
collapsed :true //定义是否在初始化的时候折叠面板。默认值为false。
});
});
minimized boolean 定义是否在初始化的时候最小化面板。默认值为false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
minimized :true //定义是否在初始化的时候最小化面板。默认值为false。
});
});
maximized boolean 定义是否在初始化的时候最大化面板。默认值为false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
maximized :true //定义是否在初始化的时候最大化面板。默认值为false。
});
});
closed boolean 定义是否在初始化的时候关闭面板。默认为false。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
closed :true //定义是否在初始化的时候关闭面板。默认为false。
});
});
href string 从 URL 读取远程数据并且显示到面板。默认为null。，值为要加载的文件地址采用的ajax加载
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/' //URL 读取远程数据并且显示到面板。默认为null。
});
});
cache boolean 如果为 true，在超链接载入时缓存面板内容。默认为 true。，也就是缓存远程数据
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
cache:true //如果为 true，在超链接载入时缓存面板内容。默认为 true。，也就是缓存远程数据
});
});
loadingMessage string 在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。设置远程加载时的内容
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中' //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
});
});
extractor function 定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板，data接收远程数据
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
});
三．事件列表
onBeforeLoad none 在加载远程数据之前触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeLoad:function () {
alert('在加载远程数据之前触发。');
}
});
});
onLoad none 在加载远程数据时触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onLoad:function () {
alert('在加载远程数据时触发。');
}
});
});
onBeforeOpen none在打开面板之前触发，返回 false 可以取消打开操作。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeOpen:function () {
alert('在打开面板之前触发，返回 false 可以取消打开操作。');
// return false; //返回false时，打开之后操作将取消
},
onOpen:function () {
alert('在打开面板之后触发。');
}
});
});
onOpen none 在打开面板之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeOpen:function () {
alert('在打开面板之前触发，返回 false 可以取消打开操作。');
// return false; //返回false时，打开之后操作将取消
},
onOpen:function () {
alert('在打开面板之后触发。');
}
});
});
onBeforeClose none在关闭面板之前触发，返回 false 可以取消关闭操作。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeClose:function () {
alert('在关闭面板之前触发，返回 false 可以取消关闭操作。');
return false;
},
onClose:function () {
alert('在面板关闭之后触发。');
}
});
});
onClose none 在面板关闭之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeClose:function () {
alert('在关闭面板之前触发，返回 false 可以取消关闭操作。');
return false;
},
onClose:function () {
alert('在面板关闭之后触发。');
}
});
});
onBeforeDestroy none在面板销毁之前触发，返回 false 可以取消销毁操作。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeDestroy:function () {
alert('在面板销毁之前触发，返回 false 可以取消销毁操作。');
return false;
},
onDestroy:function () {
alert('在面板销毁之后触发。');
}
});
});
onDestroy none 在面板销毁之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeDestroy:function () {
alert('在面板销毁之前触发，返回 false 可以取消销毁操作。');
return false;
},
onDestroy:function () {
alert('在面板销毁之后触发。');
}
});
});
onBeforeCollapse none在面板折叠之前触发，返回 false 可以终止折叠操作。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeCollapse:function () {
alert('在面板折叠之前触发，返回 false 可以终止折叠操作。');
// return false;
},
onCollapse:function () {
alert('在面板折叠之后触发。');
}
});
});
onCollapse none 在面板折叠之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeCollapse:function () {
alert('在面板折叠之前触发，返回 false 可以终止折叠操作。');
// return false;
},
onCollapse:function () {
alert('在面板折叠之后触发。');
}
});
});
onBeforeExpand none在面板展开之前触发，返回 false 可以终止展开操作。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeExpand:function () {
alert('在面板展开之前触发，返回 false 可以终止展开操作。');
// return false;
},
onExpand:function () {
alert('在面板展开之后触发。');
}
});
});
onExpand none 在面板展开之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onBeforeExpand:function () {
alert('在面板展开之前触发，返回 false 可以终止展开操作。');
// return false;
},
onExpand:function () {
alert('在面板展开之后触发。');
}
});
});
onResize width,height在面板改变大小之后触发。width：新的宽度。height：新的高度。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onResize:function (width,height) {
alert('在面板改变大小之后触发。' +width+ '：新的宽度。' +height+ '：新的高度。');
}
});
});
onMove left,top在面板移动之后触发。left：新的左边距位置。top：新的上边距位置。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onMove:function (left,top) {
alert('在面板移动之后触发。' +left+ '：新左边位置。' +top+ '：新头部位置。');
}
});
});
onMaximize none 在窗口最大化之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onMaximize:function () {
alert('在窗口最大化之后触发。');
}
});
});
onRestore none 在窗口恢复到原始大小以后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onRestore:function () {
alert('在窗口恢复到原始大小以后触发。');
}
});
});
onMinimize none 在窗口最小化之后触发。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
},
onMinimize:function () {
alert('在窗口最小化之后触发。');
}
});
});
三．方法列表
options none 返回属性对象。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
alert($('#box').panel('options')); //返回属性对象。
});
panel none 返回面板对象。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
alert($('#box').panel('panel')); //返回面板对象。
});
header none 返回面板头对象。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
alert($('#box').panel('header')); //返回面板头对象。
});
body none 返回面板主体对象。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
alert($('#box').panel('body')); //返回面板主体对象。
});
setTitle title 设置面板头的标题文本。
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
alert($('#box').panel('setTitle','设置标题')); //设置面板头的标题文本。
});
open forceOpen 在'forceOpen'参数设置为 true 的时候，打开面板时将跳过'onBeforeOpen'回调函数。跳过在打开面板之后触发
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
$('#box').panel('open', true); //参数设置为 true 的时候，打开面板时将跳过'onBeforeOpen'回调函数
});
close forceClose 在'forceClose'参数设置为 true 的时候，关闭面板时将跳过'onBeforeClose'回调函数。，跳过关闭之前触发
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
$('#box').panel('close', true); //参数设置为 true 的时候，关闭面板时将跳过'onBeforeClose'回调函数
});
destroy forceDestroy在'forceDestroy'参数设置为 true 的时候，销毁面板时将跳过'onBeforeDestory'回调函数。跳过销毁之前触发
/**
<div id="box">内容部分</div>
**/ $(function () {
$('#box').panel({
title: '面板', //面板显示的标题
width:500, //设置面板宽度
height:150, //设置面板高度
iconCls:'icon-edit', //设置面板标题左边图标
collapsible :true, //定义是否显示可折叠按钮。默认为 false。
minimizable :true, //定义是否显示最小化按钮。默认为 false。
maximizable :true, //定义是否显示最大化按钮。默认为 false。
closable :true, //定义是否显示关闭按钮。
href :'is_user.php/', //URL 读取远程数据并且显示到面板。默认为null。
loadingMessage:'数据加载中', //在加载远程数据的时候在面板内显示一条信息。默认值为 loading...。
extractor:function (data) { //定义如何从 ajax 应答数据中提取内容，返回提取数据。也就是将远程返回数据进行处理后返回给面板
return data.substring(0,2); //加收外部数据，截取后返回
}
});
$('#box').panel('destroy', true); //参数设置为 true 的时候，销毁面板时将跳过'onBeforeDestory'回调函数
});
refresh href 刷新面板来装载远程数据。如果'href'属性有了新配置，它将重写旧的'href'属性。
//刷新当前内容
$('#box').panel('refresh');
//刷新指定载入内容
$('#box').panel('refresh', 'content.php');
resize options设置面板大小和布局。参数对象包含下列属性：width：新的面板宽度。height：新的面板高度。left：新的面板左边距位置。top：新的面板上边距位置。
$('#box').panel('resize', { //设置面板大小和布局
width : 100,
height : 100,
left : 100,
top : 100
});
move options 移动面板到一个新位置。参数对象包含下列属性：left：新的左边距位置。top：新的上边距位置。
$('#box').panel('move', { //设置移动的坐标
left : 100,
top : 100
});
maximize none 最大化面板到容器大小。
$('#box').panel('maximize'); //最大化面板到容器大小。
minimize none 最小化面板。
$('#box').panel('minimize'); //最小化面板。
restore none 恢复最大化面板回到原来的大小和位置。
$('#box').panel('restore'); //恢复最大化面板回到原来的大小和位置。
collapse animate 折叠面板主题。
$('#box').panel('collapse'); //折叠面板主题。
expand animate 展开面板主体。
$('#box').panel('expand'); //展开面板主体。
$.fn.panel.defaults 重写默认值对象。
$.fn.panel.defaults.border = false;
第一百九十九节，jQuery EasyUI，Panel(面板)组件的更多相关文章
- 第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
- 第一百九十三节，jQuery EasyUI，Draggable(拖动)组件
Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...
- 第三百九十九节，Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6
第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6 1.检测系统是否已经安装过mysql或其依赖,若已装过要先将其删除,否则第4步 ...
- 第一百九十六节，jQuery EasyUI，Tooltip(提示框)组件
jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...
- 第一百九十五节，jQuery EasyUI，Resizable(调整大小)组件
jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...
- 第一百九十四节，jQuery EasyUI，Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
- 第一百零九节，JavaScript面向对象与原型
JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...
- 第二百九十九节，python操作redis缓存-SortSet有序集合类型，可以理解为有序列表
python操作redis缓存-SortSet有序集合类型,可以理解为有序列表 有序集合,在集合的基础上,为每元素排序:元素的排序需要根据另外一个值来进行比较,所以,对于有序集合,每一个元素有两个值, ...
- 第三百九十六节，Django+Xadmin打造上线标准的在线教育平台—其他插件使用说，自定义列表页上传插件
第三百九十六节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,自定义列表页上传插件 设置后台列表页面字段统计 在当前APP里的adminx.py文件里的数据表管理器里设置 ag ...
随机推荐
- Vue 单页应用：记事本
若文章中存在内容无法加载的情况,请移步作者其他博客. 简书 CSDN 最近在看 Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本. 仔细剖析下,发现“麻雀虽 ...
- java中List和Array相互转换
List to Array List 提供了toArray的接口,所以可以直接调用转为object型数组 List<String> list = new ArrayList<Stri ...
- [Pycharm] Interpreter setting in Pycharm
From: http://blog.csdn.net/u013088062/article/details/50135135 From: http://blog.csdn.net/u013088062 ...
- PHP Xdebug调试专题
1.介绍与安装 Xdebug是一个PHP扩展,安装配置好后,可以自动记录运行了哪些函数,用了多少毫秒,从哪个文件运行到哪个文件等等 它记下来的调试信息很详细,对一些复杂程序跟踪调试有很大的辅助效果,能 ...
- Kafka查看偏移量报错：WARN WARNING: ConsumerOffsetChecker is deprecated and will be dropped in releases following 0.9.0. Use ConsumerGroupCommand instead.
Kafka0.9版本后,命令ConsumerOffsetChecker已弃用,用新的命令来查. // 列表 bin/kafka-consumer-groups.sh --zookeeper local ...
- SQLCMD Mode: give it one more chance
From : http://sqlblog.com/blogs/maria_zakourdaev/archive/2012/05/11/sqlcmd-mode-give-it-one-more-cha ...
- 攻克了Cocoapods Undefined symbols for architecture _OBJC_CLASS_xxxx的问题，辛苦死我了，记录下之后有空在研究
网上找了一大包将尽3个小时没有解决,原本以为是我升级到10.10的原因,把cocoapod 重装 stackoverflow google 用尽了也不知道为啥 结果是这个样子的 编译出现这个.... ...
- Spring集成Jersey开发(附demo)
下文将会初步介绍如何在Spring中集成Jersey,并附简单的demo 所依赖的技术版本: Jersey 1.8 Spring 3.0.5.RELEASE 1. 项目依赖 pom.xml定义(注意去 ...
- iOS 核心动画 Core Animation浅谈
代码地址如下:http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVie ...
- Sql Server分页分段查询百万级数据四种项目实例
实际项目中需要实现自定义分页,最关键第一步就是写分页SQL语句,要求语句效率要高. 那么本文的一个查询示例是查询第100000-100050条记录,即每页50条的结果集.查询的表名为infoTab,且 ...