jQuery插件简单学习实例教程

2019-11-20 09:34:15

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：JavaScript实现简单的拖动效果

下一篇：jquery插件autocomplete用法示例