第一百九十九节，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 ...
随机推荐
- Matlab中向量场的绘制
% quiver(x,y,u,v) % x,y是包含坐标位置的矩阵,而u和v则是包含偏导数的矩阵. % 例如绘制f(x,y)=y-3x-2x^2-3xy-3y^2的方法: % 先用gradient函数 ...
- 原型设计工具——Axure
1,百度百科 http://baike.baidu.com/view/3332366.htm?from_id=5056136&type=syn&fromtitle=axure& ...
- [转载]使用32位64位交叉编码混淆来打败静态和动态分析工具 - wildsator
0×00 摘要 混淆是一种能增加二进制分析和逆向工程难度与成本的常用技术.主流的混淆技术都是着眼于使用与目标CPU相同的机器代码,在相同的处理器模式下,隐藏代码并进行控制.本文中引入了一种新的混淆方法 ...
- linux下GPRS模块ppp拨号上网
---------------------------------------------------------------------------------------------------- ...
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
什么是BOM? BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对 ...
- 小二助手（react应用框架）-http访问
浏览地址http://118.25.217.253:4000 账号test密码123 qq讨论群:836719189 要写这个系统,就需要数据来源,让我们先来看看如果通过客户端调用服务端api拿到 ...
- win10下将spark的程序提交给远程集群中运行
一,开发环境: 操作系统:win19 64位 IDE:IntelliJ IDEA JDK:1.8 scala:scala-2.10.6 集群:linux上cdh集群,其中spark为1.5.2,had ...
- 如何设定linux系统时间
1.设定日期 #date -s 09/28/2017 2.设定时间 #date -s 11:48:00 设定完了使用date命令查看系统时间,发现已经修改 下图是在Centos6.5 64位版上实际操 ...
- 让Qt Creator支持Windows Phone 8开发
让Qt Creator支持Windows Phone 8开发 近期QtCreator3.2出了.修复了一些Bug.比上一个版本号3.1.2要好了一些. 因为在上一个版本号(Qt for WinRT自带 ...
- web 前端 常见操作 将时间戳转成日期格式 字符串截取 使用mui制作选项卡
1.将时间戳转成日期格式: //第一种 function getLocalTime(nS) { return new Date(parseInt(nS) * 1000).toLocaleString( ...