jQuery UI制作選項卡（tabs）
836
2024-02-09
本文實例講述了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="http://www.gimoo.net/t/1901/js/jQuery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/flexigrid.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/flexigrid.pack.js" charset="utf-8"></script>
<link rel="Stylesheet">
<link 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="http://www.gimoo.net/t/1901/js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/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 id="bigImage">
<img alt="" src="http://www.gimoo.net/t/1901/image/ipad.jpg" width="350" height="150">
</a>
<br>
<a id="computerId">
<img alt="" src="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery.autocomplete.js" charset="utf-8"></script>
<link 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="http://www.gimoo.net/t/1901/js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/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="http://www.gimoo.net/t/1901/js/jquery-1.8.0.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/jquery-ui.js" charset="utf-8"></script>
<script type="text/javascript" src="http://www.gimoo.net/t/1901/js/ui.datepicker-zh-CN.js" charset="utf-8"></script>
<link 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程序設計有所幫助。
