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 16×16 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>
<!–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>
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>
|
Output:
Basic panel
Reference: http://www.jeasyui.com/documentation/