第一百九十九节，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 ...
随机推荐
- Linux环境下安卓SDK和ADT下载地址下载地址
SDK: android-sdk_r15-linux.tgz android-sdk_r23.0.1-linux.tgz android-sdk_r24.1.2-linux.tgz android-s ...
- python中list/tuple/dict/set的区别
序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推.Python有6个序列的内置类型,但最常见的是列表list和元组t ...
- linux内核分析笔记----上半部与下半部(下)
接着上节的来,我们在上节说了软中断和tasklet,那这最后就是工作队列了哦.. 工作队列和前面讨论的其他形式都不相同,它可以把工作推后,交由一个内核线程去执行----该工作总是会在进程上下文执行.这 ...
- 认识多渲染目标(Multiple Render Targets)技术 【转】
认识多渲染目标(Multiple Render Targets)技术 首先,渲染到纹理是D3D中的一项高级技术.一方面,它很简单,另一方面它很强大并能产生很多特殊效果. 比如说发光效果,环境映射,阴影 ...
- angularJS 中的two-way data binding.
原文: https://stackoverflow.com/questions/11616636/how-to-do-two-way-filtering-in-angularjs ---------- ...
- Linux命令--mysqld_safe和mysqld区别
Linux命令--mysqld_safe和mysqld区别 学习了:https://blog.csdn.net/Aaroun/article/details/78143832 mysqld_safe ...
- Appium Python 一：环境搭建
安装Android SDK以及模拟器 由于Appium依赖于Android SDK,所以需要先安装SDK. 这里由于需要在Android模拟器上跑测试用例,所以同时需要安装Android 模拟器. 1 ...
- Apache 使用gzip、deflate 压缩页面加快网站访问速度
Apache 使用gzip 压缩页面加快网站访问速度 介绍: 网页压缩来进一步提升网页的浏览速度,它完全不需要任何的成本,只不过是会让您的服务器CPU占用率稍微提升一两个百分点而已或者更少. 原理 ...
- vue单文件 style important引入样式
使用@import引入外部css,作用域是全局的 <template> </template> <script> export default { name: &q ...
- T420s成功加装固态硬盘（SSD）
目的 为了提升系统和经常使用工具的启动速度,ThinkPad T420s光驱位加一块固态硬盘. 操作步骤 购买:没做太多对照了解,初步计划是安装在光驱位,直接JD上买了SanDisk的128G和推荐的 ...