jQuery網頁特效設計基礎教程課件 第9單元 常用的第三方jQuery插件_第1頁
jQuery網頁特效設計基礎教程課件 第9單元 常用的第三方jQuery插件_第2頁
jQuery網頁特效設計基礎教程課件 第9單元 常用的第三方jQuery插件_第3頁
jQuery網頁特效設計基礎教程課件 第9單元 常用的第三方jQuery插件_第4頁
jQuery網頁特效設計基礎教程課件 第9單元 常用的第三方jQuery插件_第5頁
已閱讀5頁，還剩35頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

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

showPreload默認值：true。是否顯示加載提示Lo

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論