JQUERY 模仿QQ聊天界面=.docx

JQUERY模仿QQ聊天界面

?

!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN

/TR/xhtml1/DTD/xhtml1transitional.dtd

htmlxmlns=/1999/xhtml

head

titleQQ好友列表/title

scriptsrc=../Scripts/jquery-1.4.1.jstype=text/javascript/script

scripttype=text/javascript

$(function(){

vardialogShowed=false;

//初始化好友列表

$(#QQListli:odd).addClass(body);

$(#QQListli:even).addClass(header).click(function(){

13 $(this).next().show(2000).siblings(li.body).hide(2000);

14 });

15

$(#QQListli:oddulli).mouseenter(function(){

$(this).css(background-color,rgb(72,92,127));

}).mouseleave(function(){

$(this).removeAttr(style);

}).click(function(){

varfThis=$(this);

varchartRoom=$(#chartRoom);

$(#chartInfo).val();

if(dialogShowed)

chartRoom.hide(1000);

$(#chartTitleText).text(与+fThis.text()+聊天中);

27 $(#chartRoom).show(3000);

dialogShowed=true;

}).addClass(person);

30

31 $(#QQListli:first).click();

32

//聊天窗口相关操作

$(#close).click(function(){

dialogShowed=false;

36 $(#chartRoom).hide(3000);

37 });

38

$(#send).click(function(){

varchartInfo=$(#chartInfo);

varsendInfo=$(#sendInfo);

chartInfo.val(chartInfo.val()+\n我说:\n+sendInfo.val());

sendInfo.val();

sendInfo.focus();

45 });

46 });

47 /script

48

styletype=text/css

ul

51 {

52 list-style-type:none;

53 }

54 #QQList

55 {

56 width:120px;

57 }

58 .header

59 {

background-color:rgb(42,59,88);

cursor:pointer;

text-align:center;

63 }

64 .body

65 {

66 background-color:rgb(188,199,216);

67 }

68 .person

69 {

70 cursor:pointer;

71 }

/style

/head

body

ulid=QQList

li我的好友/li

li

ul

li张三/li

li李四/li

li王武/li

82 /ul

83 /li

84 li陌生人/li

85

li

86

ul

87

li好友1/li

88

li好友2/li

89

li好友3/li

90

li好友4/li

91

li好友5/li

92

li好友6/li

93

li好友7/li

94

/ul

95

/li

96

li黑名单/li

97

li

98

ul

99

li好友1/li

100

li好友2/li

101

li好友3/li

102

/ul

103

/li

104

/ul

105

106

!--聊天窗口--

107

divid=chartRoomstyle=position:absolute;

top:20px;left:300px;display:none;

108

109

tableborder=0style=background-color:rgb(42,59,88);

!--标题栏--

110

trs