Learning Points:

1. Loading method

2. Attribute List

3. Event List

4. List of methods

This lesson focuses on how to use the Panel component in EasyUI, which is independent of other components.

1. Loading Method

//class Loading Method
<div class="easyui-panel" data-options="closable:true">
    <p>Content Area</p>
</div>

//JS load call $('#box').panel({
     width:500,
     height:150,
     title : 'panel',
     closable : true,
});

2. Attribute List

title="My Panel" style="width:500px;">

Panel Properties

 array,
selector

loadingMessa
     ge

$('#box').panel({ 
    width : 500,
    height : 150,
    title : 'panel', 
    closable : true, 
    iconCls : 'icon-edit', 
    cls : 'a',
    headerCls : 'b',
     bodyCls : 'c',
     style : {
        'min-height' : '150px',
     },
    fit : true,
    border : false,
    doSize : true,
    noheader : true,
    content : 'Modify 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 : 'Loading...', 
    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>

3. Event List

<a class="icon-edit" οnclick="javascript:alert('edit')"></a> <a class="icon-cut" οnclick="javascript:alert('cut')"></a> <a class="icon-help" οnclick="javascript:alert('help')"></a>

Panel Event

onBeforeLoad

onBeforeOpen

onBeforeClose

onBeforeDestroy

onBeforeCollapse

onBeforeExpand

width,
height

$('#box').panel({
    width: 500,
    height: 150,
    title: 'panel',
    closable: true,
    collapsible: true,
    maximizable: true,
    minimizable: true,
    onBeforeLoad: function() {
        alert('Triggered before loading remote data!');
    },
    onLoad: function() {
        alert('Triggered when remote data is loaded!');
    },
    onBeforeOpen: function() {
        alert('Trigger before opening panel!');
        //return false;
    },
    onOpen: function() {
        alert('Triggered after opening the panel!');
    },
    onBeforeClose: function() {
        alert('Trigger before closing panel!');
        //return false;
    },
    onClose: function() {
        alert('Triggered after closing the panel!');
    },
    onBeforeDestroy: function() {
        alert('Triggered before the panel is destroyed!');
        return false;
    },
    onDestroy: function() {
        alert('Trigger after panel is destroyed!');
    },
    onBeforeCollapse: function() {
        alert('Trigger before panel collapses!');
        return false;
    },
    onCollapse: function() {
        alert('Trigger after panel collapses!');
    },
    onBeforeExpand: function() {
        alert('Trigger before panel expands!');
        return false;
    },
    onExpand: function() {
        alert('Trigger after panel expands!');
    },

    onMaximize: function() {
        alert('Trigger after window maximizes!');
    },
    onRestore: function() {
        alert('Triggered when the window reverts to its original size!');
    },
    onMinimize: function() {
        alert('Triggered after the window is minimized!');
    },
    onResize: function(width, height) {
        alert('Triggered after panel is resized!' + width + '|' + height);
    },
    onMove: function(left, top) {
        alert('Trigger after panel moves!' + left + '|' + top);

    },
});

3. Method List

            onMaximize: function() {
                alert('Trigger after window maximizes!');

            },
            onRestore: function() {

                alert('Triggered when the window reverts to its original size!');
            },

            onMinimize: function() {
                alert('Triggered after the window is minimized!');

            },
            onResize: function(width, height) {

                alert('Triggered after panel is resized!' + width + '|' + height);
            },

            onMove: function(left, top) {
                alert('Trigger after panel moves!' + left + '|' + top);
            }

Panel method

forceDestroy

//Return Property Object 
console.log($('#box').panel('options'));

//Return panel object
console.log($('#box').panel('panel'));

//Return panel header object 
console.log($('#box').panel('header'));

//Return panel body object
console.log($('#box').panel('body'));

//Modify Panel Title 
$('#box').panel('setTitle','Modify')

//Skip onBeforeOpen callback function
$('#box').panel('open', true);

//Skip onBeforeClose callback function 
$('#box').panel('close', true);

//Skip onBeforeDestroy callback function 
$('#box').panel('close', true);

//Refresh current content 
$('#box').panel('refresh');

//Refresh specified load content
$('#box').panel('refresh', 'content.php');

//Set the size and layout of the panel
$('#box').panel('resize', {
    width: 100,
    height: 100,
    left: 100,
    top: 100,
});

//Set moving coordinates 
$('#box').panel('move', {
    left: 100,
    top: 100,
});

//Set Panel Maximization 
$('#box').panel('maximize');

//Settings Panel Minimization 
$('#box').panel('minimize');

//Set Recovery Maximization Panel to original size and position
$('#box').panel('restore');

//Set Fold Panel 
$('#box').panel('collapse');

//Set Expansion Panel 
$('#box').panel('expand');

//PS: We can use $. fn.panel.defaults 
//Overrides the default value object. 

$.fn.panel.defaults.border = fa

Li Yanhui jQuery EasyUI Video Tutorial_ Bell-Bell-Bell_ bilibili