Как создавать вкладки и таблетки с помощью jQuery EasyUI Mobile?
Опубликовано: 6 Января, 2022
В этой статье мы узнаем, как создавать вкладки и таблетки с помощью плагина jQuery EasyUI Mobile. Таблетки - это в основном вкладки в форме раскрывающихся меню.
EasyUI - это платформа HTML5 для использования компонентов пользовательского интерфейса на основе технологий jQuery, React, Angular и Vue. Это помогает создавать функции для интерактивных веб-приложений и мобильных приложений, экономя много времени для разработчиков.
Загрузки EasyUI для jQuery:
https://www.jeasyui.com/download/index.php
Пример 1. Ниже показаны основные вкладки с использованием плагина jQuery EasyUI Mobile.
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 > |
Выход:
- Простые вкладки:
- Выполнение вкладок:
Пример 2: Следующий код демонстрирует навигацию по вкладкам с использованием различных классов подключаемого модуля jQuery EasyUI Mobile.
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 > |
Выход:
Пример 3: В следующем примере демонстрируются таблетки, которые похожи на раскрывающиеся меню с использованием вышеупомянутого плагина.
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 > |
Выход:
