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.

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:

How to design calendar for web page using jQuery EasyUI ?

geetanjali16

Improve

Article Tags :

How to design tabs and pills using jQuery EasyUI Mobile ?

Similar Reads