jQuery插件简单学习实例教程
sust2012 人气:0本文实例讲述了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({
/https://img.qb5200.com/download-x/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程序设计有所帮助。
加载全部内容