WEB入门之二十 插件
视频课：https://edu.csdn.net/course/play/7621
10.1.1 了解jQuery插件
插件也可称为扩展，是一种遵循某规范的应用程序接口而编写出来的程序。jQuery的易扩展性吸引了全球无数开发者共同来编写jQuery的插件。目前已有成百上千个jQuery插件发布，并且数量在不断增加中。
jQuery插件按作者分为两种：jQuery官方插件和第三方插件。前面学习的jQuery UI是由jQuery官方开发并维护的插件，而本节课要学习的是数量众多的第三方插件。
jQuery官方使用http://plugins.jquery.com/网站来管理、维护和发布最新、最全的插件，但是由于垃圾邮件、不规范的插件、数据备份以及对目前插件站点功能不完善等多种因素，该站点已经不能提供服务了。jQuery官方现在使用GitHub（版本控制系统）来重建插件的维护方式。
下面挑选一些经过实际检验的、优秀的jQuery插件供大家学习。
10.1.2 任务2：放大镜
放大镜是一些购物网站经常使用的插件，例如通过放大镜可以让用户很方便的查看商品的细节。下面是放大镜的实现代码。
示例10.1
-
<html>
-
-
<head>
-
-
<title>示例10.1</title>
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-
-
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
-
-
<script src="jqzoom/jqzoom.pack.1.0.1.js" type="text/javascript"></script>
-
-
<link rel="stylesheet" href="jquzoom/jqzoom.css" type="text/css">
-
-
<script type="text/javascript">
-
-
$(document).ready(
-
-
function(){
-
-
var options = {
-
-
zoomWidth: 335,
-
-
zoomHeight: 251,
-
-
xOffset: 10,
-
-
yOffset: 0,
-
-
position: "right"
-
-
};
-
-
$('.jqzoom').jqzoom(options);
-
-
});
-
-
</script>
-
-
</head>
-
-
<body>
-
-
<div>
-
-
<a href="jqzoom/kawasakigreen.jpg" class="jqzoom" title="细节图">
-
-
<img src="jqzoom/kawasakigreen_small.jpg" style="border: 1px solid #666;">
-
-
</a>
-
-
</div>
-
-
</body>
-
-
</html>
kawasakigreen_small.jpg是分辨率较小的图片，kawasakigreen.jpg是分辨率较大的细节图。斜体部分使用jqzoom函数实现了放大镜，该函数支持参数设置，zoomWidth和zoomHeight用来设置细节图的大小，xOffset和yOffset用来设置两图之间的距离，position用来设置细节图出现的位置。
10.1.1 任务3：Web编辑器
Web编辑器是一种类似于Word但是出现在网页上的编辑器，通常用在各个论坛、留言板、新闻管理系统中，可以给用户提供强大的文字编辑功能。下面是基于jQuery的Web编辑器的实现代码。
示例10.2
-
10.2.3任务3：Web编辑器
-
Web编辑器是一种类似于Word但是出现在网页上的编辑器，通常用在各个论坛、留言板、新闻管理系统中，可以给用户提供强大的文字编辑功能。下面是基于jQuery的Web编辑器的实现代码。
-
示例10.2
-
<!DOCTYPE html>
-
<html>
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
-
<title>示例10.2</title>
-
<link rel="stylesheet" type="text/css" href="WebEditor/css/screen.css" media="screen, projection" />
-
<link rel="stylesheet" type="text/css" href="WebEditor/css/print.css" media="print" />
-
<!--[if lt IE 8]><link rel="stylesheet" href="WebEditor/css/ie.css" type="text/css" media="screen, projection" /><![endif]-->
-
<link rel="stylesheet" href="WebEditor/css/jquery.wysiwyg.css" type="text/css"/>
-
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
-
<script type="text/javascript" src="WebEditor/js/jquery.wysiwyg.js"></script>
-
<script type="text/javascript" src="WebEditor/js/wysiwyg.image.js"></script>
-
<script type="text/javascript" src="WebEditor/js/wysiwyg.link.js"></script>
-
<script type="text/javascript" src="WebEditor/js/wysiwyg.table.js"></script>
-
<script type="text/javascript">
-
$(document).ready(function() {
-
$('#wysiwyg').wysiwyg();
-
});
-
</script>
-
</head>
-
<body>
-
<div class="container">
-
<h3>Web编辑器</h3><br/>
-
<textarea id="wysiwyg" rows="5" cols="80"></textarea>
-
<hr/>
-
</div>
-
</body>
-
</html>
-
实现这个Web编辑器需要导入很多css文件和js文件，这些文件把textarea封装成了一个功能强大的编辑器，具体由斜体部分的代码实现，运行效果如图10.1.2所示。
10.1.1 任务4：树形菜单
树形菜单是Web前端开发中经常需要实现的程序。下面的代码通过一个jQuery插件很简单得就实现了树形菜单。
示例10.3
-
<!DOCTYPE html>
-
-
<html>
-
-
<head>
-
-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-
-
<title>示例10.3</title>
-
-
<link rel="stylesheet" type="text/css" href="SimpleTree/tree_themes/SimpleTree.css"/>
-
-
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
-
-
<script type="text/javascript" src="SimpleTree/SimpleTree.js"></script>
-
-
<script type="text/javascript">
-
-
$(function(){
-
-
$(".st_tree").SimpleTree();
-
-
});
-
-
</script>
-
-
</head>
-
-
<body>
-
-
<div class="st_tree">
-
-
<ul>
-
-
<li><a href="#">欢迎界面</a></li>
-
-
<li><a href="#">系统管理</a></li>
-
-
<ul show="true">
-
-
<li><a href="#">用户管理</a></li>
-
-
<li><a href="#">日志查看</a></li>
-
-
</ul>
-
-
<li><a href="#">仓库管理</a></li>
-
-
<ul>
-
-
<li><a href="#">库存管理</a></li>
-
-
<li><a href="#">收货管理</a></li>
-
-
<li><a href="#">发货管理</a></li>
-
-
<ul>
-
-
<li><a href="#">用户管理</a></li>
-
-
<li><a href="#">日志查看</a></li>
-
-
</ul>
-
-
</ul>
-
-
</ul>
-
-
</div>
-
-
</body>
-
-
</html>
函数可以把一个包含了列表的 封装成一个树形菜单，运行效果如图 10.1.3 所示。
文章来源: aaaedu.blog.csdn.net，作者：tea_year，版权归原作者所有，如需转载，请联系作者。
原文链接：aaaedu.blog.csdn.net/article/details/59124121
- 点赞
- 收藏
- 关注作者
评论（0）