jQuery插件简单学习实例教程
更新时间：2016年7月6日 10:01 点击：2410
本文实例讲述了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程序设计有所帮助。
相关文章
- 这篇文章主要介绍了jquery实现加载更多"转圈圈"效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-10
- 最近接了一个项目，其中有需求要用到jquery分页控件，上网也找到了需要分页控件，各种写法各种用法，都是很复杂，最终决定自己动手写一个jquery分页控件，全当是练练手了。写的不好，还请见谅，本分页控件在chrome测试过，其他的兼容性...2015-10-30
- 有时我们在页面上需要选择数值范围，如购物时选取价格区间，购买主机时自主选取CPU，内存大小配置等，使用直观的滑块条直接选取想要的数值大小即可，无需手动输入数值，操作简单又方便。HTML首先载入jQuery库文件以及jRange相关...2015-03-15
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考，具体如下：先来看如下运行效果截图：在线演示地址如下：http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要为大家详细介绍了jQuery实现广告显示和隐藏动画，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下...2021-07-05
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考，具体如下：这里介绍的jquery伪分页效果，在火狐下表现完美，IE全系列下有些问题，引入了jQuery1.7.2插件，代码里有丰富的注释，相信对学习jQuery有不小的帮助，期...2015-10-30
- 拜读一个开源框架，最想学到的就是设计的思想和实现的技巧。废话不多说，jquery这么多年了分析都写烂了，老早以前就拜读过，不过这几年都是做移动端，一直御用zepto, 最近抽出点时间把jquery又给扫一遍我也不会照本宣科的翻译...2014-05-31
- 这篇文章主要介绍了jQuery事件绑定用法,结合实例形式较为详细的分析了jQuery事件绑定的实现原理与相关注意事项,并附带了相关绑定方法的使用说明,重点介绍了bind和live的区别,需要的朋友可以参考下...2016-01-21
- 这篇文章主要介绍了jQuery获得字体颜色16位码的方法,涉及jQuery样式操作及正则表达式使用技巧,非常简单实用,需要的朋友可以参考下...2016-02-23
- JQuery使我们在开发Ajax应用程序的时候提高了效率，减少了许多兼容性问题，我们在Ajax项目中，遇到ajax异步获取数据出错怎么办，我们可以通过捕捉error事件来获取出错的信息。在没给大家介绍正文之前先给分享Jquery中AJAX参...2015-11-24
- 当页面打开时我们需要执行一些操作,这个时候如果我们选择使用jquery的话,需要重写他的3中方法,自我感觉没什么区 别,看个人喜好了,第二种感觉比较简单明了: 第一种: 复制代码 代码如下: <script type="text/javas...2014-06-07
jquery中常用的SET和GET$(”#msg”).html循环介绍
复制代码 代码如下: $(”#msg”).html(); //返回id为msg的元素节点的html内容。 $(”#msg”).html(”new content“); //将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content $(”...2013-10-13jQuery Mobile开发中日期插件Mobiscroll使用说明
这篇文章主要介绍了jQuery Mobile开发中日期插件Mobiscroll使用说明,需要的朋友可以参考下...2016-03-03jQuery 1.9使用$.support替代$.browser的使用方法
jQuery 从 1.9 版开始，移除了 $.browser 和 $.browser.version ， 取而代之的是 $.support 。 在更新的 2.0 版本中，将不再支持 IE 6/7/8。 以后，如果用户需要支持 IE 6/7/8，只能使用 jQuery 1.9。 如果要全面支持 IE，并混合...2014-05-31jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
借助jQuery我们可以轻松地堆DOM元素进行向上、向下遍历以及同级的遍历,本文我们即来整理jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结:...2016-07-25- jquery中jquery.offset().top / left用于获取div距离窗口的距离，jquery.position().top / left 用于获取距离父级div的距离（必须是绝对定位的div）。 （1）先介绍jquery.offset().top / left css： 复制代码 代码如下: *{ mar...2013-10-13
- 有时候我们为了省事就操作键盘组合键去代替使用鼠标，我们今天就使用JQuery实现Ctrl+Enter提交表单。我们发帖时，在内容输入框中输入完内容后，可以点击“提交”按钮来发表内容。可是，如果你够“懒”，你可以不用动鼠标，只需按...2015-10-23
- 在DOM操作中，常常需要动态创建HTML内容，使文档在浏览器里的呈现效果发生变化，并且达到各种各样的人机交互目的....2016-04-27
- 直接为大家介绍制作过程，希望大家可以喜欢。HTML结构该页面切换特效的HTML结构使用一个<main>元素来作为页面的包裹元素，div.cd-cover-layer用于制作页面切换时的遮罩层，div.cd-loading-bar是进行ajax加载时的loading进...2015-10-30
jQuery Real Person验证码插件防止表单自动提交
本文介绍的jQuery插件有点特殊，防自动提交表单的验证工具，就是我们经常用到的验证码工具，先给大家看看效果。效果图如下： 使用说明 需要使用jQuery库文件和Real Person库文件 同时需要自定义验证码显示的CSS样式 使用实例...2015-11-08