Chapter 9 Panel Components

Posted by justinjkiss on Tue, 04 Jan 2022 09:11:26 +0100

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

Property Name

value

Explain

id

string

The ID value of the panel. The default is null.

title

string

The title text displayed in the panel. The default is null.

iconCls

string

Set a CSS class ID of 16x16 icon to display in the upper left corner of the panel. The default is null.

width

number

Set the panel width. Default value auto.

height

number

Set the panel height. Default value auto.

left

number

Set the position of the panel from the left (that is, the X-axis position). The default is null.

top

number

Set the position of the panel from the top (that is, the Y-axis position). Default to

null.

cls

string

Add a CSS class ID to the panel. The default is null.

headerCls

string

Add a CSS class ID to the panel header. The default is null.

bodyCls

string

Add a CSS class ID to the panel body section. The default is null.

style

subject

Add a currently specified style to the panel. The default is {}.

fit

boolean

The panel size adapts to the parent container when set to true. Default to false.

border

boolean

Defines whether the panel border is displayed. Default to true

doSize

boolean

If set to true, the panel will be resized and re-laid out when it is created. Default to true.

noheader

boolean

If set to true. The panel title will not be created. Default to false.

content

string

Panel body content. The default is null.

collapsible

boolean

Defines whether to display collapsible buttons. Default to false.

minimizable

boolean

Defines whether the Minimize button is displayed. Default to false.

maximizable

boolean

Defines whether the maximize button is displayed. Default to false.

closeable

boolean

Defines whether the close button is displayed.

tools

 array,
selector

Custom tool menu, available values:
1) Array, each element contains'iconCls'and'handler' attributes. 2) A selector that points to the tool menu. Default is [].

collapsed

boolean

Defines whether to collapse the panel at initialization. The default value is false.

minimized

boolean

Defines whether to minimize the panel at initialization. The default value is false.

maximized

boolean

Defines whether to maximize the panel at initialization. The default value is false.

closed

boolean

Defines whether to close the panel at initialization. Default to false.

href

string

Reads remote data from the URL and displays it to the panel. The default is null.

cache

boolean

If true, the panel content is cached when the hyperlink loads. Default to true.

loadingMessa
     ge

string

Display a message in the panel when loading remote data. The default value is load....

extractor

function

Defines how to extract content from the ajax response data and return the extracted data.

$('#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

Event Name

Pass-through

Explain

onBeforeLoad

none

Triggered before loading remote data.

onLoad

none

Triggered when remote data is loaded.

onBeforeOpen

none

Triggered before opening the panel, return to false to cancel the open operation.

onOpen

none

Trigger after opening the panel.

onBeforeClose

none

Triggered before closing the panel, returning false cancels the closing operation.

onClose

none

Triggers after the panel is closed.

onBeforeDestroy

none

Triggered before the panel is destroyed, returning false cancels the destroy operation.

onDestroy

none

Triggered after the panel is destroyed.

onBeforeCollapse

none

Triggered before the panel collapses, returning false terminates the collapse operation.

onCollapse

none

Triggered after the panel collapses.

onBeforeExpand

none

Triggered before the panel is expanded, returning false terminates the expansion.

onExpand

none

Triggers after the panel is expanded.

onResize

width,
height

Triggers when the panel changes size. Width: New width. Height: New height.

onMove

left, top

Triggers after the panel moves. Left: New left margin position. Top: New top margin position.

onMaximize

none

Triggered after the window is maximized.

onRestore

none

Triggered after the window is restored to its original size.

onMinimize

none

Triggered after the window is minimized.

$('#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

Method Name

parameter

Explain

options

none

Returns the property object.

panel

none

Returns the panel object.

header

none

Returns the panel header object.

body

none

Returns the panel body object.

setTitle

title

Set the title text of the panel header.

open

forceOpen

When the'forceOpen'parameter is set to true, the'onBeforeOpen' callback function is skipped when the panel is opened.

close

forceClose

When the'forceClose'parameter is set to true, the'onBeforeClose' callback function is skipped when the panel is closed.

destroy

forceDestroy

The'onBeforeDestroy'callback function is skipped when the'forceDestroy' parameter is set to true.

refresh

href

Refresh the panel to load remote data. If the'href'attribute has a new configuration, it will override the old'href' attribute.

resize

options

Set panel size and layout. The parameter object contains the following properties: width: New panel width. Height: New panel height. Left: New panel left margin position. top: The margin position on the new panel.

move

options

Move the panel to a new location. The parameter object contains the following properties: left: the new left margin position. Top: New top margin position.

maximize

none

Maximize panel to container size.

minimize

none

Minimize the panel.

restore

none

Restore the maximization panel back to its original size and position.

collapse

animate

Collapse panel theme.

expand

animate

Expand the panel body.

 

//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

Topics: Javascript Front-end EasyUI