En este artículo, aprenderemos a diseñar pestañas y píldoras con el complemento jQuery EasyUI Mobile. Las píldoras son básicamente las pestañas que tienen forma de menús desplegables.
EasyUI es un marco HTML5 para usar componentes de interfaz de usuario basados en tecnologías jQuery, React, Angular y Vue. Ayuda a crear funciones para aplicaciones móviles y web interactivas, lo que ahorra mucho tiempo a los desarrolladores.
Descargas para EasyUI para jQuery:
https://www.jeasyui.com/download/index.php
Ejemplo 1: A continuación, se muestran las pestañas básicas con el complemento 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>
Producción:
- Pestañas simples:
- Ejecución de pestañas:
Ejemplo 2: El siguiente código demuestra la navegación de las pestañas utilizando varias clases del complemento 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>
Producción:
Ejemplo 3: El siguiente ejemplo muestra píldoras que son como menús desplegables usando el complemento mencionado anteriormente.
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA