jQuery插件简单学习实例教程
本文实例讲述了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程序设计有所帮助。
相关推荐
xiaoge00 2020-05-17
wenjieyatou 2020-05-04
spinachcqb 2020-03-06
muzirigel 2020-02-02
tanyhuan 2020-02-01
wwwxuewen 2020-01-19
jocleyn 2020-01-13
aolishuai 2020-01-07
魏莉的微 2020-01-07
byourb 2019-12-23
First00 2019-12-23
行吟阁 2019-12-15
iviewer是一个具有缩放和图像旋转功能的图像查看小部件。在jQuery官网下载后,有很多文件。直接把文件夹解压拖到项目里。然后再html中引入主要的文件。-- iviewer-鼠标滚轮js -->
xiaoge00 2019-12-07
行吟阁 2019-12-07
WebVincent 2019-11-19