jQuery插件简单学习实例教程_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程序设计有所帮助。

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索jquery
插件
，以便于您获取更多的相关知识。

时间： 2024-07-30 10:15:07

jQuery插件简单学习实例教程_jquery的相关文章

jQuery插件制作的实例教程_jquery

一.jQuery插件的类型 1. jQuery方法很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQuery强大的选择器优势. 2. 全局函数法可以把自定义的功能函数独立附加到jQuery命名空间下,从而作为jQuery作用域下的一个公共函数使用. 但全局函数没有被绑定到jQuery对象上,故不能在选择器获取的jQuery对象上调用.需要通过jQuery.fn()或$.fn()方式进行引用. 3.

jQuery插件ajaxFileUpload使用实例解析_jquery

ajaxFileUpload.js 很多同名的,因为做出来一个很容易. 我用的是这个:https://github.com/carlcarl/AjaxFileUpload 下载地址在这里:http://xiazai.jb51.net/201610/yuanma/ajaxfileupload(jb51.net).rar AjaxFileUpload.js并不是一个很出名的插件,只是别人写好的放出来供大家用,原理都是创建隐藏的表单和iframe然后用JS去提交,获得返回值. 当初做了个异步上传的功能

jQuery操作cookie方法实例教程_jquery

本文实例讲述了jQuery操作cookie的方法.分享给大家供大家参考.具体方法如下: 先来看看jq.cookie的aip 写入cookie 复制代码代码如下: $.cookie("this-cookie","this-value",{ expires:10,//有效日期 path:"/",//cookie的路径 domanin: //cookie的域名 secure:true //true,cookie

在JavaScript中重写jQuery对象的方法实例教程_jquery

jQuery是一个款非常优秀的类库,它给我们解决了很多的客户端编程,但是任何东西都不是万能的,当它不能满足我们的需求时我们就需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:比如我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" val

10分钟学会写Jquery插件实例教程_jquery

有很多朋友都用过jquery插件,但是很少有人自己动手写过jQuery插件,本文就以实例形式简单叙述了jQuery插件的实现方法.分享给大家供大家参考之用.具体方法如下: 具体而言,其实就是把一些常用.实用.通用的功能封装起来而以,简单的来讲就是把这些代码放在一个方法里面,可以达到重复使用的效果,这样就可以不需要每次要用此功能的时候都去重新写一遍. 现在Jquery里面加入了插件的概念,只要按照它特定的格式当作平时写function一样去写就可以了,不虽然搞得太复杂的.信不信由你们,反正

jQuery制作简单柱状图实例_jquery

本文实例讲述了jQuery制作简单柱状图的方法.分享给大家供大家参考.具体实现方法如下: Html部分: 复制代码代码如下: <head> <title>柱状图</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link href="css.css" type="tex

jQuery插件原来如此简单 jQuery插件的机制及实战_jquery

jQuery插件的种类 1.封装对象方法这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的一种插件.此类插件可以发挥出jQuery选择器的强大优势,有相当一部分的jQuery的方法,都是在jQuery脚本库内部通过这种形式"插"在内核上的,例如parent()方法,appendTo()方法等. 2.封装全局函数可以将独立的函数加到jQuery命名空间下.如常用的jQuery.ajax()方法.去首尾空格的jQuery.trim()方法,都是jQ

分享jQuery插件的学习笔记_jquery

插件(Plugin)也成为 jQuery 扩展(Extension),是一种遵循一定规范的应用程序接口编写出来的程序.目前 jQuery 插件已超过几千种,由来自世界各地的开发者共同编写.验证和完善.而对于jQuery开发者而言,直接使用这些插件将快速稳定架构系统,节约项目成本. 一．插件概述插件是以 jQuery 的核心代码为基础,编写出复合一定规范的应用程序.也就是说,插件也是 jQuery 代码,通过 js 文件引入的方式植入即可. 插件的种类很多,主要大致可以分为:UI 类.表单及验

jQuery中队列queue()函数的实例教程_jquery

如果当前jQuery对象匹配多个元素:获取队列时,只获取第一个匹配元素上的队列:设置队列(替换队列.追加函数)时,则为每个匹配元素都分别进行设置. 该函数属于jQuery对象(实例).如果需要移除并执行队列中的第一个函数,请使用dequeue()函数.你也可以使用clearQueue()函数清空指定的队列. 语法jQuery 1.2 新增该函数.queue()函数具有如下两种用法: 用法一: jQueryObject.queue( [ queueName ] [, newQueue ] ) 如果