jQuery插件簡(jiǎn)單學(xué)習(xí)實(shí)例教程
更新時(shí)間：2016年07月01日 17:00:07 作者：sust2012
這篇文章主要介紹了jQuery插件的簡(jiǎn)單用法,列舉了分頁(yè)插件、放大鏡插件、自動(dòng)完成插件、上傳插件、日歷插件等的簡(jiǎn)單使用方法,需要的朋友可以參考下
本文實(shí)例講述了jQuery插件及其用法。分享給大家供大家參考，具體如下：
（1）異步分頁(yè)插件flexgrid
1）前臺(tái)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', //請(qǐng)求數(shù)據(jù)的路徑
method : 'POST', //請(qǐng)求方式
dataType : 'json', //返回的數(shù)據(jù)類(lèi)型
colModel : [ { //對(duì)table的組織
display : '編 號(hào)', //表頭信息
name : 'id', //對(duì)應(yīng)json的字段
width : 200,
sortable : true, //是否可排序
align : 'center',
hide :false //是否可見(jiàn)
}, {
display : '分類(lèi)編號(hào)',
name : 'catalogId',
width : 200,
sortable : true,
align : 'center'
}, {
display : '分類(lèi)名稱(chēng)',
name : 'catalogName',
width : 200,
sortable : true,
align : 'center'
}, {
display : '分類(lèi)總數(shù)',
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, //是否可以動(dòng)態(tài)設(shè)置每一頁(yè)的結(jié)果數(shù)
page : 1, //默認(rèn)的當(dāng)前頁(yè)
/* total : 4, //總的條數(shù)，在后臺(tái)進(jìn)行設(shè)置即可
*/
showTableToggleBtn : false, //是否顯示【顯示隱藏Grid】的按鈕
width : 850,
height : 300,
rp : 3, //每一頁(yè)的默認(rèn)數(shù)
usepager : true, //是否分頁(yè)
rpOptions : [ 3, 6, 9, 15 ], //可選擇設(shè)定的每頁(yè)結(jié)果數(shù)
resizable:true , //table是否可以伸縮
title:'商品信息',
errormsg:'加載數(shù)據(jù)出錯(cuò)',
procmsg:'正在處理，請(qǐng)稍候'
});
});
function test(com, grid) {
if (com == '刪除') {
//alert($(".trSelected td:first",grid).text());
var a = confirm('是否刪除這 ' + $('.trSelected', grid).length + ' 條記錄嗎?');
if (a) {
$(".trSelected", grid).remove();
//刪除數(shù)據(jù)的ajax請(qǐng)求
}
} else if (com == '增加') {
alert('增加一條！');
//打開(kāi)一個(gè)頁(yè)面，新增數(shù)據(jù)
}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());
}
//打開(kāi)一個(gè)頁(yè)面進(jìn)行數(shù)據(jù)修改
}
//$("#flexigridTable").flexReload();
}
</script>
</head>
<body>
<table id="flexigridTable" align="center"></table>
</body>
</html>
2）后臺(tái)action
最后只需返回一個(gè) 名字為 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(); //直接使用默認(rèn)的magnify
$("#computerId").magnify({
showEvent: 'mouseover', //顯示放大鏡效果時(shí)需要觸發(fā)事件
hideEvent: 'mouseout', //隱藏放大鏡效果時(shí)需要觸發(fā)事件
lensWidth: 60, //鼠標(biāo)在小圖片中移動(dòng)的提示鏡頭寬度
lensHeight: 60, //鼠標(biāo)在小圖片中移動(dòng)的提示鏡頭高度
preload: false, //是否預(yù)先加載
stagePlacement: 'right', //放大圖片后顯示在小圖片的方向
loadingImage: 'image/ipad.jpg', //加載圖片時(shí)的提示動(dòng)態(tài)小圖片
lensCss: { backgroundColor: '#cc0000', //鼠標(biāo)在小圖片中移動(dòng)的提示鏡頭CSS樣式
border: '0px', //放大圖片的邊框效果
opacity: 0 }, //不透明度
stageCss: { border: '1px solid #33cc33',width:400,height:400} //鏡臺(tái)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, //在觸發(fā)autoComplete前用戶(hù)至少需要輸入的字符數(shù).Default: 1
//matchContains : true,
mustMatch : false, //如果設(shè)置為true,autoComplete只會(huì)允許匹配的結(jié)果出現(xiàn)在輸入框
dataType : 'json',
selectFirst:false,
autoFill:false,//自動(dòng)填充值
matchCase:false, //比較是否開(kāi)啟大小寫(xiě)敏感開(kāi)關(guān)，默認(rèn)false(指向后臺(tái)傳遞的數(shù)據(jù)大小寫(xiě))
scroll:true, //當(dāng)結(jié)果集大于默認(rèn)高度時(shí)是否使用卷軸顯示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+"";
//結(jié)果中的每一行都會(huì)調(diào)用這個(gè)函數(shù),顯示的格式,row為每一個(gè)對(duì)象，i為下表從一開(kāi)始，max為最大下標(biāo)
}
}).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>
后臺(tái)的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;
}
}
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jQuery拖拽特效與技巧總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jquery中Ajax用法總結(jié)》、《jQuery常見(jiàn)經(jīng)典特效匯總》、《jQuery動(dòng)畫(huà)與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法
這篇文章主要介紹了Jquery實(shí)現(xiàn)地鐵線路指示燈提示牌效果的方法,實(shí)例分析了jQuery動(dòng)態(tài)顯示特效的使用技巧,需要的朋友可以參考下2015-03-03
jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)鼠標(biāo)單擊網(wǎng)頁(yè)文字后在文本框顯示的方法,可實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊上方文字即可在下方勾選處文本框顯示對(duì)應(yīng)文字的效果,涉及jQuery鼠標(biāo)事件及鏈?zhǔn)讲僮鞯南嚓P(guān)技巧,需要的朋友可以參考下2015-05-05
jQuery學(xué)習(xí)筆記之 Ajax操作篇（二） - 數(shù)據(jù)傳遞
在前一篇介紹 jQuery Ajax 的數(shù)據(jù)加載中的例子都是從靜態(tài)的文件中取得數(shù)據(jù)，而 Ajax 更大的價(jià)值在于與后端服務(wù)器進(jìn)行數(shù)據(jù)傳遞，動(dòng)態(tài)地請(qǐng)求和發(fā)送數(shù)據(jù)。2014-06-06
jQuery是一個(gè)非常優(yōu)秀的 JavaScript 框架，使用簡(jiǎn)單靈活，同時(shí)還有許多成熟的插件可供選擇。其中，jQuery 最令人印象深刻的應(yīng)用之一就是對(duì)圖片的處理，它可以讓幫助你在你的項(xiàng)目中加入各種精美的圖片展示效果2012-08-08
這個(gè)代碼，針對(duì)學(xué)習(xí)jquery插件制作的朋友可以參考下。效果并不是主要的。2010-05-05
這篇文章主要為大家詳細(xì)介紹了多種jQuery綁定事件的實(shí)現(xiàn)方式，分享了jQuery防止重復(fù)綁定事件的解決方法，感興趣的小伙伴們可以參考一下2016-06-06
jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳
這篇文章主要介紹了jquery插件uploadify實(shí)現(xiàn)帶進(jìn)度條的文件批量上傳，感興趣的小伙伴們可以參考一下2015-12-12
jQuery javaScript捕獲回車(chē)事件(示例代碼)
jQuery javaScript捕獲回車(chē)事件(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
Javascript 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無(wú)非是一個(gè)語(yǔ)法技巧而已，我就學(xué)Jquery寫(xiě)了一個(gè)粗淺的庫(kù)。2010-05-05
改善你的jQuery的25個(gè)步驟 千倍級(jí)效率提升
改善你的jQuery的25個(gè)步驟 -- 從頭看完會(huì)有無(wú)數(shù)收獲,千倍級(jí)效率提升2010-02-02