极客教程如何使用jQuery EasyUI Mobile设计标签和丸子
在这篇文章中，我们将学习如何使用jQuery EasyUI Mobile插件来设计标签和药片。丸子基本上是以下拉菜单的形式出现的标签。
EasyUI是一个HTML5框架，用于使用基于jQuery、React、Angular和Vue技术的用户界面组件。它有助于为交互式网络和移动应用程序构建功能，为开发者节省大量时间。
EasyUI for jQuery的下载：
https://www.jeasyui.com/download/index.php
例子1：下面演示了使用jQuery EasyUI Mobile插件的基本标签。
<!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>
输出:
- Simple tabs:
- Tabs execution:
示例2：下面的代码演示了使用jQuery EasyUI Mobile插件的各种类对标签的导航。
<!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：下面的例子演示了使用上述插件的类似于下拉菜单的丸子。
<!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>
输出:
