第 9 章 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>

//JS 加载调用 
$('#box').panel({
     width:500,
     height:150,
     title : '面板',
     closable : true,
});

二.属性列表

Panel 属性

 array,
selector

loadingMessa
     ge

$('#box').panel({ 
    width : 500,
    height : 150,
    title : '面板', 
    closable : true, 
    iconCls : 'icon-edit', 
    cls : 'a',
    headerCls : 'b',
     bodyCls : 'c',
     style : {
        'min-height' : '150px',
     },
    fit : true,
    border : false,
    doSize : true,
    noheader : true,
    content : '修改内容', 
    collapsible : true, 
    minimizable : true, 
    maximizable : true, 
    tools : '#tt',
    tools : [{
                iconCls : 'icon-help', handler : function () {
                    alert('help!'); 
                },
            }],
    collapsed : true,
    minimized : true,
    maximized : true,
    closed : true,
    href : 'content.php',
    cache : false,
    loadingMessage : '加载中...', 
    extractor : function (data) {
        return data.substring(0,3);
    },
});

<div id="tt">
    <a class="icon-add" onclick="javascript:alert('add')"></a>
    <a class="icon-edit" onclick="javascript:alert('edit')"></a> 
    <a class="icon-cut" onclick="javascript:alert('cut')"></a> 
    <a class="icon-help" onclick="javascript:alert('help')"></a>
</div>

三.事件列表

Panel 事件

onBeforeLoad

onBeforeOpen

onBeforeClose

onBeforeDestroy

onBeforeCollapse

onBeforeExpand

width,
height

$('#box').panel({
    width: 500,
    height: 150,
    title: '面板',
    closable: true,
    collapsible: true,
    maximizable: true,
    minimizable: true,
    onBeforeLoad: function() {
        alert('加载远程数据之前触发!');
    },
    onLoad: function() {
        alert('加载远程数据时触发!');
    },
    onBeforeOpen: function() {
        alert('打开面板之前触发!');
        //return false;
    },
    onOpen: function() {
        alert('打开面板之后触发!');
    },
    onBeforeClose: function() {
        alert('关闭面板之前触发!');
        //return false;
    },
    onClose: function() {
        alert('关闭面板之后触发!');
    },
    onBeforeDestroy: function() {
        alert('销毁面板之前触发!');
        return false;
    },
    onDestroy: function() {
        alert('销毁面板之后触发!');
    },
    onBeforeCollapse: function() {
        alert('面板折叠之前触发!');
        return false;
    },
    onCollapse: function() {
        alert('面板折叠之后触发!');
    },
    onBeforeExpand: function() {
        alert('面板展开之前触发!');
        return false;
    },
    onExpand: function() {
        alert('面板展开之后触发!');
    },

    onMaximize: function() {
        alert('窗口最大化之后触发!');
    },
    onRestore: function() {
        alert('窗口回复到原始大小后触发!');
    },
    onMinimize: function() {
        alert('窗口最小化之后触发!');
    },
    onResize: function(width, height) {
        alert('面板改变大小之后触发!' + width + '|' + height);
    },
    onMove: function(left, top) {
        alert('面板移动之后触发!' + left + '|' + top);

    },
});

三.方法列表

            onMaximize: function() {
                alert('窗口最大化之后触发!');

            },
            onRestore: function() {

                alert('窗口回复到原始大小后触发!');
            },

            onMinimize: function() {
                alert('窗口最小化之后触发!');

            },
            onResize: function(width, height) {

                alert('面板改变大小之后触发!' + width + '|' + height);
            },

            onMove: function(left, top) {
                alert('面板移动之后触发!' + left + '|' + top);
            }

Panel 方法

forceDestroy

//返回属性对象 
console.log($('#box').panel('options'));

//返回面板对象
console.log($('#box').panel('panel'));

//返回面板头对象 
console.log($('#box').panel('header'));

//返回面板主体对象
console.log($('#box').panel('body'));

//修改面板标题 
$('#box').panel('setTitle', '修改')

//跳过 onBeforeOpen 回调函数
$('#box').panel('open', true);

//跳过 onBeforeClose 回调函数 
$('#box').panel('close', true);

//跳过 onBeforeDestroy 回调函数 
$('#box').panel('close', true);

//刷新当前内容 
$('#box').panel('refresh');

//刷新指定载入内容
$('#box').panel('refresh', 'content.php');

//设置面板的大小和布局
$('#box').panel('resize', {
    width: 100,
    height: 100,
    left: 100,
    top: 100,
});

//设置移动的坐标 
$('#box').panel('move', {
    left: 100,
    top: 100,
});

//设置面板最大化 
$('#box').panel('maximize');

//设置面板最小化 
$('#box').panel('minimize');

//设置恢复最大化面板到原始的大小和位置
$('#box').panel('restore');

//设置折叠面板 
$('#box').panel('collapse');

//设置展开面板 
$('#box').panel('expand');

//PS: 我们可以使用$.fn.panel.defaults 
//重写默认值对象。 

$.fn.panel.defaults.border = fa

李炎恢 jQuery EasyUI 视频教程_哔哩哔哩_bilibili