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 a layout using jQuery EasyUI. The layout is the container that has up to five regions which are north, south, east, west, and center. The center region panel is required but the edge region panel is optional.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<div class="layout"></div>
Layout Options:
- fit: If it is set to true, it sets the layout size to fit its parent container.
Region Panel Options:
- title: The layout panel title text.
- region: Defines the layout panel position
- border: It sets to true to show layout panel border.
- split: It sets to true to show a split bar in which the user can change the panel size.
- iconCls: An icon CSS class to show an icon on the panel header.
- href: An URL to load data from a remote server.
- collapsible: It defines if to show collapsible button.
- minWidth: The minimum panel width.
- minHeight: The minimum panel height.
- maxWidth: The maximum panel width.
- maxHeight: The maximum panel height.
- expandMode: The expanding mode when clicking on the collapsed panel.
- collapsedSize: The collapsed panel size.
- hideExpandTool: It sets to true to hide the expand tool on the collapsed panel.
- hideCollapsedContent: It sets to true to hide the title bar on the collapsed panel.
- collapsedContent: The title content to display on the collapsed panel.
Events:
- onCollapse: The event fires when collapsing a region panel.
- onExpand: The event fires when expanding a region panel.
- onAdd: The event fires when adding a new region panel.
- onRemove: The event fires when removing a region panel.
Methods:
- resize: It sets the layout size
- panel: It returns the specified panel.
- collapse: It collapses the specified panel.
- expand: It expand the specified panel.
- add: It adds a specified panel.
- remove: It removes the specified panel.
- split: It splits the region panel.
- unsplit: It unsplits the region panel.
- stopCollapsing: It stops collapsing the region panel.
Approach: 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:
<!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>
<script type="text/javascript">
$(document).ready(function() {
$('#gfg').layout('show', {});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery layout widget</h3>
<div id="gfg" class="easyui-layout" style="width:500px;height:350px;">
<div data-options=
"region:'north',title:'up'">
</div>
<div data-options=
"region:'center',title:'center'">
</div>
<div data-options=
"region:'south',title:'down'">
</div>
<div data-options=
"region:'east',title:'left'">
</div>
<div data-options=
"region:'west',title:'right'">
</div>
</div>
</body>
</html>
|
Output:
Reference: http://www.jeasyui.com/documentation/