本文實例講述了jQuery插件及其用法。分享給大家供大家參考，具體如下：
（1）異步分頁插件flexgrid
1）前臺js
<%@ page language="Java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Insert title here</title><script type="text/JavaScript" src="js/jQuery-1.8.0.js" charset="utf-8"></script><script type="text/javascript" src="js/flexigrid.js" charset="utf-8"></script> <script type="text/javascript" src="js/flexigrid.pack.js" charset="utf-8"></script><link href="css/flexigrid.css" rel="Stylesheet"><link href="css/flexigrid.pack.css" rel="Stylesheet"><script type="text/javascript" charset="utf-8"> $(document).ready(function() { $("#flexigridTable").flexigrid({ url : 'flexigridAction.html', //請求數據的路徑 method : 'POST', //請求方式 dataType : 'json', //返回的數據類型 colModel : [ { //對table的組織 display : '編 號', //表頭信息 name : 'id', //對應json的字段 width : 200, sortable : true, //是否可排序 align : 'center', hide :false //是否可見 }, { display : '分類編號', name : 'catalogId', width : 200, sortable : true, align : 'center' }, { display : '分類名稱', name : 'catalogName', width : 200, sortable : true, align : 'center' }, { display : '分類總數', name : 'count', width : 200, sortable : false, align : 'center' } ], buttons : [ { //增加button name : '增加', //button的value bClass : 'add', //樣式 onpress : test //事件 }, { name : '刪除', bClass : 'delete', onpress : test },{ name : '修改', bClass : 'modify', onpress : test }, { separator : true //是否有分隔 } ], sortname : 'id', //按那一列排序 useRp : true, //是否可以動態設置每一頁的結果數 page : 1, //默認的當前頁/* total : 4, //總的條數，在后臺進行設置即可 */ showTableToggleBtn : false, //是否顯示【顯示隱藏Grid】的按鈕 width : 850, height : 300, rp : 3, //每一頁的默認數 usepager : true, //是否分頁 rpOptions : [ 3, 6, 9, 15 ], //可選擇設定的每頁結果數 resizable:true , //table是否可以伸縮 title:'商品信息', errormsg:'加載數據出錯', procmsg:'正在處理，請稍候' }); }); function test(com, grid) { if (com == '刪除') { //alert($(".trSelected td:first",grid).text()); var a = confirm('是否刪除這 ' + $('.trSelected', grid).length + ' 條記錄嗎?'); if (a) { $(".trSelected", grid).remove(); //刪除數據的ajax請求 } } else if (com == '增加') { alert('增加一條！'); //打開一個頁面，新增數據 }else{ var tr = $(".trSelected:first",grid);/* alert(grid.html()); */ var data = []; var tds = tr.children(); for(var i = 0 ; i < tds.length ; i++){ data[data.length] = $(tds[i]).text(); //alert($(tds[i]).text()); } //打開一個頁面進行數據修改 } //$("#flexigridTable").flexReload(); }</script></head><body> <table id="flexigridTable" align="center"></table></body></html>2）后臺action
最后只需返回一個 名字為 rows的json即可
（2）放大鏡，magnify
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script><script type="text/javascript" src="js/jquery.magnify-1.0.2.js" charset="utf-8"></script><script type="text/javascript">$(document).ready(function(){ $("#bigImage").magnify(); //直接使用默認的magnify $("#computerId").magnify({ showEvent: 'mouseover', //顯示放大鏡效果時需要觸發事件 hideEvent: 'mouseout', //隱藏放大鏡效果時需要觸發事件 lensWidth: 60, //鼠標在小圖片中移動的提示鏡頭寬度 lensHeight: 60, //鼠標在小圖片中移動的提示鏡頭高度 preload: false, //是否預先加載 stagePlacement: 'right', //放大圖片后顯示在小圖片的方向 loadingImage: 'image/ipad.jpg', //加載圖片時的提示動態小圖片 lensCss: { backgroundColor: '#cc0000', //鼠標在小圖片中移動的提示鏡頭CSS樣式 border: '0px', //放大圖片的邊框效果 opacity: 0 }, //不透明度 stageCss: { border: '1px solid #33cc33',width:400,height:400} //鏡臺CSS樣式 });});</script></head><body><a href="image/ipad.jpg" id="bigImage"><img alt="" src="image/ipad.jpg" width="350" height="150"></a><br><a href="image/computer.jpg" id="computerId"><img alt="" src="image/computer.jpg" width="200" height="150"></a></body></html>（3）autoComplete
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>autoComplete jquery</title><script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script><script type="text/javascript" src="js/jquery.autocomplete.js" charset="utf-8"></script><link href="css/jquery.autocomplete.css" rel="Stylesheet"><script type="text/javascript"> $(document).ready( function() { $("#kw").autocomplete( "autoCompleteJQueryAction.html", { minChars : 1, //在觸發autoComplete前用戶至少需要輸入的字符數.Default: 1 //matchContains : true, mustMatch : false, //如果設置為true,autoComplete只會允許匹配的結果出現在輸入框 dataType : 'json', selectFirst:false, autoFill:false,//自動填充值 matchCase:false, //比較是否開啟大小寫敏感開關，默認false(指向后臺傳遞的數據大小寫) scroll:true, //當結果集大于默認高度時是否使用卷軸顯示Default: true parse : function(resultData) { var rows = []; var d = resultData.serarchResult; for ( var i = 0; i < d.length; i++) { rows[i] = { data : d[i], value : d[i].catalogId, result : d[i].catalogName }; } return rows; }, formatItem : function(row,i,max) { return row.catalogName + " [" + row.count + "]"; //return row.id+""; //結果中的每一行都會調用這個函數,顯示的格式,row為每一個對象，i為下表從一開始，max為最大下標 } }).result(function(event,item){ alert(item.catalogName); }); });</script></head><body><input type="text" style="width:474px;" maxlength="100" id="kw" name="wd"> <input type="submit" value="submit" name="search"></body></html>(4)異步上傳
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script><script type="text/javascript" src="js/ajaxupload.3.6.js" charset="utf-8"></script><script type="text/javascript"> $(document).ready(function() { var uploadObj = { action : 'ajaxFileUploadAction.html', name : 'upload', onSubmit : function(file, type) { //alert("gag"); }, onComplate : function(file, data) { alert("true"); } }; new AjaxUpload($("[type='submit']"), uploadObj); });</script></head><body> <form action="" enctype="multipart/form-data" method="post"> <input type="file" name="upload"><input type='submit' value="上傳"> </form></body></html>（5）日歷
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>Insert title here</title><script type="text/javascript" src="js/jquery-1.8.0.js" charset="utf-8"></script><script type="text/javascript" src="js/jquery-ui.js" charset="utf-8"></script><script type="text/javascript" src="js/ui.datepicker-zh-CN.js" charset="utf-8"></script><link href="css/jquery-ui.css" rel="Stylesheet"><script type="text/javascript">$(document).ready(function(){ $("[name='data']").datepicker({ //dateFormat:'yy-mm-dd' });});</script></head><body><input type="text" name="data"></body></html>后臺的action如下：
package com.jquery.plugin.action;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.http.HttpServletRequest;import org.apache.struts2.ServletActionContext;import org.apache.struts2.json.annotations.JSON;import com.jquery.plugin.dao.DataDao;import com.jquery.plugin.pojo.Catalog;import com.opensymphony.xwork2.Action;import com.opensymphony.xwork2.ActionSupport;public class JQueryAction extends ActionSupport{ /** * */ private static final long serialVersionUID = 1L; private String q ; private Integer rp; private Integer page; private Integer total; private List<Catalog> serarchResult = new ArrayList<Catalog>(); private List<Catalog> rows = new ArrayList<Catalog>(); private String sortname; private File upload; private String uploadFileName; public String getQ() { return q; } public void setQ(String q) { this.q = q; } public Integer getRp() { return rp; } public void setRp(Integer rp) { this.rp = rp; } public Integer getPage() { return page; } public void setPage(Integer page) { this.page = page; } @JSON(name="total") public Integer getTotal() { return total; } public String redirect(){ System.out.println("go.."); return Action.SUCCESS; } //{age:1}[search:{age:1}] @JSON(name="serarchResult") public List<Catalog> getSerarchResult() { return serarchResult; } public List<Catalog> getRows() { return rows; } public void setRows(List<Catalog> rows) { this.rows = rows; } public String getSortname() { return sortname; } public void setSortname(String sortname) { this.sortname = sortname; } public File getUpload() { return upload; } public void setUpload(File upload) { this.upload = upload; } public String getUploadFileName() { return uploadFileName; } public void setUploadFileName(String uploadFileName) { this.uploadFileName = uploadFileName; } public String autoCompleteJQuery(){ System.out.println("q:"+q); List<Catalog> result = DataDao.getList(); if(!"".equals(q)){ for (Catalog catalog : result) { if(catalog.getCatalogName().toLowerCase().contains(q.toLowerCase())){ serarchResult.add(catalog); } } } System.out.println(serarchResult.size()); return Action.SUCCESS; } public String flexigrid(){ try { List<Catalog> result = DataDao.getList(); Integer startIndex = (page-1)*rp; Integer endIndex = startIndex+rp; total = result.size(); while(endIndex>result.size()){ endIndex--; } System.out.println("page:"+page+":total:"+total); System.out.println("sortname:"+sortname); for(int i = startIndex ;i < (endIndex);i++){ rows.add(result.get(i)); } } catch (Exception e) { e.printStackTrace(); } return Action.SUCCESS; } public String ajaxFileUpload(){ System.out.println("begin..."); BufferedOutputStream out = null ; BufferedInputStream in = null ; String uploadPath = null ; String contextPath = null; try { //fileName = URLEncoder.encode(fileName, "GB2312"); System.out.println("fileName:"+uploadFileName); byte [] buffer = new byte[1024]; HttpServletRequest request = ServletActionContext.getRequest(); contextPath = request.getSession().getServletContext().getRealPath("/"); uploadPath = contextPath+"/upload/"+uploadFileName; System.out.println(uploadPath); out = new BufferedOutputStream(new FileOutputStream(uploadPath)); int len = 0 ; in = new BufferedInputStream(new FileInputStream(upload)); while((len = in.read(buffer, 0, buffer.length))!=-1){ out.write(buffer, 0, len); out.flush(); } } catch (FileNotFoundException e) { e.printStackTrace(); } catch (IOException e) { e.printStackTrace(); }finally{ try { if(out != null){ out.close(); } if(in != null){ in.close(); } } catch (IOException e) { e.printStackTrace(); } } System.out.println("上傳成功"); return null; }}更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jQuery擴展技巧總結》、《jQuery常用插件及用法總結》、《jQuery拖拽特效與技巧總結》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
