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 tabs using jQuery EasyUI. Tabs to display a collection of panels. It shows only one tab panel at a time. Each tab panel has the header title and some mini button tools, including the close button and other customized buttons.
Downloads for EasyUI for jQuery:
https://www.jeasyui.com/download/index.php
Syntax:
<div class="tabs"> </div>
Properties:
- width: It is used to set the width of tabs container.
- height: It is used to set the height of tabs container.
- plain: True to render the tab strip without a background container image.
- fit: True to set the size of tabs container to fit its parent container.
- border: True to show tabs container border.
- scrollIncrement: It is used to set the number of pixels to scroll each time a tab scroll button is pressed.
- scrollDuration: It is used to set the number of milliseconds that each scroll animation should last.
- tools: It is used to set the toolbar placed on left or right side of header.
- toolPosition: It is used to set the toolbar position.
- tabPosition: It is used to set the tab position.
- headerWidth: It is used to set the tab header width.
- tabWidth: It is used to set the width of tab strip.
- tabHeight: It is used to set the height of tab strip.
- selected: It is used to set the initialized selected tab index.
- showHeader: True to display tabs header.
- justified: True to make tab strips equal widths of their parent container.
- narrow: True to remove the space between tab strips.
- pill: True to make tab strips look like pills.
Events:
- onLoad: Fires when an Ajax tab panel finish loading remote data.
- onSelect: Fires when user selects a tab panel.
- onUnselect: Fires when user unselect a tab panel.
- onBeforeClose: Fires before the tab panel is closed
- onClose: Fires when user close a tab panel.
- onAdd: Fires when a new tab panel is added.
- onUpdate: Fires when a tab panel is updated.
- onContextMenu: Fires when a tab panel is right-clicked.
Methods:
- options: It is used to Return the tabs options.
- tabs: It is used to Return all tab panels.
- resize: It is used to Resize the tabs container and do layout.
- add: It is used to Add a new tab panel.
- close: It is used to Close a tab panel.
- getTab:It is used to Get the specified tab panel.
- getTabIndex: It is used to Get the specified tab panel index
- getSelected: It is used to Get the selected tab panel.
- select: It is used to Select a tab panel.
- unselect: It is used to Select a tab panel.
- showHeader: It is used to Show the tabs header.
- hideHeader: It is used to Hide the tabs header.
- showTool: It is used to Show the tabs tools.
- hideTool: It is used to Hide the tabs tools.
- exists: It is used to Indicate if the special panel is exists
- update: It is used to Update the specified tab panel.
- enableTab: It is used to Enable the specified tab panel.
- disableTab: It is used to Disable the specified tab panel.
- scrollBy: It is used to Scroll the tab header by the specified amount of pixels.
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:
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>
<script type="text/javascript">
$(document).ready(function () {
$('#gfg').tabs('show', {
borders: true
});
});
</script>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>EasyUI jQuery tabs widget</h3>
<div id="tabs" class="easyui-tabs" style="width:500px;height:450px;">
<div title="gfg1">
first tab
</div>
<div title="gfg2">
second tab
</div>
<div title="gfg3">
third tab
</div>
</div>
</body>
</html>
|
Output:
Reference: http://www.jeasyui.com/documentation/