EasyUI jQuery panel widget

Last Updated : 31 Mar, 2021

EasyUI is an HTML5 framework for using user interface components based on jQuery, React, Angular, and Vue technologies. It helps in building features for interactive web and mobile applications saving a lot of time for developers.

In this article, we will learn how to design panels using jQuery EasyUI. The Panel is used as a container for other contents. It is the base component for building other components such as layout, tabs, accordion, etc.

Downloads for EasyUI for jQuery:

https://www.jeasyui.com/download/index.php

Syntax:

<div class="panel">  </div>

Properties:

id: The id attribute of this panel.
title: The title text to display in panel header.
iconCls: A CSS class to display a 16x16 icon in the panel.
width: It sets the panel width.
height: It sets the panel height.
left: It sets the panel left position.
top: It sets the panel top position.
cls: It add a CSS class to the panel.
headerCls: It adds a CSS class to the panel header.
bodyCls: It adds a CSS class to the panel body.
style: It adds a custom specification style to the panel.
fit: When it is set to true, the panel size fits its parent container.
border: It shows a panel border.
doSize: If set to true, the panel will be resized.
noheader: If set to true, the panel header will not be created.
content: It sets the panel body content.
halign: It sets the panel header alignment.
titleDirection: It sets the header title direction.
collapsible: If it is set, it shows the collapsible button.
minimizable: If it is set, it shows a minimizable button.
maximizable: If it is set, it shows a maximizable button.
closable: If it is set, it shows a closable button.
header: It sets the panel header.
footer: It sets the panel footer.
openAnimation: It sets the opening animation.
openDuration: It sets the opening duration.
closeAnimation: It sets the closing animation.
closeDuration: It sets the closing duration.
collapsed: If it is set, the panel is collapsed at initialization.
minimized: If it is set, the panel is minimized at initialization.
maximized: If it is set, the panel is maximized at initialization.
closed: If it is set, the panel is closed at initialization.
href: A URL to load remote data and then display in the panel.
cache: It is set to true, it caches the panel content that loaded from href.
loadingMessage: When the remote data is loaded, it shows a message in the panel.
method: The HTTP method loads the content page.
queryParams: It sets the additional parameters that will be sent when loading a content page.
loader: It defines how to load the content page from the remote server.

Events:

onBeforeLoad: It fires before loading a content page, returns false to ignore this action.
onLoad: It fires when remote data is loaded.
onLoadError: It fires when some errors occur to load the content page.
onBeforeOpen: It fires before the panel is opened.
onOpen: It fires after a panel is opened.
onBeforeClose: It fires before a panel is closed
onClose: It fires after a panel is closed.
onBeforeDestroy: It fires before a panel is destroyed.
onDestroy: It fires after a panel is destroyed.
onBeforeCollapse: It fires before a panel is collapsed.
onCollapse: It fires after a panel is collapsed.
onBeforeExpand: It fires before the panel is expanded.
onExpand: It fires after the panel is expanded.
onResize: It fires after the panel is resized.
onMove: It fires after the panel is moved.
onMaximize: It fires after the window has been maximized.
onRestore: It fires after the window has been restored to its original size.
onMinimize: It fires after the window has been minimized.

Methods:

options: It returns options property.
panel: It returns the outer panel object.
header:It returns the panel header object.
footer: It returns the panel footer object.
body: It returns the panel body object.
setTitle: Set the title text of the header.
open: When open parameter set to true
close: When forceClose parameter set to true, the panel is closed.
destroy: When forceDestroy parameter set to true, the panel is destroyed .
clear: Clear the panel content.
refresh: Refresh the panel to load remote data.
resize: Set panel size and do the layout.
doLayout: Set the sizes of child components within the panel.
move: Move the panel to a new position.
maximize: Fits the panel within its container.
minimize: Minimizing the panel.
restore: Restores the maximized panel back to its original size and position.
collapse: Collapses the panel body.
expand: Expand the panel body.

CDN Link: First, add jQuery Easy UI scripts needed for your project.

<script type="text/javascript" src="jquery.min.js"></script>  <script type="text/javascript" src="jquery.easyui.min.js"> </script>  <script type="text/javascript" src="jquery.easyui.mobile.js"> </script>

Example:

HTML

<!doctype html>  <html>   <head>      <meta charset="UTF-8">      <meta name="viewport" content="initial-scale=1.0,          maximum-scale=1.0, user-scalable=no">                   <!-- EasyUI specific stylesheets-->     <link rel="stylesheet" type="text/css"         href="themes/metro/easyui.css">       <link rel="stylesheet" type="text/css"         href="themes/mobile.css">       <link rel="stylesheet" type="text/css"         href="themes/icon.css">       <!--jQuery library -->     <script type="text/javascript" src="jquery.min.js">      </script>       <!--jQuery libraries of EasyUI -->     <script type="text/javascript"         src="jquery.easyui.min.js">      </script>           <!--jQuery library of EasyUI Mobile -->     <script type="text/javascript"         src="jquery.easyui.mobile.js">      </script>    </head>   <body>          <h1>GeeksforGeeks</h1>     <h3>how to make a basic panel using jQuery UI?</h3>     <div id="p" class="easyui-panel" title="gfg"           style="width:400px;height:200px;padding:3px">     <p>geeks</p>     <p>geeks2</p>  </div>  </body> </html>