jQuery插件简单学习实例教程
本文实例讲述了jQuery插件及其用法。分享给大家供大家参考，具体如下：
（1）异步分页插件flexgrid
1）前台js
<%@pagelanguage="Java"contentType="text/html;charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8">
<title>Inserttitlehere</title>
<scripttype="text/JavaScript"src="js/jQuery-1.8.0.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/flexigrid.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/flexigrid.pack.js"charset="utf-8"></script>
<linkhref="css/flexigrid.css"rel="Stylesheet">
<linkhref="css/flexigrid.pack.css"rel="Stylesheet">
<scripttype="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:'正在处理，请稍候'
});
});
functiontest(com,grid){
if(com=='删除'){
//alert($(".trSelectedtd:first",grid).text());
vara=confirm('是否删除这'+$('.trSelected',grid).length+'条记录吗?');
if(a){
$(".trSelected",grid).remove();
//删除数据的ajax请求
}
}elseif(com=='增加'){
alert('增加一条！');
//打开一个页面，新增数据
}else{
vartr=$(".trSelected:first",grid);
/*alert(grid.html());
*/vardata=[];
vartds=tr.children();
for(vari=0;i<tds.length;i++){
data[data.length]=$(tds[i]).text();
//alert($(tds[i]).text());
}
//打开一个页面进行数据修改
}
//$("#flexigridTable").flexReload();
}
</script>
</head>
<body>
<tableid="flexigridTable"align="center"></table>
</body>
</html>
2）后台action
最后只需返回一个名字为 rows的json即可
（2）放大镜，magnify
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="js/jquery-1.8.0.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/jquery.magnify-1.0.2.js"charset="utf-8"></script>
<scripttype="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:'1pxsolid#33cc33',width:400,height:400}//镜台CSS样式
});
});
</script>
</head>
<body>
<ahref="image/ipad.jpg"id="bigImage">
<imgalt=""src="image/ipad.jpg"width="350"height="150">
</a>
<br>
<ahref="image/computer.jpg"id="computerId">
<imgalt=""src="image/computer.jpg"width="200"height="150">
</a>
</body>
</html>
（3）autoComplete
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>autoCompletejquery</title>
<scripttype="text/javascript"src="js/jquery-1.8.0.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/jquery.autocomplete.js"charset="utf-8"></script>
<linkhref="css/jquery.autocomplete.css"rel="Stylesheet">
<scripttype="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){
varrows=[];
vard=resultData.serarchResult;
for(vari=0;i<d.length;i++){
rows[i]={
data:d[i],
value:d[i].catalogId,
result:d[i].catalogName
};
}
returnrows;
},
formatItem:function(row,i,max){
returnrow.catalogName+" ["+row.count+"]";
//returnrow.id+"";
//结果中的每一行都会调用这个函数,显示的格式,row为每一个对象，i为下表从一开始，max为最大下标
}
}).result(function(event,item){
alert(item.catalogName);
});
});
</script>
</head>
<body>
<inputtype="text"style="width:474px;"maxlength="100"id="kw"name="wd">
<inputtype="submit"value="submit"name="search">
</body>
</html>
(4)异步上传
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="js/jquery-1.8.0.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/ajaxupload.3.6.js"
charset="utf-8"></script>
<scripttype="text/javascript">
$(document).ready(function(){
varuploadObj={
action:'ajaxFileUploadAction.html',
name:'upload',
onSubmit:function(file,type){
//alert("gag");
},
onComplate:function(file,data){
alert("true");
}
};
newAjaxUpload($("[type='submit']"),uploadObj);
});
</script>
</head>
<body>
<formaction=""enctype="multipart/form-data"method="post">
<inputtype="file"name="upload"><inputtype='submit'
value="上传">
</form>
</body>
</html>
（5）日历
<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript"src="js/jquery-1.8.0.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/jquery-ui.js"charset="utf-8"></script>
<scripttype="text/javascript"src="js/ui.datepicker-zh-CN.js"charset="utf-8"></script>
<linkhref="css/jquery-ui.css"rel="Stylesheet">
<scripttype="text/javascript">
$(document).ready(function(){
$("[name='data']").datepicker({
//dateFormat:'yy-mm-dd'
});
});
</script>
</head>
<body>
<inputtype="text"name="data">
</body>
</html>
后台的action如下：
packagecom.jquery.plugin.action;
importjava.io.BufferedInputStream;
importjava.io.BufferedOutputStream;
importjava.io.File;
importjava.io.FileInputStream;
importjava.io.FileNotFoundException;
importjava.io.FileOutputStream;
importjava.io.IOException;
importjava.util.ArrayList;
importjava.util.List;
importjavax.servlet.http.HttpServletRequest;
importorg.apache.struts2.ServletActionContext;
importorg.apache.struts2.json.annotations.JSON;
importcom.jquery.plugin.dao.DataDao;
importcom.jquery.plugin.pojo.Catalog;
importcom.opensymphony.xwork2.Action;
importcom.opensymphony.xwork2.ActionSupport;
publicclassJQueryActionextendsActionSupport{
/**
*
*/
privatestaticfinallongserialVersionUID=1L;
privateStringq;
privateIntegerrp;
privateIntegerpage;
privateIntegertotal;
privateList<Catalog>serarchResult=newArrayList<Catalog>();
privateList<Catalog>rows=newArrayList<Catalog>();
privateStringsortname;
privateFileupload;
privateStringuploadFileName;
publicStringgetQ(){
returnq;
}
publicvoidsetQ(Stringq){
this.q=q;
}
publicIntegergetRp(){
returnrp;
}
publicvoidsetRp(Integerrp){
this.rp=rp;
}
publicIntegergetPage(){
returnpage;
}
publicvoidsetPage(Integerpage){
this.page=page;
}
@JSON(name="total")
publicIntegergetTotal(){
returntotal;
}
publicStringredirect(){
System.out.println("go..");
returnAction.SUCCESS;
}
//{age:1}[search:{age:1}]
@JSON(name="serarchResult")
publicList<Catalog>getSerarchResult(){
returnserarchResult;
}
publicList<Catalog>getRows(){
returnrows;
}
publicvoidsetRows(List<Catalog>rows){
this.rows=rows;
}
publicStringgetSortname(){
returnsortname;
}
publicvoidsetSortname(Stringsortname){
this.sortname=sortname;
}
publicFilegetUpload(){
returnupload;
}
publicvoidsetUpload(Fileupload){
this.upload=upload;
}
publicStringgetUploadFileName(){
returnuploadFileName;
}
publicvoidsetUploadFileName(StringuploadFileName){
this.uploadFileName=uploadFileName;
}
publicStringautoCompleteJQuery(){
System.out.println("q:"+q);
List<Catalog>result=DataDao.getList();
if(!"".equals(q)){
for(Catalogcatalog:result){
if(catalog.getCatalogName().toLowerCase().contains(q.toLowerCase())){
serarchResult.add(catalog);
}
}
}
System.out.println(serarchResult.size());
returnAction.SUCCESS;
}
publicStringflexigrid(){
try{
List<Catalog>result=DataDao.getList();
IntegerstartIndex=(page-1)*rp;
IntegerendIndex=startIndex+rp;
total=result.size();
while(endIndex>result.size()){
endIndex--;
}
System.out.println("page:"+page+":total:"+total);
System.out.println("sortname:"+sortname);
for(inti=startIndex;i<(endIndex);i++){
rows.add(result.get(i));
}
}catch(Exceptione){
e.printStackTrace();
}
returnAction.SUCCESS;
}
publicStringajaxFileUpload(){
System.out.println("begin...");
BufferedOutputStreamout=null;
BufferedInputStreamin=null;
StringuploadPath=null;
StringcontextPath=null;
try{
//fileName=URLEncoder.encode(fileName,"GB2312");
System.out.println("fileName:"+uploadFileName);
byte[]buffer=newbyte[1024];
HttpServletRequestrequest=ServletActionContext.getRequest();
contextPath=request.getSession().getServletContext().getRealPath("/");
uploadPath=contextPath+"/upload/"+uploadFileName;
System.out.println(uploadPath);
out=newBufferedOutputStream(newFileOutputStream(uploadPath));
intlen=0;
in=newBufferedInputStream(newFileInputStream(upload));
while((len=in.read(buffer,0,buffer.length))!=-1){
out.write(buffer,0,len);
out.flush();
}
}catch(FileNotFoundExceptione){
e.printStackTrace();
}catch(IOExceptione){
e.printStackTrace();
}finally{
try{
if(out!=null){
out.close();
}
if(in!=null){
in.close();
}
}catch(IOExceptione){
e.printStackTrace();
}
}
System.out.println("上传成功");
returnnull;
}
}
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。