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程式設計有所協助。