Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to design tabs and pills using jQuery EasyUI Mobile ?

  • Last Updated : 17 Dec, 2020

In this article, we will learn how to design tabs and pills using the jQuery EasyUI Mobile plugin.  Pills are basically the tabs that are in the form of dropdown menus.

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.

Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.

Downloads for EasyUI for jQuery: 

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

Example 1: The following demonstrates the basic tabs using jQuery EasyUI Mobile plugin.



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 libraries of EasyUI Mobile-->
    <script type="text/javascript"
        src="jquery.easyui.mobile.js">
    </script>
 
    <style>
        p {
            line-height: 150%;
        }
    </style>
</head>
 
<body>
    <div class="easyui-tabs"
        data-options="fit:true, border:false,
                    tabWidth:80,tabHeight:35">
        <div title="HTML" style="padding:10px">
             
<p>H
                TML stands for HyperText Markup
                Language. It is used to design
                web pages using a markup language.
                HTML is the combination of Hypertext
                and Markup language. Hypertext
                defines the link between the web
                pages. A markup language is used
                to define the text document within
                tag which defines the structure of
                web pages.
            </p>
 
        </div>
 
        <div title="PHP" style="padding:10px">
             
<p>
                The term PHP is an acronym for PHP:
                Hypertext Preprocessor. PHP is a
                server-side scripting language
                designed specifically for web
                development. PHP can be easily
                embedded in HTML files and HTML
                codes can also be written in a
                PHP file. The thing that
                differentiates PHP with client-side
                language like HTML is, PHP codes
                are executed on the server whereas
                HTML codes are directly rendered
                on the browser.
            </p>
 
        </div>
 
        <div title="CSS" style="padding:10px">
             
<p>
                Cascading Style Sheets, fondly referred
                to as CSS, is a simply designed language
                intended to simplify the process of
                making web pages presentable. CSS allows
                you to apply styles to web pages. More
                importantly, CSS enables you to do this
                independent of the HTML that makes up
                each web page.
            </p>
 
        </div>
    </div>
</body>
 
</html>

Output: 
 

  • Simple tabs: 
     

  • Tabs execution: 
     

 

Example 2: The following code demonstrates the navigation of the tabs using various classes of the jQuery EasyUI Mobile plugin.

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 library 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>
    <style>
        .tab-title {
            display: inline-block;
            line-height: 12px;
            padding-top: 5px;
        }
 
        p {
            line-height: 150%;
        }
    </style>
</head>
 
<body>
    <!--'easyui-navpanel' class is used-->
    <div class="easyui-navpanel">
        <header>
            <div class="m-toolbar">
                <div class="m-title">
                    Technology
                </div>
            </div>
        </header>
 
        <!--'easyui-tabs' class is used-->
        <div class="easyui-tabs"
            data-options="tabHeight:60,
                 fit:true,tabPosition:'bottom',
                 border:false,pill:true,
                 narrow:true,justified:true">
 
            <div style="padding:10px">
                <div class="panel-header tab-title">
                    <img src='images/htmlImage.png' />
                    <br>HTML
                </div>
                 
<p>
                    HTML stands for HyperText Markup
                    Language. It is used to design
                    web pages using a markup language.
                    HTML is the combination of
                    Hypertext and Markup language.
                </p>
 
            </div>
 
            <div style="padding:10px">
                <!--'panel-header' class is used-->
                <div class="panel-header tab-title">
                    <img src='images/phpImage.png' />
                    <br>PHP
                </div>
                 
<p>
                    The term PHP is an acronym for
                    PHP: Hypertext Preprocessor. PHP
                    is a server-side scripting language
                    designed specifically for web
                    development. PHP can be easily
                    embedded in HTML files and HTML
                    codes can also be written in a
                    PHP file.
                </p>
 
            </div>
 
            <div style="padding:10px">
                <div class="panel-header tab-title">
                    <img src='images/cssImage.png' />
                    <br>CSS
                </div>
                 
<p>
                    Cascading Style Sheets, fondly
                    referred to as CSS, is a simply
                    designed language intended to
                    simplify the process of making
                    web pages presentable. CSS allows
                    you to apply styles to web pages.
                </p>
 
            </div>
 
            <div style="padding:10px">
                <div class="panel-header tab-title">
                    <img src='images/python.png' />
                    <br>Python
                </div>
 
                 
<p>
                    Python is a high-level, general
                    -purpose and a very popular
                    programming language.
                </p>
 
                 
                 
<p>
                    Python programming language (latest
                    Python 3) is being used in web
                    development, Machine Learning
                    applications, along with all cutting
                    edge technology in Software Industry.
                </p>
 
            </div>
        </div>
    </div>
</body>
 
</html>

Output: 



 

 

Example 3: The following example demonstrates pills which are like dropdown menus using the above mentioned plugin.

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 library 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>
 
    <style>
        p {
            line-height: 150%;
        }
    </style>
</head>
 
<body>
    <!--'easyui-tabs' class is used-->
    <div class="easyui-tabs"
        data-options="fit: true,
            border: false, pill: true,
            justified: true, tabWidth: 80,
            tabHeight: 35">
        <div title="HTML" style="padding:10px">
             
<p>
                HTML stands for HyperText Markup
                Language. It is used to design
                web pages using a markup language.
                HTML is the combination of
                Hypertext and Markup language.
            </p>
 
        </div>
 
        <div title="CSS" style="padding:10px">
             
<p>
                Cascading Style Sheets, fondly
                referred to as CSS, is a simply
                designed language intended to
                simplify the process of making
                web pages presentable. CSS allows
                you to apply styles to web pages.
            </p>
 
        </div>
 
        <div title="PHP" style="padding:10px">
             
<p>
                The term PHP is an acronym for PHP:
                Hypertext Preprocessor. PHP is a
                server-side scripting language
                designed specifically for web
                development. PHP can be easily
                embedded in HTML files and HTML
                codes can also be written in a PHP
                file.
            </p>
 
        </div>
    </div>
</body>
 
</html>

Output: 




My Personal Notes arrow_drop_up
Recommended Articles
Page :