jQuery plug in simple learning example tutorial
- 2021-07-01 06:32:26
- OfStack
This article illustrates the jQuery plug-in and its usage. Share it for your reference, as follows:
(1) Asynchronous paging plug-in flexgrid
1) Foreground 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', //按那1列排序
useRp : true, //是否可以动态设置每1页的结果数
page : 1, //默认的当前页
/* total : 4, //总的条数，在后台进行设置即可
*/
showTableToggleBtn : false, //是否显示【显示隐藏Grid】的按钮
width : 850,
height : 300,
rp : 3, //每1页的默认数
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('增加1条！');
//打开1个页面，新增数据
}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());
}
//打开1个页面进行数据修改
}
//$("#flexigridTable").flexReload();
}
</script>
</head>
<body>
<table id="flexigridTable" align="center"></table>
</body>
</html>
2) Background action
Finally, you only need to return an json named rows
(2) Magnifier, 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(); // Use the default directly magnify
$("#computerId").magnify({
showEvent: 'mouseover', // Events need to be triggered when displaying magnifying glass effects
hideEvent: 'mouseout', // Events need to be triggered to hide magnifying glass effects
lensWidth: 60, // Prompt lens width for mouse movement in small pictures
lensHeight: 60, // The height of the prompt lens when the mouse moves in a small picture
preload: false, // Whether to preload or not
stagePlacement: 'right', // Enlarge the picture and display it in the direction of the small picture
loadingImage: 'image/ipad.jpg', // Tips for loading pictures dynamic small pictures
lensCss: { backgroundColor: '#cc0000', // Prompt lens for mouse movement in small pictures CSS Style
border: '0px', // Enlarge the border effect of the picture
opacity: 0 }, // Opacity
stageCss: { border: '1px solid #33cc33',width:400,height:400} // Mirror table CSS Style
});
});
</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, // On trigger autoComplete The minimum number of characters that the previous user needs to enter .Default: 1
//matchContains : true,
mustMatch : false, // If set to true,autoComplete Only matching results are allowed to appear in the input box
dataType : 'json',
selectFirst:false,
autoFill:false,// Autofill values
matchCase:false, // Compare whether the case sensitive switch is turned on, and the default false( Point to the case of data passed in the background )
scroll:true, // Whether to use scroll display when the result set is greater than the default height 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+"";
// Each of the results 1 This function will be called by rows , Display format ,row For each 1 Objects, i For the following table from 1 At first, max Is the maximum subscript
}
}).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) Asynchronous upload
<%@ 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=" Upload ">
</form>
</body>
</html>
(5) Calendar
<%@ 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>
The action in the background is as follows:
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(" Upload succeeded ");
return null;
}
}
More readers interested in jQuery can check the topics of this site: "Summary of jQuery Extension Skills", "Summary of jQuery Common Plug-ins and Usage", "Summary of jQuery Drag Effects and Skills", "Summary of jQuery Table (table) Operation Skills", "Summary of Ajax Usage in jquery", "Summary of jQuery Common Classic Special Effects", "Summary of jQuery Animation and Special Effects Usage" and "Summary of jquery Selector Usage"
I hope this article is helpful to everyone's jQuery programming.