WEB入门之二十 插件
視頻課：https://edu.csdn.net/course/play/7621
10.1.1?了解jQuery插件
插件也可稱(chēng)為擴(kuò)展，是一種遵循某規(guī)范的應(yīng)用程序接口而編寫(xiě)出來(lái)的程序。jQuery的易擴(kuò)展性吸引了全球無(wú)數(shù)開(kāi)發(fā)者共同來(lái)編寫(xiě)jQuery的插件。目前已有成百上千個(gè)jQuery插件發(fā)布，并且數(shù)量在不斷增加中。
jQuery插件按作者分為兩種：jQuery官方插件和第三方插件。前面學(xué)習(xí)的jQuery UI是由jQuery官方開(kāi)發(fā)并維護(hù)的插件，而本節(jié)課要學(xué)習(xí)的是數(shù)量眾多的第三方插件。
jQuery官方使用http://plugins.jquery.com/網(wǎng)站來(lái)管理、維護(hù)和發(fā)布最新、最全的插件，但是由于垃圾郵件、不規(guī)范的插件、數(shù)據(jù)備份以及對(duì)目前插件站點(diǎn)功能不完善等多種因素，該站點(diǎn)已經(jīng)不能提供服務(wù)了。jQuery官方現(xiàn)在使用GitHub（版本控制系統(tǒng)）來(lái)重建插件的維護(hù)方式。
下面挑選一些經(jīng)過(guò)實(shí)際檢驗(yàn)的、優(yōu)秀的jQuery插件供大家學(xué)習(xí)。
10.1.2?任務(wù)2：放大鏡
放大鏡是一些購(gòu)物網(wǎng)站經(jīng)常使用的插件，例如通過(guò)放大鏡可以讓用戶很方便的查看商品的細(xì)節(jié)。下面是放大鏡的實(shí)現(xiàn)代碼。
示例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="細(xì)節(jié)圖"><img src="jqzoom/kawasakigreen_small.jpg" style="border: 1px solid #666;"></a></div></body></html>kawasakigreen_small.jpg是分辨率較小的圖片，kawasakigreen.jpg是分辨率較大的細(xì)節(jié)圖。斜體部分使用jqzoom函數(shù)實(shí)現(xiàn)了放大鏡，該函數(shù)支持參數(shù)設(shè)置，zoomWidth和zoomHeight用來(lái)設(shè)置細(xì)節(jié)圖的大小，xOffset和yOffset用來(lái)設(shè)置兩圖之間的距離，position用來(lái)設(shè)置細(xì)節(jié)圖出現(xiàn)的位置。
10.1.1?任務(wù)3：Web編輯器
Web編輯器是一種類(lèi)似于Word但是出現(xiàn)在網(wǎng)頁(yè)上的編輯器，通常用在各個(gè)論壇、留言板、新聞管理系統(tǒng)中，可以給用戶提供強(qiáng)大的文字編輯功能。下面是基于jQuery的Web編輯器的實(shí)現(xiàn)代碼。
示例10.2
10.2.3任務(wù)3：Web編輯器 Web編輯器是一種類(lèi)似于Word但是出現(xiàn)在網(wǎng)頁(yè)上的編輯器，通常用在各個(gè)論壇、留言板、新聞管理系統(tǒng)中，可以給用戶提供強(qiáng)大的文字編輯功能。下面是基于jQuery的Web編輯器的實(shí)現(xiàn)代碼。 示例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> 實(shí)現(xiàn)這個(gè)Web編輯器需要導(dǎo)入很多css文件和js文件，這些文件把textarea封裝成了一個(gè)功能強(qiáng)大的編輯器，具體由斜體部分的代碼實(shí)現(xiàn)，運(yùn)行效果如圖10.1.2所示。
10.1.1?任務(wù)4：樹(shù)形菜單
樹(shù)形菜單是Web前端開(kāi)發(fā)中經(jīng)常需要實(shí)現(xiàn)的程序。下面的代碼通過(guò)一個(gè)jQuery插件很簡(jiǎn)單得就實(shí)現(xiàn)了樹(shù)形菜單。
示例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="#">系統(tǒng)管理</a></li><ul show="true"><li><a href="#">用戶管理</a></li><li><a href="#">日志查看</a></li></ul><li><a href="#">倉(cāng)庫(kù)管理</a></li><ul><li><a href="#">庫(kù)存管理</a></li><li><a href="#">收貨管理</a></li><li><a href="#">發(fā)貨管理</a></li><ul><li><a href="#">用戶管理</a></li><li><a href="#">日志查看</a></li></ul></ul></ul></div></body></html>
加粗部分是需要導(dǎo)入的文件，斜體部分的SimpleTree 函數(shù)可以把一個(gè)包含了列表的div 封裝成一個(gè)樹(shù)形菜單，運(yùn)行效果如圖 10.1.3 所示。
總結(jié)
以上是生活随笔為你收集整理的WEB入门之二十 插件的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Oracle 重复数据查询以及删除
- 下一篇： 技术晋升的评定与博弈