Open In App

How to design tabs and pills using jQuery EasyUI Mobile ?

Last Updated : 17 Dec, 2020
Improve
Improve
Like Article
Like
Save
Share
Report

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.

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: 




                                 


                            

                                

                                    Like Article
                                    
                                

                                

                                    
                                    Suggest improvement
                                

                            


                            

                            
 
                                

                                    
                                        Next
                                        
                                    
                                    
                                    

                                        How to design badges for mobiles using jQuery EasyUI Mobile ?
                                    

                                

                                                        

                            
    

        

            Share your thoughts in the comments
        

        
    
                            

            

                

                    

                    
                
 
                
    
                            

                                

                            


                            


            

        
 
                        

                                                

                        
                                                    

                                

                                    Similar Reads                                    
                                

                                
      
                                    
        
            

                How to create a tabbed pills and vertical pills navigation menu in Bootstrap ?
            

        
    
        
            

                EasyUI jQuery tabs Widget
            

        
    
        
            

                How to design tree structure for files using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design accordion using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design badges for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design datalists for mobiles using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design buttons for mobiles using jQuery EasyUI Mobile?
            

        
    
        
            

                How to design menu using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design login dialog using jQuery EasyUI Mobile ?
            

        
    
        
            

                How to design navigation panel with ajax loading using jQuery EasyUI Mobile ?
            

        
                                    

                            

                                                                        

                                

                                    
                                                                    

                            


                        

                        

                            

                                

                                    

                                        
G

        

            
        

        

                                    


                                    

                                        geetanjali16                                

                            

                            

            
                                

                            

                                                                    

                                        
Article Tags : 

                                        
                                    

                                                                                            

                                                                                    

                              

                            

                                                        
                        

                    

                

            

        
        


        

                


			
		
		                
        

    

    

        

            

            

        

    












	

    
  

  
  








    
        We use cookies to ensure you have the best browsing experience on our website. By using our site, you
        acknowledge that you have read and understood our
        Cookie Policy &
        Privacy Policy
            
    







   Lightbox