EasyUI jQuery tabs Widget

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>



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

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

EasyUI jQuery tabs Widget

Explore