jQuery開發(fā)基礎(chǔ)第9章常用的第三方j(luò)Query插件

jQuery開發(fā)根底第9章常用的第三方j(luò)Query插件主要內(nèi)容1.jQuery插件概述2.常用的jQuery插件的使用3.綜合實(shí)例：使用ColorPicker插件制作顏色第9章常用的第三方j(luò)Query插件9.1

jQuery插件概述什么是jQuery插件常用的第三方j(luò)Query插件如何調(diào)用第三方j(luò)Query插件

什么是jQuery插件

jQuery插件是一種用來提高網(wǎng)站開發(fā)效率的、已經(jīng)封裝好的JavaScript腳本庫，由于jQuery的開源特性，現(xiàn)在有很多第三方的jQuery插件可供開發(fā)人員直接使用。jQuery插件的主要特點(diǎn)如下：提供Web網(wǎng)站的開發(fā)效率；高度集成，使用方便；根據(jù)自身需求進(jìn)行修改，增強(qiáng)擴(kuò)展性；界面美觀。常用的第三方j(luò)Query插件

表9-1常用的第三方j(luò)Query插件說明：上面列出是筆者常用的一些jQuery插件，當(dāng)然，還有很多的其他提供網(wǎng)站開發(fā)效率的jQuery插件，讀者可以到各大技術(shù)論壇上搜索。

插件說明uploadify帶進(jìn)度條的文件上傳zTree樹菜單插件NivoSlider網(wǎng)頁中的圖片切換Pagination對網(wǎng)頁中的數(shù)據(jù)進(jìn)行分頁顯示BootstrapStarRating星星評分插件EasyZoom圖片縮放插件lazyload圖片延遲加載插件NotesForLightBox圖片燈箱插件jCarousel圖片幻燈片顯示PasswordStrength密碼強(qiáng)度檢測插件ColorPicker顏色拾取器插件jQZoom圖片放大鏡如何調(diào)用第三方j(luò)Query插件

調(diào)用第三方j(luò)Query插件的步驟如下：〔1〕第三方j(luò)Query插件是基于jQuery開發(fā)的，因此，在使用時(shí)，首先需要添加相應(yīng)版本的jQuery庫。例如，添加版本的jQuery庫，先將版本的jQuery庫拷貝到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：

