jQuery插件简单学习实例教程

前端技术 2023/08/10 JavaScript

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

本文地址：https://www.stayed.cn/item/834

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案