jquery+Handler实现淘宝收藏列表导航功能
我一个朋友，因为jquery不怎么会写，他工作大部分都是用服务器控件，所以他看到这样的效果不好做，叫我帮他做，我答应他了，因为很忙，所以就今晚抽了点时间来做做，在里面最重要的是用到了现在很流行的jquery，他的效果，大家用过淘宝的收藏就知道，就是一个列表，然后鼠标移上去右边就显示【编辑/删除】功能，当点击编辑时对收藏类就行编辑，然后点击保存，整个过程就这样，我在这里分享一下，就是想以后我们园子的朋友有遇到这样的问题，看到这个例子可以有一种豁然开朗的感觉。
1
<%
@ Page Language
=
"
C#
"
AutoEventWireup
=
"
true
"
CodeFile
=
"
Default.aspx.cs
"
Inherits
=
"
_Default
"
%>
2
<!
DOCTYPE html PUBLIC
"
-//W3C//DTD XHTML 1.0 Transitional//EN
"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
"
>
3
<
html xmlns
=
"
http://www.w3.org/1999/xhtml
"
>
4
<
head runat
=
"
server
"
>
5
<
title
>
jquery
+
handler实现的淘宝收藏列表的导航功能
---
aXinNo1
</
title
>
6
<
script src
=
"
jquery-1.4.2.min.js
"
type
=
"
text/javascript
"
></
script
>
7
<
style type
=
"
text/css
"
>
8
.show{list
-
style: none;margin: 0px;padding: 0px;}
9
.show li{width: 300px;height: 25px;margin: 0px;border: 1px #ccc solid;}
10
.show li a{
float
: left;padding
-
left: 5px;padding
-
top: 5px;}
11
.show li span{display: none;
float
: left;margin
-
left: 110px;}
12
.show li dl{display: none;
float
: left;border: 1px red solid;margin: 0px;padding: 0px;}
13
</
style
>
14
</
head
>
15
<
body
>
16
<
form id
=
"
form1
"
runat
=
"
server
"
>
17
<
div
><
ul
class
=
"
show
"
>
18
<%
for
(
int
i
=
0
; i
<
list.Count; i
++
)
19
{
20
UserModel uModel
=
list[i]
as
UserModel;
%>
21
<
li
><
a href
=
"
#
"
>
22
<%=
uModel.cname
%></
a
>
23
<
dl
><
dd
><
table style
=
"
width: 100%; margin: 0px; padding: 0px;
"
>
24
<
tr
>
25
<
td style
=
"
text-align: left;
"
>
26
<
input type
=
"
text
"
id
=
'
uname<%=uModel.ID %>
'
value
=
'
<%=uModel.cname %>
'
/>
27
</
td
>
28
<
td style
=
"
text-align: right
"
>
29
<
a id
=
'
save<%=uModel.ID %>
'
href
=
"
javascript:doSave(<%=uModel.ID %>)
"
>
保存
</
a
>
30
</
td
>
31
<
td style
=
"
text-align: right
"
>
32
<
a id
=
"
doDelete<%=uModel.ID %>
"
href
=
"
javascript:doClose(<%=uModel.ID %>)
"
>
取消
</
a
>
33
</
td
></
tr
></
table
></
dd
></
dl
>
34
<
span
><
a id
=
"
edit<%=uModel.ID %>
"
href
=
"
javascript:doEdit(<%=uModel.ID %>)
"
>
编辑
</
a
>
<
a
35
href
=
"
javascript:doDelete(<%=uModel.ID %>)
"
onclick
=
"
javascript:return confirm('你确定删除？');
"
>
36
删除
</
a
>
</
span
></
li
>
<%
}
%>
37
</
ul
></
div
>
38
</
form
>
39
</
body
>
40
<
script type
=
"
text/javascript
"
>
41
$(document).ready(function(){
42
$(
'
ul li
'
).hover(function(){
43
$(
this
).find(
'
span
'
).css({
"
display
"
:
"
block
"
});
44
},function(){
45
$(
this
).find(
'
span
'
).css({
"
display
"
:
"
none
"
});
46
});
47
$(
'
ul li:even
'
).css({
"
background-color
"
:
"
#ccc
"
});
48
});
49
function doEdit(id){
50
$(
'
#edit
'
+
id).parents(
'
span
'
).css({
"
display
"
:
"
none
"
});
51
$(
'
#edit
'
+
id).parents(
'
span
'
).siblings(
'
a
'
).css({
"
display
"
:
"
none
"
});
52
$(
'
#edit
'
+
id).parents(
'
span
'
).siblings(
'
dl
'
).css({
"
display
"
:
"
block
"
});
53
if
($(
'
#edit
'
+
id).parents(
'
span
'
).siblings(
'
dl
'
).css(
"
display
"
)
==
"
block
"
){
54
$(
'
#edit
'
+
id).parents(
'
span
'
).parent().hover(function(){
55
$(
'
#edit
'
+
id).parents(
'
span
'
).css({
"
display
"
:
"
none
"
});
56
});
57
}
58
}
59
function doClose(id){
60
$(
'
#doDelete
'
+
id).parent().parent().parent().
61
parent().parents(
'
dl
'
).css({
"
display
"
:
"
none
"
});
62
$(
'
#doDelete
'
+
id).parent().parent().parent()
63
.parent().parents(
'
dl
'
).siblings(
'
a
'
).css({
"
display
"
:
"
block
"
});
64
$(
'
#doDelete
'
+
id).parent().parent().parent()
65
.parent().parents(
'
dl
'
).siblings(
"
span
"
).css({
"
display
"
:
"
none
"
});
66
$(
'
ul li
'
).hover(function(){
67
$(
this
).find(
'
span
'
).css({
"
display
"
:
"
block
"
});
68
},function(){
69
$(
this
).find(
'
span
'
).css({
"
display
"
:
"
none
"
});
70
});
71
}
72
function doDelete(id){
73
$.ajax({
74
type:
'
post
'
,
75
data:{cmd:
"
delete
"
,id:id},
76
url:
"
Handler.ashx
"
,
77
success:function(result){
78
window.location.reload();
79
}
80
});
81
}
82
function doSave(id){
83
var data
=
{cname:document.getElementById(
"
uname
"
+
id).value,cmd:
"
save
"
,id:id};
84
$.ajax({
85
type:
'
post
'
,
86
data:data,
87
url:
"
Handler.ashx
"
,
88
success:function(result){
89
window.location.reload();
90
}
91
});
92
}
93
</
script
>
94
</
html
>
95
Handler处理文件
<%@ WebHandler Language="C#" Class="Handler" Debug="true" %>
using System;
using System.Web;
using System.Web.Services;
using System.Web.Script.Serialization;
public class Handler : IHttpHandler
{
protected HttpContext ctx;
public void ProcessRequest(HttpContext context)
{
ctx = context;
ctx.Response.ContentType = "text/plain; charset=UTF-8";
if (ctx.Request["cmd"].Equals("save"))
{
this.dosave(); //其实是修改的
}
else if (ctx.Request["cmd"].Equals("delete"))
{
this.dodelete();//删除
}
}
protected void dosave()
{
UserInfoBll uBll = new UserInfoBll();
string id = ctx.Request["id"].ToString();
string cname = ctx.Request["cname"].ToString();
string result = "";
JavaScriptSerializer serializer = new JavaScriptSerializer();
UserModel uModel = new UserModel
{
cname = cname,
ID = Convert.ToInt32(id)
};
try {
uBll.Update(uModel);
result = "操作成功";
}
catch { result = "操作失败"; }
string strJson = serializer.Serialize(result);
ctx.Response.Write(strJson);
}
protected void dodelete() {
UserInfoBll uBll = new UserInfoBll();
string id = ctx.Request["id"].ToString();
bool flag= uBll.Delete(Convert.ToInt32(id));
JavaScriptSerializer serializer = new JavaScriptSerializer();
string strJson = serializer.Serialize(flag);
ctx.Response.Write(strJson);
}
public bool IsReusable
{
get
{
return false;
}
}
}
出处，博客园aXinNo1：http://www.cnblogs.com/axinno1/