〔2〕然后需要添加要使用的第三方j(luò)Query插件的js庫及css樣式文件。例如，添加uploadify插件的js腳本文件及css樣式文件，先將uploadify插件的js腳本文件及css樣式文件拷貝到網(wǎng)頁文件夾中，然后在HTML網(wǎng)頁中編寫如下代碼：<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>〔3〕完成以上步驟之后，即可通過定義JavaScrip函數(shù)使用第三方j(luò)Query插件。例如，在網(wǎng)頁中初始化uploadify插件，并設(shè)置其屬性，代碼如下：<scripttype="text/javascript">$(document).ready(function(){$("#uploadify").uploadify({'uploader':'scripts/uploadify.swf', //上傳所需的Flash文件'script':'scripts/upload.ashx', //后臺處理文件'folder':'/uploads', //上傳文件夾'queueSizeLimit':4, //限制每次選擇文件的個(gè)數(shù)'sizeLimit':6291456, //上傳文件限制的最大值'fileDesc':'圖片文件', //文件類型的描述信息'fileExt':'*.jpg;*.png;*.bmp;*.gif',//設(shè)置文件類型});9.2常用的jQuery插件的使用

uploadify插件〔文件上傳〕插件〔樹菜單〕插件〔圖片切換〕插件〔數(shù)據(jù)分頁〕插件〔圖片放大鏡〕插件〔文件上傳〕uploadify插件是一款來自國外的優(yōu)秀jQuery插件，它是基js里面的jquery庫編寫的，結(jié)合了ajax和flash，實(shí)現(xiàn)了多線程上傳的功能，其下載地址為：uploadify插件提供的功能主要包括：能夠一次性選擇多個(gè)文件上傳、查看上傳進(jìn)度、控制文件上傳類型和大小、為每一步操作添加回調(diào)函數(shù)等；另外，uploadify插件還自帶一個(gè)PHP文件，用于效勞器端處理上傳文件。下面簡單介紹uploadify插件的屬性、方法和事件。1．屬性uploadify插件的常用屬性及說明如表9-2所示。屬性說明uploader指定上傳文件所需的Flash文件script后臺處理文件cancelImg取消按鈕的圖片buttonImg選擇文件按鈕的圖片folder服務(wù)器中存放上傳文件的文件夾queueID顯示上傳文件進(jìn)度的DIV標(biāo)簽的IDqueueSizeLimit限制每次選擇文件的個(gè)數(shù)auto是否自動上傳multi是否多選sizeLimit上傳文件限制的最大值simUploadLimit同時(shí)上傳的文件個(gè)數(shù)fileDesc文件類型的描述信息fileExt設(shè)置文件類型width按鈕寬度height按鈕高度wmode設(shè)置按鈕背景透明可以根據(jù)列出的屬性列表對插件進(jìn)行相應(yīng)的設(shè)置，代碼如下：$(document).ready(function(){$("#uploadify").uploadify({'uploader':'scripts/uploadify.swf', //上傳所需的Flash文件'script':'scripts/upload.ashx', //后臺處理文件'cancelImg':'cancel.png', //取消按鈕的圖片'buttonImg':'images/select.gif', //按鈕圖片'folder':'/uploads', //上傳文件夾'queueID':'fileQueue','queueSizeLimit':4, //限制每次選擇文件的個(gè)數(shù)'auto':false, //是否自動上傳'multi':true, //是否多項(xiàng)選擇'sizeLimit':6291456, //上傳文件限制的最大值'simUploadLimit':1, //同時(shí)上傳的文件個(gè)數(shù)'fileDesc':'圖片文件', //文件類型的描述信息'fileExt':'*.jpg;*.png;*.bmp;*.gif', //設(shè)置文件類型'onQueueFull':function(event,queueSizeLimit){alert("只允許上傳"+queueSizeLimit+"個(gè)文件'width':77, //按鈕寬度'height':23, //按鈕高度'wmode':'transparent' //設(shè)置按鈕背景透明});});2．方法uploadify插件的常用方法及說明如表9-3所示。方法說明uploadifySettings設(shè)置插件某個(gè)屬性uploadifyUpload上傳選擇的文件uploadifyClearQueue清空所有上傳隊(duì)列uploadifySettings方法該方法主要用于設(shè)置插件的屬性，例如，在本實(shí)例中通過uploadifySettings方法設(shè)置文件上傳的文件夾，代碼如下：jQuery('#uploadify').uploadifySettings('folder','/uploads/'+document.getElementById("ddlDir").options[document.getElementById("ddlDir").selectedIndex].value);uploadifyUpload方法該方法用于將選擇的文件上傳給效勞器文件處理程序，代碼如下：jQuery('#uploadify').uploadifyUpload();uploadifyClearQueue方法該方法用于清空所有上傳隊(duì)列，執(zhí)行此方法后可以取消文件上傳，代碼如下：jQuery('#uploadify').uploadifyClearQueue();3．事件uploadify插件的常用事件及說明如表9-4所示。事件說明事件說明onSelect當(dāng)選擇所有文件之后觸發(fā)onQueueFull隊(duì)列達(dá)到最大容量時(shí)觸發(fā)onSelectOnce當(dāng)選擇單個(gè)文件后觸發(fā)onError上傳過程中出現(xiàn)錯(cuò)誤時(shí)觸發(fā)onCancel文件上傳被取消或從隊(duì)列中刪除時(shí)觸發(fā)onComplete單個(gè)文件上傳完畢后觸發(fā)onClearQueue清空上傳隊(duì)列時(shí)觸發(fā)onAllComplete所有文件上傳完畢后觸發(fā)【例9-1】使用uploadify插件實(shí)現(xiàn)文件批量上傳的功能，程序開發(fā)步驟如下：說明：由于使用uploadify插件上傳文件時(shí)，需要一個(gè)效勞器端文件來接收上傳的文件，因此，需要使用網(wǎng)頁編程語言編寫一個(gè)效勞器端文件，本實(shí)例中使用PHP作為編寫效勞器文件的網(wǎng)頁語言。

〔1〕在文件夾9下創(chuàng)立新工程，命名為9-1，默認(rèn)主頁為index.php。〔2〕創(chuàng)立js文件夾將要用到的uploadify插件的相應(yīng)JS腳本文件拷貝到j(luò)s文件夾中，并且將CSS樣式文件、swf文件和圖片文件拷貝到9-1文件夾下?！?〕index.html的HTML代碼中首先要引入jQuery框架和uploadify插件所需的js文件及css樣式，代碼如下：<linkrel="stylesheet"type="text/css"href="uploadify.css"/>〔4〕在index.php頁面中添加一個(gè)file控件，id設(shè)為file_upload，用于選擇文件，代碼如下：<inputtype="file"name="file_upload"id="file_upload"/>〔5〕在file控件下面還需要添加一個(gè)上傳按鈕，一個(gè)重置按鈕，用于上傳文件以及重置文件，代碼如下：<inputtype="button"id="upload"name="upload"value="上傳"/><inputtype="button"name="reset"id="reset"value="重置"/>〔6〕在<head></head>中編寫代碼，實(shí)現(xiàn)當(dāng)頁面加載后初始化uploadify插件，并設(shè)置插件的相關(guān)屬性，其中包括上傳類型、上傳大小、是否可以選擇多個(gè)文件以及是否自動上傳等，通過設(shè)置這些屬性就可以非常靈活地控件文件的上傳，代碼如下：$('#file_upload').uploadify({ 'auto':false,//關(guān)閉自動上傳 'removeTimeout':1,//文件隊(duì)列上傳完成1秒后刪除'swf':'uploadify.swf',//指明swf文件路徑'script':'uploadify.php',//指明后臺處理文件路徑'method':'post',//方法，效勞端可以用$_POST數(shù)組獲取數(shù)據(jù) 'buttonText':'選擇圖片',//設(shè)置按鈕文本'multi':true,//允許同時(shí)上傳多張圖片'uploadLimit':10,//一次最多只允許上傳10張圖片'fileTypeDesc':'ImageFiles',//只允許上傳圖像'fileTypeExts':'*.gif;*.jpg;*.png',//限制允許上傳的圖片后綴'fileSizeLimit':'20000KB',//限制上傳的圖片不得超過200KB'onUploadSuccess':function(file,data,response){//每次成功上傳后執(zhí)行的回調(diào)函數(shù)，從效勞端返回?cái)?shù)據(jù)到前端img_id_upload[i]=data;i++; alert(data);}});〔7〕設(shè)置上傳按鈕以及重置按鈕的click事件，使其上傳或重置全部文件，代碼如下：$("#upload").click(function(){ $('#file_upload').uploadify('upload','*');//上傳全部文件 }); $("#reset").click(function(){ $('#file_upload').uploadify('cancel','*');//取消全部文件上傳 });〔8〕處理文件上傳的uploadify的PHP文件代碼如下：<?php//設(shè)置上傳目錄$path="uploads/"; if(!empty($_FILES)){

//得到上傳的臨時(shí)文件流 $tempFile=$_FILES['Filedata']['tmp_name'];

//允許的文件后綴 $fileTypes=array('jpg','gif','png');

//得到文件原名 $fileName=iconv("UTF-8","GB2312",$_FILES["Filedata"]["name"]); $fileParts=pathinfo($_FILES['Filedata']['name']);

//最后保存效勞器地址 if(!is_dir($path)) mkdir($path); if(move_uploaded_file($tempFile,$path.$fileName)){ echo$fileName."上傳成功！"; }else{ echo$fileName."上傳失?。?; }}?>實(shí)例運(yùn)行效果如圖9-1所示。

圖9-1uploadify插件的使用插件〔樹菜單〕zTree插件是一款基于jQuery實(shí)現(xiàn)的多功能“樹插件〞，下載地址為：。優(yōu)異的性能、靈活的配置、多種功能的組合是zTree最大優(yōu)點(diǎn)說明：zTree插件專門適合工程開發(fā)，尤其是樹狀菜單、樹狀數(shù)據(jù)的Web顯示、權(quán)限管理等等。zTree插件的主要特點(diǎn)如下：zTree將核心代碼按照功能進(jìn)行了分割，不需要的代碼可以不用加載；采用了延遲加載技術(shù)，上萬節(jié)點(diǎn)輕松加載，即使在IE6下也能根本做到秒殺；兼容IE、FireFox、Chrome、Opera、Safari等瀏覽器；支持JSON數(shù)據(jù)；支持靜態(tài)和Ajax異步加載節(jié)點(diǎn)數(shù)據(jù)；支持任意更換皮膚/自定義圖標(biāo)；支持極其靈活的checkbox或radio選擇功能；提供多種事件響應(yīng)回調(diào)。1．屬性

zTree插件的常用屬性及說明如表9-5所示。

屬性說明setting.treeIdzTree的唯一標(biāo)識，初始化后，等于用戶定義的zTree容器的id屬性值async.autoParam異步加載時(shí)需要自動提交父節(jié)點(diǎn)屬性的參數(shù)async.dataFilter用于對Ajax返回?cái)?shù)據(jù)進(jìn)行預(yù)處理的函數(shù)async.dataTypeAjax獲取的數(shù)據(jù)類型async.enable設(shè)置zTree是否開啟異步加載模式async.typeAjax的http請求模式async.urlAjax獲取數(shù)據(jù)的URL地址check.enable設(shè)置zTree的節(jié)點(diǎn)上是否顯示checkbox/radiodata.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)識的屬性名稱data.simpleData.pIdKey節(jié)點(diǎn)數(shù)據(jù)中保存其父節(jié)點(diǎn)唯一標(biāo)識的屬性名稱view.expandSpeedzTree節(jié)點(diǎn)展開、折疊時(shí)的動畫速度，設(shè)置方法同JQuery動畫效果中speed參數(shù)view.selectedMulti設(shè)置是否允許同時(shí)選中多個(gè)節(jié)點(diǎn)view.showIcon設(shè)置zTree是否顯示節(jié)點(diǎn)的圖標(biāo)2．方法zTree插件的常用方法及說明如表9-6所示。方法說明$.fn.zTree.initzTree初始化方法$.fn.zTree.destroy從zTreev3.4開始提供銷毀zTree的方法$.fn.zTree.getZTreeObjzTreev3.x專門提供的根據(jù)treeId獲取zTree對象的方法callback.beforeAsync用于捕獲異步加載之前的事件回調(diào)函數(shù)，zTree根據(jù)返回值確定是否允許進(jìn)行異步加載callback.beforeExpand用于捕獲父節(jié)點(diǎn)展開之前的事件回調(diào)函數(shù)，并且根據(jù)返回值確定是否允許展開操作callback.beforeDblClick用于捕獲zTree上鼠標(biāo)雙擊之前的事件回調(diào)函數(shù)，并且根據(jù)返回值確定觸發(fā)onDblClick事件回調(diào)函數(shù)callback.onAsyncError用于捕獲異步加載出現(xiàn)異常錯(cuò)誤的事件回調(diào)函數(shù)callback.onAsyncSuccess用于捕獲異步加載正常結(jié)束的事件回調(diào)函數(shù)callback.onClick用于捕獲節(jié)點(diǎn)被點(diǎn)擊的事件回調(diào)函數(shù)callback.onDblClick用于捕獲zTree上鼠標(biāo)雙擊之后的事件回調(diào)函數(shù)zTreeObj.getNodes獲取zTree的全部節(jié)點(diǎn)數(shù)據(jù)zTreeObj.refresh刷新zTreetreeNode.getNextNode獲取與treeNode節(jié)點(diǎn)相鄰的后一個(gè)節(jié)點(diǎn)treeNode.getPreNode獲取與treeNode節(jié)點(diǎn)相鄰的前一個(gè)節(jié)點(diǎn)【例9-2】本使用使用zTree插件異步加載大數(shù)據(jù)。程序開發(fā)步驟如下：〔1〕將zTree插件中的css文件夾拷貝到實(shí)例文件夾9-2中。創(chuàng)立js文件夾，將文件以及文件拷貝到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">〔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>〔4〕編寫jQuery代碼，首先，開啟異步加載模式，顯示節(jié)點(diǎn)上的復(fù)選框，使用簡單數(shù)據(jù)模式以及設(shè)置父節(jié)點(diǎn)展開之前、加載成功、加載失敗時(shí)的回調(diào)函數(shù)。具體代碼如下：varsetting={ async:{ enable:true,//開啟異步加載模式 url:getUrl//獲取數(shù)據(jù)的URL地址 }, check:{ enable:true//設(shè)置zTree上節(jié)點(diǎn)顯示checkbox }, data:{ simpleData:{ enable:true//使用簡單數(shù)據(jù)模式 } }, view:{ expandSpeed:""http://zTree展開折疊時(shí)的動畫速度，“〞表示不顯示動畫效果 }, callback:{ beforeExpand:beforeExpand,//捕獲父節(jié)點(diǎn)展開之前的事件回調(diào)函數(shù)

onAsyncSuccess:onAsyncSuccess,//捕獲異步加載正常結(jié)束的事件回調(diào)函數(shù) onAsyncError:onAsyncError//捕獲異步加載出現(xiàn)異常錯(cuò)誤的事件回調(diào)函數(shù) } };〔5〕設(shè)置父節(jié)點(diǎn)對象。代碼如下：varzNodes=[ {name:"10個(gè)節(jié)點(diǎn)",id:"1",count:10,times:1,isParent:true}, {name:"100個(gè)節(jié)點(diǎn)",id:"2",count:100,times:1,isParent:true}, {name:"1000個(gè)節(jié)點(diǎn)",id:"3",count:1000,times:1,isParent:true} ];varlog,className="dark", startTime=0,endTime=0,perCount=100,perTime=100;〔6〕編寫函數(shù)getUrl()用來獲取接收頁面請求的URL地址，代碼如下：functiongetUrl(treeId,treeNode){ vargetCount=(curCount+perCount)>treeNode.count?(treeNode.count-curCount):perCount; varparam="id="+treeNode.id+"_"+(treeNode.times++)+"&count="+getCount; return"getBigData.php?"+param;}〔7〕編寫父節(jié)點(diǎn)展開之前、加載成功、加載失敗時(shí)的回調(diào)函數(shù)以及顯示日志函數(shù)，具體代碼如下：//父節(jié)點(diǎn)展開之前執(zhí)行 functionbeforeExpand(treeId,treeNode){ if(!treeNode.isAjaxing){ startTime=newDate(); treeNode.times=1; ajaxGetNodes(treeNode,"refresh"); returntrue; }else{ alert("zTree正在下載數(shù)據(jù)中，請稍后展開節(jié)點(diǎn)。。。"); returnfalse; } } //異步加載成功時(shí)執(zhí)行 functiononAsyncSuccess(event,treeId,treeNode,msg){ if(!msg||msg.length==0){ return; }獲取zTree對象 totalCount=treeNode.count;//節(jié)點(diǎn)數(shù) 子節(jié)點(diǎn)數(shù)沒到最大值時(shí)

setTimeout(function(){ajaxGetNodes(treeNode);},perTime);//繼續(xù)執(zhí)行ajaxGetNodes }else{//到達(dá)節(jié)點(diǎn)數(shù)最大值 treeNode.icon=""; zTree.updateNode(treeNode);//更新節(jié)點(diǎn)數(shù)據(jù) zTree.selectNode(treeNode.children[0]);//選中第一個(gè)節(jié)點(diǎn) endTime=newDate();//結(jié)束時(shí)間 varusedTime=(endTime.getTime()-startTime.getTime())/1000;//加載完畢消耗的時(shí)間 className=(className==="dark"?"":"dark"); showLog("["+getTime()+"]  treeNode:"+treeN); showLog("加載完畢，共進(jìn)行"+(treeNode.times-1)+"次異步加載,耗時(shí)："+usedTime+"秒"); } } //異步加載失敗時(shí)執(zhí)行 functiononAsyncError(event,treeId,treeNode,XMLHttpRequest,textStatus,errorThrown){根據(jù)id獲取zTree對象 alert("異步獲取數(shù)據(jù)出現(xiàn)異常。");//彈出消息提示

//彈出消息提示

treeNode.icon="";//清空圖標(biāo)

zTree.updateNode(treeNode);//更新節(jié)點(diǎn)數(shù)據(jù)

} functionajaxGetNodes(treeNode,reloadType){根據(jù)id獲取zTree對象

if(reloadType=="refresh"){//如果加載類型為刷新

treeNode.icon="css/zTreeStyle/img/loading.gif";//加載時(shí)對應(yīng)的圖片

zTree.updateNode(treeNode);//更新節(jié)點(diǎn)數(shù)據(jù)

} zTree.reAsyncChildNodes(treeNode,reloadType,true);//強(qiáng)行異步加載父節(jié)點(diǎn)的子節(jié)點(diǎn)

} //顯示日志

functionshowLog(str){ if(!log)log=$("#log");//獲取log對象

log.append("<liclass='"+className+"'>"+str+"</li>");//添加log內(nèi)容

if(log.children("li").length>4){//如果子節(jié)點(diǎn)大于4 log.get(0).removeChild(log.children("li")[0]);//移除第一個(gè)節(jié)點(diǎn)

} } //獲取時(shí)間的時(shí)分秒毫秒 functiongetTime(){ varnow=newDate(),//當(dāng)前時(shí)間 h=now.getHours(),//當(dāng)前時(shí)間的小時(shí)數(shù) m=now.getMinutes(),//當(dāng)前時(shí)間的分鐘數(shù) s=now.getSeconds(),//當(dāng)前時(shí)間的秒數(shù) ms=now.getMilliseconds();//當(dāng)前時(shí)間的毫秒數(shù) return(h+":"+m+":"+s+""+ms);//返回時(shí)分秒毫秒值 }〔8〕初始化zTree，代碼如下：$(document).ready(function(){});〔9〕編寫getBigData.php文件，用來返回存放子節(jié)點(diǎn)的JSON對象，具體代碼如下：[<?php$pId="-1";if(array_key_exists('id',$_REQUEST)){//如果提交的數(shù)據(jù)中存在參數(shù)id $pId=$_REQUEST['id'];}$pCount="10";if(array_key_exists('count',$_REQUEST)){//如果提交的數(shù)據(jù)中存在參數(shù)count $pCount=$_REQUEST['count'];}if($pId==null||$pId=="")$pId="0";if($pCount==null||$pCount=="")$pCount="10";//如果count不存在，那么默認(rèn)為10$max=(int)$pCount;//設(shè)置最大值為$pCountfor($i=1;$i<=$max;$i++){//進(jìn)行max次循環(huán) $nId=$pId."_".$i;//設(shè)置節(jié)點(diǎn)的name值 $nName="tree".$nId; echo"{id:'".$nId."', name:'".$nName."'}";//一個(gè)節(jié)點(diǎn)的JSON數(shù)據(jù) if($i<$max){//如果i的值小于max，那么輸出逗號 echo",";//目的是組合成多組JSON數(shù)據(jù) }}?>]運(yùn)行本實(shí)例，可以看到，頁面左側(cè)顯示樹狀結(jié)構(gòu)，右邊顯示日志操作，效果如圖9-2所示。

圖9-2zTree插件異步加載大數(shù)據(jù)插件〔圖片切換〕NivoSlider插件是一款基于jQuery的多圖片切換插件，它支持多種圖片切換時(shí)的動畫效果，而且支持鍵盤導(dǎo)航和連接影像功能，其下載地址為：://dev7studios/plugins/nivo-slider/1．屬性NivoSlider插件的常用屬性及說明如表9-7所示。屬性說明effect過渡效果sliceseffect為切片效果時(shí)的數(shù)量boxColseffect為格子效果時(shí)的列boxRowseffect為格子效果時(shí)的行animSpeed動畫速度pauseTime圖片切換速度startSlide從第幾張開始directionNav是否顯示圖片切換按鈕(上/下頁）directionNavHide是否鼠標(biāo)經(jīng)過才顯示controlNav顯示序列導(dǎo)航屬性說明controlNavThumbs顯示圖片導(dǎo)航controlNavThumbsFromRel使用img的rel屬性作為縮略圖地址controlNavThumbsSearch查找特定字符串（controlNavThumbs必須為true）controlNavThumbsReplace替換成這個(gè)字符（controlNavThumbs必須為true）keyboardNav鍵盤控制（左右箭頭）pauseOnHover鼠標(biāo)經(jīng)過時(shí)暫停播放manualAdvance是否手動播放（false為自動播放幻燈片）captionOpacity字幕透明度prevText上一張圖片nextText下一章圖片randomStart是否隨機(jī)圖片開始2．方法NivoSlider插件的常用方法及說明如表9-8所示。方法說明beforeChange動畫開始前觸發(fā)afterChange動畫結(jié)束后觸發(fā)slideshowEnd本輪循環(huán)結(jié)束觸發(fā)lastSlide最后一張圖片播放結(jié)束觸發(fā)afterLoad加載完畢時(shí)觸發(fā)【例9-3】本實(shí)例使用NivoSlider插件實(shí)現(xiàn)仿淘寶首頁的廣告切換效果。程序開發(fā)步驟如下：〔1〕新建一個(gè)index.html文件，將其放到9-3文件夾中?！?〕將NivoSlider插件的themes文件夾、腳本文件、nivo-slider.css樣式文件以及jQuery的腳本文件拷貝到9-3文件夾中；另外，新建一個(gè)images文件夾，將要進(jìn)行切換的圖片文件拷貝到該文件夾中?！?〕使用Dreamweaver翻開index.html文件，該文件中使用NivoSlider插件實(shí)現(xiàn)圖片的切換效果，進(jìn)行圖片切換時(shí)，可以通過單擊網(wǎng)頁下方的縮略圖導(dǎo)航進(jìn)行切換。代碼如下：<head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>使用NivoSlider插件實(shí)現(xiàn)圖片的切換</title><linkrel="stylesheet"href="nivo-slider/themes/default/default.css"type="text/css"media="screen"/><linkrel="stylesheet"href="nivo-slider/themes/light/light.css"type="text/css"media="screen"/><linkrel="stylesheet"href="nivo-slider/themes/dark/dark.css"type="text/css"media="screen"/><linkrel="stylesheet"href="nivo-slider/themes/bar/bar.css"type="text/css"media="screen"/><linkrel="stylesheet"href="nivo-slider/nivo-slider.css"type="text/css"media="screen"/><linkrel="stylesheet"href="style.css"type="text/css"media="screen"/><scripttype="text/javascript">$(window).load(function(){

$('#slider').nivoSlider( { controlNavThumbs:true, //圖片導(dǎo)航 manualAdvance:false //自動播放 });});</script></head><body><divid="wrapper"><divclass="slider-wrappertheme-default"><divid="slider"class="nivoSlider"><imgsrc="images/01.jpg"data-thumb="images/01.jpg"alt=""title="跨越編程障礙"/><imgsrc="images/02.jpg"data-thumb="images/02.jpg"alt=""title="有了編程詞典，學(xué)編程就這么簡單！"/><imgsrc="images/03.jpg"data-thumb="images/03.jpg"alt=""title="海量資源，輕松擁有"/><imgsrc="images/04.jpg"data-thumb="images/04.jpg"alt=""title="#htmlcaption"/></div><divid="htmlcaption"class="nivo-html-caption">編程詞典互動效勞社區(qū)</a>.</div></div></div></body></html>使用Chorme瀏覽器運(yùn)行index.html，效果如圖9-3所示，程序可以自動實(shí)現(xiàn)圖片的切換，另外，用戶可以將鼠標(biāo)移動到圖片上，單擊圖片上的前后箭頭實(shí)現(xiàn)圖片的切換，也可以單擊下面的圖片縮略圖進(jìn)行圖片的切換。圖9-3NivoSlider插件的使用

插件〔數(shù)據(jù)分頁〕Pagination插件是一款可以加載數(shù)據(jù)和進(jìn)行分頁的jQuery插件，其下載地址為：s://github/gbirke/jquery_pagination。使用時(shí)，一般需要先將要顯示的數(shù)據(jù)載入到頁面中，然后根據(jù)當(dāng)前頁面的索引號，獲取指定頁面需要顯示的數(shù)據(jù)，并將這局部數(shù)據(jù)顯示到相應(yīng)的容器中，從而實(shí)現(xiàn)分頁顯示數(shù)據(jù)的功能。注意：Pagination插件由于需要一次性加載數(shù)據(jù)，因此在分頁切換時(shí)無刷新與延遲，但是，如果數(shù)據(jù)量較大，不建議用該插件，因?yàn)榧虞d會比較慢。跟一般的jQuery插件一樣，Pagination插件使用也很簡單。例如，要使用方法pagination，可以用下面的代碼：$("#page").pagination(100);這里的100參數(shù)是必須的，表示顯示工程的總個(gè)數(shù)，得到的顯示效果如圖9-4所示。圖9-4使用ColorPicker插件制作顏色選擇器

說明：分頁列表需要放在class類為pagination的標(biāo)簽內(nèi)，可以使用text-align屬性控制分頁居中顯示還是居右顯示。

Pagination插件的常用屬性及說明如表9-9所示。屬性說明maxentries總條目數(shù)items_per_page每頁顯示的條目數(shù)num_display_entries連續(xù)分頁主體部分顯示的分頁條目數(shù)current_page當(dāng)前選中的頁面num_edge_entries兩側(cè)顯示的首尾分頁的條目數(shù)link_to分頁的鏈接prev_text“前一頁”分頁按鈕上顯示的文字next_text“下一頁”分頁按鈕上顯示的文字ellipse_text省略的頁數(shù)用什么文字表示prev_show_always是否顯示“前一頁”分頁按鈕next_show_always是否顯示“下一頁”分頁按鈕callback回調(diào)函數(shù)，一般用來裝載對應(yīng)分頁顯示的內(nèi)容【例9-4】本實(shí)例使用Pagination插件制作一個(gè)分頁顯示數(shù)據(jù)的網(wǎng)頁，其中要分頁顯示的數(shù)據(jù)需要通過AJAX異步獲取。程序開發(fā)步驟如下：〔1〕新建一個(gè)index.html文件，將其放到9-4文件夾中?！?〕將Pagination插件所用到的腳本文件、腳本和pagination.css樣式文件拷貝到9-4文件夾中?！?〕新建一個(gè)load.html文件，存放在9-4文件夾中，該文件主要用來定義要異步獲取的數(shù)據(jù)。代碼如下：<head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/></head><body><divclass="result">異步獲取的內(nèi)容：ASP.NET</div><divclass="result">異步獲取的內(nèi)容：PHP</div><divclass="result">異步獲取的內(nèi)容：JavaWeb</div><divclass="result">異步獲取的內(nèi)容：jQuery</div><divclass="result">異步獲取的內(nèi)容：JavaScript</div><divclass="result">異步獲取的內(nèi)容：AJAX</div><divclass="result">異步獲取的內(nèi)容：Java</div><divclass="result">異步獲取的內(nèi)容：C#</div><divclass="result">異步獲取的內(nèi)容：Android</div><divclass="result">異步獲取的內(nèi)容：VisualC++</div></body></html>〔4〕使用Dreamweaver翻開index.html文件，該文件中使用AJAX技術(shù)從load.html文件中獲取要顯示的數(shù)據(jù)，然后通過設(shè)置Pagination插件的選項(xiàng)對獲取的數(shù)據(jù)進(jìn)行分頁顯示。代碼如下：<head><meta-equiv="Content-Type"content="text/html;charset=utf-8"/><title>使用Pagination插件實(shí)現(xiàn)數(shù)據(jù)分頁顯示</title><linkrel="stylesheet"href="pagination/pagination.css"/><scripttype="text/javascript">$(function(){ //通過AJAX加載分頁元素 varinitPagination=function(){ varnum_entries=$("#hiddenresultdiv.result").length; //創(chuàng)立分頁 $("#Pagination").pagination(num_entries,{ num_edge_entries:1, //邊緣頁數(shù) num_display_entries:4, //連續(xù)分頁主體局部顯示的分頁數(shù)

callback:pageselectCallback, items_per_page:1, //每頁顯示1項(xiàng)

prev_text:"Prev", next_text:"Next" }); }; functionpageselectCallback(page_index,jq){ varnew_content=$("#hiddenresultdiv.result:eq("+page_index+")").clone(); $("#Searchresult").empty().append(new_content);//加載對應(yīng)分頁的內(nèi)容

returnfalse; } //AJAX異步獲取要加載的數(shù)據(jù)

$("#hiddenresult").load("load.html",null,initPagination);});</script></head><bodystyle="font-size:84%;color:#00F;line-height:1.4;"><h1>使用Pagination插件實(shí)現(xiàn)數(shù)據(jù)分頁顯示</h1><divid="Pagination"class="pagination"></div><divid="Searchresult"style="width:300px;height:100px;padding:20px;background:#9CF"></div><divid="hiddenresult"style="display:none;"></div></body></html>使用IE瀏覽器運(yùn)行index.html，效果如圖9-5所示。

圖9-5Pagination插件的使用

說明：本程序使用IE瀏覽器或者Firefox瀏覽器進(jìn)行瀏覽，因?yàn)镃hrome瀏覽器針對非效勞器端的AJAX調(diào)用做了嚴(yán)格的限制，而本程序中獲取分頁顯示的數(shù)據(jù)時(shí)，用到了AJAX異步獲取，所以使用Chrome瀏覽器看不到獲取的結(jié)果。插件〔圖片放大鏡〕jQZoom是一個(gè)基于jQuery的圖片放大鏡插件，它功能強(qiáng)大，使用簡便，支持標(biāo)準(zhǔn)模式、反轉(zhuǎn)模式、無鏡頭、無標(biāo)題的放大，并可以自定義jQZoom的窗口位置和漸隱效果，其下載地址為://mind-projects.it/projects/jqzoom/index.php#download_section。jQZoom插件的常用屬性及說明如表9-10所示。屬性說明zoomType默認(rèn)值：’standard’，另一個(gè)值是’reverse’，是否將原圖用半透明圖層遮蓋zoomWidth默認(rèn)值：200，放大窗口的寬度zoomHeight默認(rèn)值：200，放大窗口的高度xOffset默認(rèn)值：10，放大窗口相對于原圖的x軸偏移值，可以為負(fù)yOffset默認(rèn)值：0，放大窗口相對于原圖的y軸偏移值，可以為負(fù)position默認(rèn)值：’right’，放大窗口的位置，值還可以是:’right’,’left’,’top’,’bottom’lens默認(rèn)值：true，若為false，則不在原圖上顯示鏡頭屬性說明imageOpacity默認(rèn)值：0.2，當(dāng)zoomType的值為’reverse’時(shí)，這個(gè)參數(shù)用于指定遮罩的透明度title默認(rèn)值：true，在放大窗口中顯示標(biāo)題，值可以為a標(biāo)記的title值，若無，則為原圖的title值showEffect默認(rèn)值：’show’，顯示放大窗口時(shí)的效果，值可以為:‘show’,’fadein’hideEffect默認(rèn)值：’hide’，隱藏放大窗口時(shí)的效果:‘hide’,’fadeout’fadeinSpeed默認(rèn)值：’fast’，放大窗口的漸顯速度（選項(xiàng):‘fast’,'slow’,'medium’）fadeoutSpeed默認(rèn)值：’slow’，放大窗口的漸隱速度（選項(xiàng):‘fast’,'slow’,'medium’）showPreload默認(rèn)值：true，是否顯示加載提示Loadingzoom（選項(xiàng):‘true’,'false’）preloadText默認(rèn)值：’Loadingzoom’，自定義加載提示文本preloadPosition默認(rèn)值：’center’，加載提示的位置，值也可以為’bycss’，以通過css指定位置【例9-5】本實(shí)例使用jQZoom插件制作一個(gè)圖片放大鏡，運(yùn)行程序，當(dāng)鼠標(biāo)在圖片上移動時(shí)，圖片的局部會以放大形式顯示在網(wǎng)頁的右側(cè)空白區(qū)域。程序開發(fā)步驟如下：〔1〕新建一個(gè)index.html文件，將其放到9-5文件夾中。〔2〕將jQZoom插件的css文件夾、js文件夾拷貝到9-5文件夾中?！?〕使用Dreamweaver翻開index.html文件，該文件中首先引入jQuery文件、jQZoom插件及其CSS樣式文件；然后，定義一個(gè)JavaScript函數(shù)，使用jqzoom顯示放大效果；最后，在<body></body>區(qū)域中參加一個(gè)div，在該div中，分別使用<img>標(biāo)記和<a>標(biāo)記設(shè)置要顯