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(面板)组件的更多相关文章

  1. 第一百九十八节,jQuery EasyUI,ProgressBar(进度条)组件

    jQuery EasyUI,ProgressBar(进度条)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 ProgressBar(进度条) ...

  2. 第一百九十三节,jQuery EasyUI,Draggable(拖动)组件

    Draggable(拖动)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Draggable(拖动)组件的使用方法,这个组件不依赖于其 他组 ...

  3. 第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6

    第三百九十九节,Django+Xadmin打造上线标准的在线教育平台—生产环境部署CentOS6.5安装mysql5.6 1.检测系统是否已经安装过mysql或其依赖,若已装过要先将其删除,否则第4步 ...

  4. 第一百九十六节,jQuery EasyUI,Tooltip(提示框)组件

    jQuery EasyUI,Tooltip(提示框)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Tooltip(提示框)组件的使用方法, ...

  5. 第一百九十五节,jQuery EasyUI,Resizable(调整大小)组件

    jQuery EasyUI,Resizable(调整大小)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Resizeable(调整大小)组 ...

  6. 第一百九十四节,jQuery EasyUI,Droppable(放置)组件

    jQuery EasyUI,Droppable(放置)组件 学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表 本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...

  7. 第一百零九节,JavaScript面向对象与原型

    JavaScript面向对象与原型 学习要点: 1.学习条件 2.创建对象 3.原型 4.继承 ECMAScript有两种开发模式:1.函数式(过程化),2.面向对象(OOP).面向对象的语言有一个标 ...

  8. 第二百九十九节,python操作redis缓存-SortSet有序集合类型,可以理解为有序列表

    python操作redis缓存-SortSet有序集合类型,可以理解为有序列表 有序集合,在集合的基础上,为每元素排序:元素的排序需要根据另外一个值来进行比较,所以,对于有序集合,每一个元素有两个值, ...

  9. 第三百九十六节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,自定义列表页上传插件

    第三百九十六节,Django+Xadmin打造上线标准的在线教育平台—其他插件使用说,自定义列表页上传插件 设置后台列表页面字段统计 在当前APP里的adminx.py文件里的数据表管理器里设置 ag ...

随机推荐

  1. Vue 单页应用:记事本

    若文章中存在内容无法加载的情况,请移步作者其他博客. 简书 CSDN 最近在看 Vue 的时候,别人给我安利了一个国外的小案例,通过 Vue 和 Vuex 来实现一个记事本. 仔细剖析下,发现“麻雀虽 ...

  2. java中List和Array相互转换

    List to Array List 提供了toArray的接口,所以可以直接调用转为object型数组 List<String> list = new ArrayList<Stri ...

  3. [Pycharm] Interpreter setting in Pycharm

    From: http://blog.csdn.net/u013088062/article/details/50135135 From: http://blog.csdn.net/u013088062 ...

  4. PHP Xdebug调试专题

    1.介绍与安装 Xdebug是一个PHP扩展,安装配置好后,可以自动记录运行了哪些函数,用了多少毫秒,从哪个文件运行到哪个文件等等 它记下来的调试信息很详细,对一些复杂程序跟踪调试有很大的辅助效果,能 ...

  5. Kafka查看偏移量报错:WARN WARNING: ConsumerOffsetChecker is deprecated and will be dropped in releases following 0.9.0. Use ConsumerGroupCommand instead.

    Kafka0.9版本后,命令ConsumerOffsetChecker已弃用,用新的命令来查. // 列表 bin/kafka-consumer-groups.sh --zookeeper local ...

  6. SQLCMD Mode: give it one more chance

    From : http://sqlblog.com/blogs/maria_zakourdaev/archive/2012/05/11/sqlcmd-mode-give-it-one-more-cha ...

  7. 攻克了Cocoapods Undefined symbols for architecture _OBJC_CLASS_xxxx的问题,辛苦死我了,记录下之后有空在研究

    网上找了一大包将尽3个小时没有解决,原本以为是我升级到10.10的原因,把cocoapod 重装 stackoverflow google 用尽了也不知道为啥 结果是这个样子的 编译出现这个.... ...

  8. Spring集成Jersey开发(附demo)

    下文将会初步介绍如何在Spring中集成Jersey,并附简单的demo 所依赖的技术版本: Jersey 1.8 Spring 3.0.5.RELEASE 1. 项目依赖 pom.xml定义(注意去 ...

  9. iOS 核心动画 Core Animation浅谈

    代码地址如下:http://www.demodashi.com/demo/11603.html 前记 关于实现一个iOS动画,如果简单的,我们可以直接调用UIView的代码块来实现,虽然使用UIVie ...

  10. Sql Server分页分段查询百万级数据四种项目实例

    实际项目中需要实现自定义分页,最关键第一步就是写分页SQL语句,要求语句效率要高. 那么本文的一个查询示例是查询第100000-100050条记录,即每页50条的结果集.查询的表名为infoTab,且 ...