jQuery網(wǎng)頁特效設(shè)計(jì)基礎(chǔ)教程課件 第9單元 常用的第三方j(luò)Query插件

第9單元常用的第三方j(luò)Query插件了解什么是第三方j(luò)Query插件。了解常用的第三方j(luò)Query插件。了解如何調(diào)用第三方j(luò)Query插件。掌握常用第三方j(luò)Query插件的使用。教學(xué)目標(biāo)pedagogicalobjectives能夠使用第三方j(luò)Query插件。能夠了解第三方j(luò)Query插件如何被調(diào)用。掌握多樣化技術(shù)工具的選擇與應(yīng)用，培養(yǎng)工具整合和問題解決能力，提升開發(fā)效率，為實(shí)際項(xiàng)目實(shí)踐奠定基礎(chǔ)。目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.1.1什么是第三方j(luò)Query插件提高Web網(wǎng)站的開發(fā)效率。高度集成、方便使用。根據(jù)自身需求進(jìn)行修改，增強(qiáng)可擴(kuò)展性。第三方j(luò)Query插件是一種用來提高Web網(wǎng)站開發(fā)效率、已經(jīng)封裝好的JavaScript腳本庫，由于jQuery的開源特性，現(xiàn)在有很多第三方j(luò)Query插件可供開發(fā)人員直接使用。第三方j(luò)Query插件的主要特點(diǎn)如下。界面美觀。9.1.2常用的第三方j(luò)Query插件插件說明uploadify帶進(jìn)度條的文件上傳插件zTree樹菜單插件NivoSlider網(wǎng)頁中的圖片切換插件Pagination對(duì)網(wǎng)頁中的數(shù)據(jù)進(jìn)行分頁顯示插件BootstrapStarRating星星評(píng)分插件EasyZoom圖片縮放插件lazyload圖片延遲加載插件NotesForLightBox圖片燈箱插件jCarousel圖片幻燈片顯示插件Password-Strength密碼強(qiáng)度檢測(cè)插件ColorPicker顏色拾取器插件jQZoom圖片放大鏡插件9.1.3如何調(diào)用第三方j(luò)Query插件01第三方j(luò)Query插件是基于jQuery開發(fā)的，因此在調(diào)用時(shí)，首先需要添加相應(yīng)版本的jQuery庫。例如，添加版本3.6.4的jQuery庫，首先將版本3.6.4的jQuery庫jquery-3.6.4.min.js復(fù)制到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：02最后添加要使用的第三方j(luò)Query插件的JavaScript腳本文件及CSS樣式文件。例如，添加uploadify插件的JavaScript腳本文件及CSS樣式文件，首先將uploadify插件的JavaScript腳本文件及CSS樣式文件復(fù)制到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：<scripttype="text/javascript"src="jquery-3.6.4.min.js"></script> <linkhref="css/default.css"rel="stylesheet"type="text/css"/> <linkhref="css/uploadify.css"rel="stylesheet"type="text/css"/> <scripttype="text/javascript"src="scripts/swfobject.js"></script> <scripttype="text/javascript"src="scripts/jquery.uploadify.v2.0.2.min.js"></script>完成以上步驟后，即可通過定義JavaScript函數(shù)使用第三方j(luò)Query插件。例如，在網(wǎng)頁中初始化uploadify插件，并設(shè)置其屬性，代碼如下：9.1.3如何調(diào)用第三方j(luò)Query插件03<scripttype="text/javascript"> $(document).ready(function(){ $("#uploadify").uploadify({ 'uploader':'scripts/uploadify.swf',//上傳所需的Flash文件 'script':'scripts/upload.ashx',//后臺(tái)處理文件 'folder':'/uploads',//上傳文件夾 'queueSizeLimit':4,//限制每次選擇上傳文件的個(gè)數(shù) 'sizeLimit':6291456,//上傳文件大小限制的最大值 'fileDesc':'圖片文件',//文件類型的描述信息 'fileExt':'*.jpg;*.png;*.bmp;*.gif',//設(shè)置文件類型 });});目錄導(dǎo)航9.1第三方j(luò)Query插件概述9.3項(xiàng)目實(shí)戰(zhàn)：使用ColorPicker插件制作顏色選擇器9.2常用第三方j(luò)Query插件的使用9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說明auto是否自動(dòng)上傳buttonClass上傳按鈕樣式buttonText上傳按鈕文本checkScript檢查目標(biāo)文件夾中是否存在與上傳文件同名的文件dnd是否允許拖放dropTarget投放目標(biāo)選擇器fileObjName定義服務(wù)器接收參數(shù)名稱fileSizeLimit上傳文件的大小限制，該屬性值為0則表示無限制fileType允許上傳的文件類型。要允許所有文件類型，設(shè)置該屬性值為false；允許特定文件類型，則設(shè)置該屬性值為['image/jpeg','video/*']formData提交給服務(wù)器端的參數(shù)9.2.1uploadify插件（文件上傳）01OPTION屬性屬性說明width上傳按鈕寬度height上傳按鈕高度itemTemplate隊(duì)列中項(xiàng)目的HTML標(biāo)記method上傳文件的提交方法，取值post或getmulti是否允許多文件上傳overrideEvents指定多個(gè)插件默認(rèn)事件中的事件，被指定的事件將不會(huì)執(zhí)行queueID指定用于顯示上傳隊(duì)列的父級(jí)元素id屬性值queueSizeLimit限制每次選擇上件文件的個(gè)數(shù)removeCompleted文件上傳完畢后，是否從上傳隊(duì)列中移除simUploadLimit一次可上傳的文件數(shù)量truncateLength指定文件名稱的截取長度，設(shè)置該屬性值后，文件名稱超過指定長度將會(huì)被截取uploadLimit指定允許上傳的最大文件數(shù)量uploadScript上傳處理腳本9.2.1uploadify插件（文件上傳）01OPTION屬性可以根據(jù)表9-2中列出的屬性對(duì)常用uploadify對(duì)插件進(jìn)行相應(yīng)的設(shè)置，代碼如下：9.2.1uploadify插件（文件上傳）02OPTION方法方法說明clearQueue()清除文件隊(duì)列cancel()取消文件上傳upload()上傳文件destroy()銷毀上傳實(shí)例debug()輸出debug日志9.2.1uploadify插件（文件上傳）03OPTION事件事件說明onInit在uploadify插件初始化結(jié)束時(shí)觸發(fā)該事件onFallback驗(yàn)證客戶端瀏覽器是否兼容onCheck驗(yàn)證客戶端文件是否存在onError驗(yàn)證客戶端設(shè)定的約束onSelect在每添加一個(gè)文件至上傳隊(duì)列時(shí)觸發(fā)該事件onDrop在文件被添加到該隊(duì)列文件時(shí)觸發(fā)該事件onProgress在上傳進(jìn)度更新時(shí)觸發(fā)該事件onAddQueueItem在文件被添加到上傳隊(duì)列時(shí)觸發(fā)該事件onUpload在執(zhí)行上傳操作時(shí)觸發(fā)該事件onUploadFile在上傳每一個(gè)文件時(shí)觸發(fā)該事件onUploadComplete在文件上傳完成后觸發(fā)該事件onQueueComplete在隊(duì)列中的所有文件上傳完成時(shí)觸發(fā)該事件onCancel在上傳被取消時(shí)觸發(fā)該事件onClearQueue在清空隊(duì)列時(shí)觸發(fā)該事件onDestroy在uploadify插件被銷毀時(shí)觸發(fā)該事件9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實(shí)現(xiàn)批量上傳文件的功能。（1）在文件夾9下創(chuàng)建新項(xiàng)目，命名為9-1，默認(rèn)主頁為index.php。（2）在index.php的HTML代碼中引入jQuery框架和uploadify插件所需的JavaScript腳本文件及CSS樣式文件，代碼如下：<scripttype="text/javascript"src="js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="js/jquery.uploadify-3.1.min.js"></script><linkrel="stylesheet"type="text/css"href="uploadify.css"/>（3）在index.php頁面中添加一個(gè)file控件，id屬性值設(shè)置為file_upload，用于選擇文件，再添加一個(gè)上傳按鈕，代碼如下：<h1>UploadifyHTML5上傳</h1><form><divid="queue"></div><inputid="file_upload"name="file_upload"type="file"multiple="true"><astyle="position:relative;top:8px;"href="javascript:$('#file_upload').uploadifive('upload')">上傳</a></form>9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實(shí)現(xiàn)批量上傳文件的功能。（4）在<head></head>中編寫代碼，實(shí)現(xiàn)在頁面加載后初始化uploadify插件，并設(shè)置插件的相關(guān)屬性，其中包括上傳文件類型、上傳文件大小、是否可以選擇多個(gè)文件上傳以及是否自動(dòng)上傳等，通過設(shè)置這些屬性可以非常靈活地控制文件上傳。代碼如下：9.2.1uploadify插件（文件上傳）【例9-1】使用uploadify插件實(shí)現(xiàn)批量上傳文件的功能。（5）處理文件上傳的uploadify插件的PHP文件代碼如下：運(yùn)行結(jié)果9.2.2zTree插件（樹菜單）01OPTION屬性屬性說明setting.treeIdzTree插件的唯一標(biāo)識(shí)。初始化zTree插件后，該屬性值等于用戶定義的zTree容器的id屬性值async.autoParam異步加載時(shí)需要自動(dòng)提交父節(jié)點(diǎn)屬性的參數(shù)async.dataFilter用于對(duì)AJAX返回?cái)?shù)據(jù)進(jìn)行預(yù)處理的函數(shù)async.dataTypeAJAX獲取的數(shù)據(jù)類型async.enable設(shè)置zTree插件是否開啟異步加載模式async.typeAJAX的HTTP請(qǐng)求模式async.urlAJAX獲取數(shù)據(jù)的URLcheck.enable設(shè)置zTree插件的節(jié)點(diǎn)上是否顯示復(fù)選框/單選按鈕9.2.2zTree插件（樹菜單）01OPTION屬性屬性說明data.key.titlezTree插件的節(jié)點(diǎn)數(shù)據(jù)保存節(jié)點(diǎn)提示信息的屬性名稱data.key.urlzTree插件的節(jié)點(diǎn)數(shù)據(jù)保存節(jié)點(diǎn)鏈接的目標(biāo)URL的屬性名稱data.simpleData.enable確定zTree插件初始化時(shí)的節(jié)點(diǎn)數(shù)據(jù)、異步加載時(shí)的節(jié)點(diǎn)數(shù)據(jù)或addNodes()方法中輸入的newNodes數(shù)據(jù)是否采用簡單數(shù)據(jù)模式（Array）data.simpleData.idKey節(jié)點(diǎn)數(shù)據(jù)中保存唯一標(biāo)識(shí)的屬性名稱data.simpleData.pIdKey節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識(shí)的屬性名稱view.expandSpeedzTree插件的節(jié)點(diǎn)展開、折疊時(shí)的動(dòng)畫速度，設(shè)置方法同jQuery動(dòng)畫效果中speed參數(shù)的設(shè)置方法view.selectedMulti設(shè)置是否允許同時(shí)選中多個(gè)節(jié)點(diǎn)view.showIcon設(shè)置zTree插件是否顯示節(jié)點(diǎn)的圖標(biāo)9.2.2zTree插件（樹菜單）02OPTION方法方法說明$.fn.zTree.init()zTree插件初始化方法$.fn.zTree.destroy()從zTreev3.4開始提供銷毀zTree插件的方法$.fn.zTree.getZTreeObj()zTreev3.x專門提供的獲取zTree對(duì)象的方法callback.beforeAsync()用于捕獲異步加載之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許進(jìn)行異步加載callback.beforeExpand()用于捕獲父節(jié)點(diǎn)展開之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否允許展開操作callback.beforeDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之前的事件回調(diào)函數(shù)，zTree插件根據(jù)返回值確定是否觸發(fā)onDblClick事件回調(diào)函數(shù)callback.onAsyncError用于捕獲異步加載出現(xiàn)異常錯(cuò)誤時(shí)的事件回調(diào)函數(shù)callback.onAsyncSuccess()用于捕獲異步加載正常結(jié)束時(shí)的事件回調(diào)函數(shù)callback.onClick()用于捕獲節(jié)點(diǎn)被單擊時(shí)的事件回調(diào)函數(shù)callback.onDblClick()用于捕獲zTree插件上鼠標(biāo)雙擊之后的事件回調(diào)函數(shù)zTreeObj.getNodes()獲取zTree插件的全部節(jié)點(diǎn)數(shù)據(jù)zTreeObj.refresh()刷新zTree插件treeNode.getNextNode()獲取與treeNode相鄰的后一個(gè)節(jié)點(diǎn)treeNode.getPreNode()獲取與treeNode相鄰的前一個(gè)節(jié)點(diǎn)9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（1）將zTree插件中的css文件夾復(fù)制到實(shí)例文件夾9-2中。創(chuàng)建一個(gè)名為js的文件夾，將jquery-3.6.4.min.js文件以及jquery.ztree.core-3.5.js文件復(fù)制到j(luò)s文件夾中。（2）創(chuàng)建一個(gè)名為index.html的文件，在該文件的<head>標(biāo)記中引入jQuery文件、zTree插件的核心腳本文件以及zTree插件的CSS樣式文件。代碼如下：<linkrel="stylesheet"href="css/demo.css"type="text/css"><linkrel="stylesheet"href="css/zTreeStyle/zTreeStyle.css"type="text/css"><scripttype="text/javascript"src="js/jquery-3.6.4.min.js"></script><scripttype="text/javascript"src="js/jquery.ztree.core-3.5.js"></script>（3）在頁面的<body>標(biāo)記中創(chuàng)建兩個(gè)<ul>元素，一個(gè)用來顯示樹菜單，另一個(gè)用來顯示操作日志。代碼如下：<divclass="content_wrap"> <divclass="zTreeDemoBackgroundleft"> <ulid="treeDemo"class="ztree"></ul> </div><ulid="log"></ul></div>9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（4）編寫jQuery代碼，開啟異步加載模式，顯示節(jié)點(diǎn)上的復(fù)選框，使用簡單數(shù)據(jù)模式并設(shè)置父節(jié)點(diǎn)展開之前、異步加載正常結(jié)束時(shí)、異步加載出現(xiàn)異常錯(cuò)誤時(shí)的事件回調(diào)函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（5）設(shè)置父節(jié)點(diǎn)對(duì)象。代碼如下：（6）編寫函數(shù)getUrl()用來獲取接收頁面請(qǐng)求的URL。代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（7）編寫父節(jié)點(diǎn)展開之前、異步加載正常結(jié)束時(shí)、異步加載出現(xiàn)異常結(jié)果時(shí)的事件回調(diào)函數(shù)以及顯示日志函數(shù)。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。（8）初始化zTree插件。代碼如下：（9）編寫getBigData.php文件，用來返回存放子節(jié)點(diǎn)的JSON對(duì)象。具體代碼如下：9.2.2zTree插件（樹菜單）【例9-2】本實(shí)例使用zTree插件異步加載大數(shù)據(jù)。>>運(yùn)行結(jié)果9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說明effect過渡效果sliceseffect屬性為切片效果時(shí)的數(shù)量boxColseffect屬性為格子效果時(shí)的列boxRowseffect屬性為格子效果時(shí)的行animSpeed動(dòng)畫速度pauseTime圖片切換速度startSlide從第幾張開始directionNav是否顯示圖片切換按鈕（上/下頁）directionNavHide是否鼠標(biāo)指針經(jīng)過才顯示按鈕controlNav顯示序列導(dǎo)航controlNavThumbs顯示圖片導(dǎo)航9.2.3NivoSlider插件（圖片切換）01OPTION屬性屬性說明controlNavThumbsFromRel使用<img>元素的rel屬性作為縮略圖地址controlNavThumbsSearch查找指定字符串（controlNavThumbs屬性值必須為true）controlNavThumbsReplace替換成指定字符（controlNavThumbs屬性值必須為true）keyboardNav鍵盤控制（左/右箭頭）pauseOnHover鼠標(biāo)指針經(jīng)過時(shí)暫停播放幻燈片manualAdvance是否手動(dòng)播放幻燈片（設(shè)置屬性值為false，則自動(dòng)播放幻燈片）captionOpacity字幕透明度prevText上一張圖片nextText下一張圖片randomStart是否從隨機(jī)圖片開始9.2.3NivoSlider插件（圖片切換）02OPTION方法方法說明beforeChange()動(dòng)畫開始前觸發(fā)afterChange()動(dòng)畫結(jié)束后觸發(fā)slideshowEnd()本輪循環(huán)結(jié)束時(shí)觸發(fā)lastSlide()最后一張圖片播放結(jié)束時(shí)觸發(fā)afterLoad()圖片加載完畢時(shí)觸發(fā)9.2.3NivoSlider插件（圖片切換）【例9-3】本實(shí)例使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁的廣告圖片切換效果。（1）新建一個(gè)index.html文件，將其放到9-3文件夾中。（2）將NivoSlider插件的themes文件夾、jquery.nivo.slider.js腳本文件、nivo-slider.css樣式文件以及jQuery的腳本文件復(fù)制到9-3文件夾中；此外新建一個(gè)名為images的文件夾，將要進(jìn)行切換的圖片文件復(fù)制到該文件夾中。（3）使用VSCode打開index.html文件，在該文件中使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁的廣告圖片切換效果，進(jìn)行圖片切換時(shí)，可以通過單擊網(wǎng)頁下方的縮略圖導(dǎo)航進(jìn)行切換。代碼如下：9.2.3NivoSlider插件（圖片切換）【例9-3】本實(shí)例使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁的廣告圖片切換效果。使用Chrome瀏覽器運(yùn)行index.html文件，效果如圖所示。程序可以自動(dòng)實(shí)現(xiàn)圖片切換，此外用戶可以將鼠標(biāo)指針移動(dòng)到圖片上，單擊圖片上的左/右箭頭實(shí)現(xiàn)圖片切換，也可以單擊網(wǎng)頁下方的縮略圖導(dǎo)航實(shí)現(xiàn)圖片切換。9.2.4Pagination插件（數(shù)據(jù)分頁）Pagination插件的常用屬性及說明如表所示。屬性說明maxentries總條目數(shù)items_per_page每頁顯示的條目數(shù)num_display_entries在連續(xù)分頁主體部分顯示分頁條目數(shù)current_page當(dāng)前選中的頁面num_edge_entries顯示的首尾分頁的條目數(shù)link_to分頁的鏈接prev_text“上一頁”分頁按鈕上顯示的文字next_text“下一頁”分頁按鈕上顯示的文字ellipse_text省略的頁數(shù)用什么文字表示prev_show_always是否顯示“上一頁”分頁按鈕next_show_always是否顯示“下一頁”分頁按鈕callback回調(diào)函數(shù)，一般用來裝載對(duì)應(yīng)分頁顯示的內(nèi)容9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。（1）新建一個(gè)index.html文件，將其放到9-4文件夾中。（2）將Pagination插件所用的jquery.min.js腳本文件、jquery.pagination.js腳本和pagination.css樣式文件復(fù)制到9-4文件夾中。（3）新建一個(gè)load.html文件，存放在9-4文件夾中，該文件主要用來定義要異步獲取的數(shù)據(jù)。代碼如下：9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。（4）使用VSCode打開index.html文件，在該文件中使用AJAX技術(shù)從load.html文件中異步獲取要分頁顯示的數(shù)據(jù)，然后通過設(shè)置Pagination插件的屬性對(duì)異步獲取的數(shù)據(jù)進(jìn)行分頁顯示。代碼如下：>>運(yùn)行結(jié)果9.2.4Pagination插件（數(shù)據(jù)分頁）【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。9.2.5jQZoom插件（圖片放大鏡）jQZoom插件的常用屬性及說明如表所示。屬性說明zoomType默認(rèn)值：standard。另一個(gè)值為reverse，選擇是否將原圖用半透明圖層遮蓋zoomWidth默認(rèn)值：200。放大窗口的寬度zoomHeight默認(rèn)值：200。放大窗口的高度xOffset默認(rèn)值：10。放大窗口相對(duì)于原圖的x軸偏移值，可以為負(fù)yOffset默認(rèn)值：0。放大窗口相對(duì)于原圖的y軸偏移值，可以為負(fù)position默認(rèn)值：right。放大窗口的位置，值還可以為right、left、top、bottomlens默認(rèn)值：true。若值為false，則不在原圖上顯示鏡頭imageOpacity默認(rèn)值：0.2。當(dāng)zoomType屬性值為reverse時(shí)，這個(gè)屬性用于指定遮罩的透明度title默認(rèn)值：true。在放大窗口中顯示標(biāo)題，值可以為<a>標(biāo)記的title屬性值；若無<a>標(biāo)記，則為原圖的title屬性值showEffect默認(rèn)值：“show”。顯示放大窗口時(shí)的效果，值可以為show、fadeinhideEffect默認(rèn)值：“hide”。隱藏放大窗口時(shí)的效果，值可以為hide、fadeoutfadeinSpeed默認(rèn)值：“fast”。放大窗口的漸顯速度（值可以為fast、slow、medium）fadeoutSpeed默認(rèn)值：“slow”。放大窗口的漸隱速度（值可以為fast、slow、medium）

showPreload默認(rèn)值：true。是否顯示加載提示Lo