编程 Javascript

jQuery插件简单学习实例教程

Posted in Javascript onJuly 01, 2016

本文实例讲述了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插件简单学习实例教程

- Author -

sust2012

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery学习4 浏览器的事件模型

Feb 07 Javascript

js页面跳转常用的几种方式

Nov 25 Javascript

调用HttpHanlder的几种返回方式小结

Dec 20 Javascript

javascript修改IMG标签的src问题

Mar 28 Javascript

JavaScript中textRange对象使用方法小结

Mar 24 Javascript

值得分享的Bootstrap Ace模板实现菜单和Tab页效果

Dec 30 Javascript

深入浅析JavaScript中数据共享和数据传递

Apr 25 Javascript

解决修复npm安装全局模块权限的问题

May 17 Javascript

vue微信分享的实现(在当前页面分享其他页面)

Apr 16 Javascript

JS中封装axios来管控api的2种方式

Sep 11 Javascript

js实现车辆管理系统

Aug 26 Javascript

js实现点击按钮随机生成背景颜色

Sep 05 Javascript

jquery插件autocomplete用法示例

Jul 01 #Javascript

AngularJS 避繁就简的路由

Jul 01 #Javascript

AngularJS使用指令增强标准表单元素功能

Jul 01 #Javascript

AngularJS实现分页显示数据库信息

Jul 01 #Javascript

AngularJS内建服务$location及其功能详解

Jul 01 #Javascript

学习Angularjs分页指令

Jul 01 #Javascript

仿Angular Bootstrap TimePicker创建分钟数-秒数的输入控件

Jul 01 #Javascript