sust2012 通过本文主要向大家介绍了jQuery,插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
本文实例讲述了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为最大下标
}