第一百九十九节,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;

 

posted @ 2017-03-29 19:16  林贵秀  阅读(2119)  评论(0编辑  收藏  举报