第一百九十九节，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 ...
随机推荐
- VMware虚拟机中为Linux 添加虚拟硬盘（VirtualBox方法类似）
修改1:2014-06-24 11:38:21 Linux添加硬盘是在原来安装的硬盘空间不够或者需要使用其他硬盘上的东西时候的解决办法,因为大多数初学者习惯使用虚拟机,这里以在Vmware虚拟机中实现 ...
- Ubuntu Tomcat
启动80端口: 修改server.xml Connector port=80 修改/etc/default/tomcat AUTHBIND=yes 查看/etc/authbind/byport/下 ...
- hadoop2.2.0伪分布式安装
修改主机名和IP的映射关系 vi /etc/hosts 192.168.61.134 hadoop 关闭防火墙 #查看防火墙状态 service iptables status #关闭防火墙 serv ...
- 按照vue文档使用JavaScript钩子但是却不能执行动画？
大家刚入VUE肯定是先去阅读文档, 在 进入/离开 & 列表过渡 这一章节有一小节 --------- JavaScript钩子 详情见vue文档: https://cn.vuejs.or ...
- Java Volatile keyword
Volatile修饰的成员变量在每次被线程訪问时,都强迫从主内存中重读该成员变量的值.并且,当成员变量发生变化时,强迫线程将变化值回写到主内存.这样在不论什么时刻,两个不同的线程总是看到某个成员变量的 ...
- 关于窗体跟随与 PointToScreen
今日写一段测试代码,实现的功能是,当一个输入框获得焦点时,某个帮助窗体跟随在其下方显示.代码很简单,本来没有什么值得一提的.但实验的时候发现,有些控件能较好地跟随,但有些不能,而且距离十分远. 主要代 ...
- bjxdpkdzvaciu
xufutwovrcgwcdjrmkmsmoiemsgsfk
- javascript 捕获异常方法
捕获异常的实例: var str="fasdfsadfsad$$异常信息$$你看不到我"; var arr=str.split("$$"); arr[1]; 通 ...
- iDempiere = OSGi + ADempiere 一款ERP&CRM&SCM系统、助力中小企业发展
怀揣着为中小企业量身定做一整套开源软件解决方案的梦想开始了一个网站的搭建.http://osssme.org/ iDempiere = OSGi + ADempiere 一款ERP&CRM&a ...
- freemarker相关
大部分引入:http://www.blogjava.net/alinglau36/archive/2011/02/23/344970.html Freemarker操作字符串 1.substring( ...