第一百九十九节，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来设置cssstyle: {                //添加一个指定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来设置cssfit: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;

转载于:https://www.cnblogs.com/adc8868/p/6641325.html

第一百九十九节，jQuery EasyUI，Panel(面板)组件相关推荐

第一百九十八节，jQuery EasyUI，ProgressBar(进度条)组件
jQuery EasyUI,ProgressBar(进度条)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 ProgressBar(进度条) ...
美学心得（第一百九十九集）罗国正
美学心得(第一百九十九集) 罗国正 (2019年5月) 2693. 关于爱的美学随笔罗国正 (2019年5月2日至16日) 好几个朋友,几次对我说,你写了这么多的<美学心得>,如果写一篇 ...
第一百九十四节，jQuery EasyUI，Droppable(放置)组件
jQuery EasyUI,Droppable(放置)组件学习要点: 1.加载方式 2.属性列表 3.事件列表 4.方法列表本节课重点了解 EasyUI 中 Droppable(放置)组件的使用方 ...
美学心得（第一百九十四集）罗国正
美学心得(第一百九十四集) 罗国正 (2018年11月) 2823.个人或群体,常在生理上和心理上积蓄着强大的势能,引爆这些势能很多时是由对号入座的一个"微细的感觉"导致的.这种& ...
第三百零九节，Django框架,models.py模块，数据库操作——F和Q()运算符：|或者、并且——queryset对象序列化...
第三百零九节,Django框架,models.py模块,数据库操作--F()和Q()运算符:|或者.&并且 F()可以将数据库里的数字类型的数据,转换为可以数字类型首先要导入 from dj ...
jQuery Easy UI Panel(面板)组件
panel(面板)组件,跟前面的组件使用方法差点儿都差点儿相同,也是从设置一些面板属性.操作面板触发的事件.我们可针对面板对象的操作方法这三个点去学习. 后面有一些组件要依赖于这个组件. 另一点跟前面 ...
网站前端_EasyUI.基础入门.0002.带你玩转jQuery EasyUI Panel组件 ?
简单介绍: 说明: Panel面板常当作其它内容的容器,可用于创建包含Layout布局/Tabs选项卡/Accordion折叠面板等基础组件,还提供了内置的折叠/关闭/最大化/最小化的行为,你可以将它 ...
JQuery EasyUI的常用组件
jQuery EasyUI 是一个基于 jQuery 的框架,集成了各种用户界面插件,该框架提供了创建网页所需的一切,帮助您轻松建立站点. 注:本次介绍的JQuery EasyUI版本为1.5版. 一 ...
jQuery EasyUI 选项卡面板tabs使用实例精讲
1. 对选项卡面板区域 div 设置 class="easyui-tabs" 2. 对选项卡面板区域添加多个 div,每个 div 就是一个选项卡(每个面板一定设置 title) ...

第一百九十九节，jQuery EasyUI，Panel(面板)组件

第一百九十九节，jQuery EasyUI，Panel(面板)组件相关推荐

最新文章

热门文章