jQuery插件简单学习实例教程

2024-11-26 08:42:11

本文实例讲述了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插件之多图片异步上传

1.初始化上传控件数量. 复制代码代码如下: $(document).ready(function() { $('#H_File').uploadFile({ key: 'test',count:3 }); }); 以前的设计思想是,初始化上传控件数量,页面显示为1个上传控件,每当上传成功后,在下面创建一个上传控件. 2.上传图片成功后这就是最终的效果,如果您有更好的插件,希望一起开源. 其他的就不多说了,如果您感兴趣,点击下载源码 /201010/yuanma/jquery_aspnet_
jquery.lazyload 实现图片延迟加载jquery插件

什么是ImageLazyLoad技术在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术就是,当前可见界面的图片是加载进来的,而不可见页面(通过滚动条下拉可见)中的图片是不加载的,这样势必会引起速度上质的提升. 怎么实现ImageLazyLoad 一.使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compil
跟我一起学写jQuery插件开发方法（附完整实例及下载）

很多公司的前端设计开发人员都是女孩子,而这些女孩子很多JavaScript技能都不是很好.而前端开发过程中,JavaScript技能又是必不可少的.所以,如果前端小MM正在为某个JavaScript效果发愁的时候,你潇洒的过去,然后对她说:"嗨,美女,用这个吧.这是我写的一个jQuery插件."我想基本上你的人生大事就能很快解决. 先想好做个什么功能这是第一步,也是很重要的一步,鉴于咱们都是刚学习写jQuery插件,所以,这个功能一定要简单一些.不要想一口就吃个胖子,咱也吃不了.咱还
jQuery Dialog 弹出层对话框插件

原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码代码如下:  <div class="dialog-overlay"></div>  <div class="dialog"> <div class
Jquery插件 easyUI属性汇总

此属性列表请对照jQuery EasyUI 1.0.5,关于它的更多资讯请猛击这里. 属性分为CSS片段和JS片段. CSS类定义:1.div easyui-window 生成一个window窗口样式. 属性如下: 1)modal:是否生成模态窗口.true[是] false[否] 2)shadow:是否显示窗口阴影.true[显示] false[不显示] 2.div easyui-panel
Jquery瀑布流插件使用介绍

瀑布流布局浅析浅谈个人在瀑布流网页的实现中遇到的问题和解决方法折腾:瀑布流布局(基于多栏列表流体布局实现) javascript 瀑布流.各大瀑布流简析与建议因为自己用jquery比较多,便萌生了把瀑布流做成插件的想法,图片就借用迅雷UED上的那些美图吧. 先看看Demo 把代码放出来吧复制代码代码如下: ;(function($){ var //参数 setting={ column_width:204,//列宽 column_className:'waterfall_column'
强烈推荐240多个jQuery插件提供下载

jQuery 是一个快速的,简洁的 javaScript 库,使用户能更方便地处理 HTML documents.events.实现动画效果,并且方便地为网站提供 AJAX 交互. jQuery 还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择. jQuery 能够使用户的 html 页保持代码和 html 内容分离,也就是说,不用再在 html 里面插入一堆js来调用命令了,只需定义 id 即可.今天在Kollermedia.at上发现了一篇J
JQuery Jcrop 实现图片裁剪的插件

效果如下图请"运行代码"先试下运行,运行后请刷新一次,感受下: body{ margin:100px auto; text-align:center; } .jcrop-holder { text-align: left; } .jcrop-vline, .jcrop-hline{ font-size: 0; position: absolute; background: white url('http://img.jb51.net/jslib/images/Jcrop.gif') t
JQuery的Alert消息框插件使用介绍

下载JS文件引用到page中,如下代码: 复制代码代码如下:  <script src="/path/to/jquery.js" type="text/javascript"></script> <script src="/path/to/jquery.ui.draggable.js" type="text/javascript">&l
分享20多个很棒的jQuery 文件上传插件或教程

1. Plupload Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件. 2. The KillersAjax Upload 该插件使用 XHR 用于上传多个文件,支持上传进度显示,但不支持 IE 3. SWFUpload jQuery Plugin 4. AjaxFileUpload 5. Uploadify Uploadify简单说来,是基于Jquery的一款文件上传插件.它的功能特色总结如下: 支持单文件或多文件上

jQuery插件简单学习实例教程

相关推荐

随机推荐