首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
JavaScript使用IEEE 标准进行二进制浮点运算产生莫名错误的解决方法
May 28 Javascript
js 函数调用模式小结
Dec 26 Javascript
JavaScript利用append添加元素报错的解决方法
Jul 01 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
Sep 17 Javascript
详解javascript跨浏览器事件处理程序
Mar 27 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
jQuery插件autocomplete使用详解
Feb 04 Javascript
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
javascript计算对象长度的方法
Oct 25 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
聊聊鉴权那些事(推荐)
Aug 22 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
WeUI(1) ipyvizzu(1) map(4) 蒙特卡罗(1) 可视化动图(1) pdfkit(1) bufio(1) 微信小程序(9) vue-esign(1) Pillow(2)
You might like
php输出全球各个时区列表的方法
2015/03/31 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
PHP的cookie与session原理及用法详解
2019/09/27 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
基于jquery用于查询操作的实现代码
2010/05/10 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
Ajax搜索结果页面下方的分页按钮的生成
2012/04/05 Javascript
JQuery1.8 判断元素是否绑定事件的方法
2014/07/10 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
javascript遇到html5的一些表单属性
2015/07/05 Javascript
JS中的数组方法笔记整理
2016/07/26 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
2016/10/01 Javascript
深入理解JavaScript中的块级作用域、私有变量与模块模式
2016/10/31 Javascript
简单分析js中的this的原理
2019/08/31 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
vue中组件通信详解(父子组件, 爷孙组件, 兄弟组件)
2020/07/27 Javascript
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
python基础教程项目三之万能的XML
2018/04/02 Python
python操作excel的方法（xlsxwriter包的使用）
2018/06/11 Python
python多行字符串拼接使用小括号的方法
2020/03/19 Python
win10 64bit下python NLTK安装教程
2018/09/19 Python
Python设计模式之外观模式实例详解
2019/01/17 Python
Python基础之文件读取的讲解
2019/02/16 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
python和go语言的区别是什么
2020/07/20 Python
便携式太阳能系统的创新者：GOAL ZERO
2018/02/04 全球购物
为您搜罗全球潮流時尚品牌：HBX
2019/12/04 全球购物
Chi Chi London官网：购买连衣裙和礼服
2020/10/25 全球购物
大专会计自我鉴定
2014/02/06 职场文书
应届生找工作求职信
2014/06/24 职场文书
Python WSGI 规范简介
2021/04/11 Python
CSS3 制作的图片滚动效果
2021/04/14 HTML / CSS
python编程项目中线上问题排查与解决
2021/11/01 Python