How to design tabs and pills using jQuery EasyUI Mobile ?
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:
Contact Us