写个简单 类似webqq的 小功能 （二）：点击好友弹出对话框。
博客更新的有点慢了。。。坚持一件事不只是随意说出的那么简单， 实际行动才是坚持的最好证明。
呵呵，现在继续上次的未完待续...
点击好友后弹出对话框，首先，好友成员那么多，不可能每一个都给个id 我们就用遍历的方法遍历每个元素
var
ma
=
$(
"
con
"
).getElementsByTagName(
"
li
"
);
for
(
var
i
=
0
; i
<
maLegth; i
++
) {
ma[i].onclick
=
function
() {
.....
//
调用对话框的方法
}
}
然后 我们就开始 写个 创建 新窗口的函数：我可能要想 这个新创建的窗口需要有哪些元素，参考了webqq 的对话窗口后，有些目前是我做不到的，所以我就做了个简单的大概情况，要有姓名、关闭按钮、 最小化按钮、聊天内容框，发送按钮 。大致这几个功能：1 ：每弹出一个对话框要获得该好友的名字 2.最小化 3. 关闭功能 4.发送消息时 接受功能，判断是否为空，为空时会出现一个小提示 5. 在创建对话窗口的同时还得创建个最下方的状态栏，暂时先这么多，还需要其他的功能等会再加。
function
cre(tag) {
return
document.createElement(tag);
}
//
创建聊天窗口
function
createEle(stuName, newIdN) {
var
newEle
=
cre(
"
div
"
);
newEle.className
=
"
chat
"
;
newEle.id
=
"
chat
"
+
newIdN;
newEle.style.position
=
"
absolute
"
;
var
newHtt
=
cre(
"
div
"
);
newHtt.className
=
"
chat-tt
"
;
var
newH2
=
cre(
"
h2
"
);
newH2.innerHTML
=
stuName;
//
这是通过参数来获得 好友的名字 先保存在一个参数里，
newHtt.appendChild(newH2);
var
ttbtn
=
cre(
"
div
"
);
ttbtn.className
=
"
tt-btn
"
;
newHtt.appendChild(ttbtn);
var
ttbtnCon1
=
cre(
"
a
"
);
ttbtnCon1.className
=
"
a3
"
;
ttbtn.appendChild(ttbtnCon1);
var
ttbtnCon2
=
cre(
"
a
"
);
ttbtnCon2.className
=
"
a4
"
;
ttbtn.appendChild(ttbtnCon2);
//
隐藏聊天窗口
ttbtnCon1.onclick
=
function
() {
displayNone(newEle);
};
//
关闭聊天窗口
ttbtnCon2.onclick
=
function
() {
removeEle(newEle);
//
移除对话窗口
removeEle(botNav);
//
移除左下方的状态栏
};
var
chatBox
=
cre(
"
div
"
);
chatBox.className
=
"
chatBox
"
;
var
sedMessage
=
cre(
"
div
"
);
sedMessage.className
=
"
send
"
;
var
textarea
=
cre(
"
textarea
"
);
//
聊天记录
textarea.className
=
"
textarea
"
;
sedMessage.appendChild(textarea);
var
sedMsg
=
cre(
"
input
"
);
//
发送消息按钮
sedMsg.type
=
"
button
"
;
sedMsg.value
=
"
sendmessage
"
;
sedMessage.appendChild(sedMsg);
var
spanMsg
=
document.createElement(
"
span
"
);
//
发送内容空 的小提示
sedMessage.appendChild(spanMsg);
//
发送消息按钮事件
sedMsg.onclick
=
function
() {
var
flag
=
true
;
var
chatLogs
=
cre(
"
p
"
);
chatBox.appendChild(chatLogs);
//
判断发送内容是否为空
if
(isNull(textarea, spanMsg)
==
true
) {
chatLogs.innerHTML
=
'
<span>我说：</span><br/>
'
+
textarea.value;
}
else
{
removeEle(chatLogs);
}
//
点击发送后 清空textarea内的值
textarea.value
=
""
;
};
newEle.appendChild(newHtt);
newEle.appendChild(chatBox);
newEle.appendChild(sedMessage);
document.body.appendChild(newEle);
//
创建 左下方的状态栏
var
botNav
=
cre(
"
div
"
);
botNav.className
=
"
chat-nav
"
;
var
botName
=
cre(
"
h5
"
);
botName.innerHTML
=
stuName;
var
closeSpan
=
cre(
"
span
"
);
closeSpan.innerHTML
=
"
X
"
;
botNav.appendChild(botName);
botNav.appendChild(closeSpan);
var
parentNodes
=
$(
"
last
"
);
parentNodes.appendChild(botNav);
}
View Code
//
删除对象
function
removeEle(removeObj) {
removeObj.parentNode.removeChild(removeObj);
}
//
判断是否为空
function
isNull(ckObj, tipsObj) {
var
t
=
ckObj.value.replace(
/
\s
/
g,
""
);
var
flag
=
true
;
if
(t.length
==
0
) {
tipsObj.innerHTML
=
"
发送的内容不能为空!
"
;
flag
=
false
;
}
else
{
tipsObj.innerHTML
=
""
;
flag
=
true
;
}
return
flag;
}
呵呵 然后开始 调用这个函数吧。上面我开始提到 大致的一个思路是这样的。具体的完善一下点击好友成员 弹出对话框的 函数吧
var
ma
=
$(
"
con
"
).getElementsByTagName(
"
li
"
);
var
maLength
=
ma.length;
for
(
var
i
=
0
; i
<
maLegth; i
++
) {
ma[i].onclick
=
function
() {
createEle(ma[i].innerHTML, i);
}
}
但是这样并不会出现我所想要的效果，浏览器会报错，结果还是出现 第一篇中 出现闭包的问题。那只好用另一种方法来解决了
var
ma
=
$(
"
con
"
).getElementsByTagName(
"
li
"
);
var
maLength
=
ma.length;
for
(
var
i
=
0
; i
<
maLegth; i
++
) {
memberEvent(ma, i);
}
//
解决上面的 闭包问题 （点击li弹出对话窗口）
function
memberEvent(targtObj, temp) {
targtObj[temp].onclick
=
function
() {
createEle(
this
.innerHTML, temp);
}
效果如下图：
效果是有了，但是有个bug ，就是每次我点击的时候总是出现在同一个位置 而且多次点击同一个好友时，它会重复多次创建。这时 我们只好给新建的窗口一个标识 id; 这样通过id判断一下是否存在 再创建 就解决那个重复弹出对话窗口的问题，在创建的时候已经 有个参数了，这个id还不是随便命名的，我是通过获得好友列表的索引来给 新建的窗口命名的id,调用函数的时候memberEvent(ma, i);
还有个每次点击对话框的时候出现同一个位置 解决办法 是定义全局变量，每次创建的时候叠加一定的像素。这样就显得错落有致。
还有一个问题，就是为了达到多窗口同时聊天的效果，每次用户点击要聊天的好友时总是在显示在最前面，我当时是这样想的 出现最上层z-index就是最大的一个。怎么样可以让这个最后点击好友或者状态栏的永远是最大值呢。（一个 z-index 的问题，z-index值越大，该层就会在最上层）
最后还是 用了全局变量，全局变量可以用于记录上一次操作过它的值，而且在此数值的基础上 可以进行运算。
View Code
var
count
=
0
, left
=
20
, top
=
10
;
//
全局变量
function
memberEvent(targtObj, temp) {
targtObj[temp].onclick
=
function
() {
count
++
;
//
每点击一次都会自动加一
var
ms
=
$(
"
chat
"
+
temp);
//
如果 点击好友的对话窗口 不存在时 开始创建 新的窗口
if
(
!
ms) {
createEle(
this
.innerHTML, temp);
var
ms
=
$(
"
chat
"
+
temp);
var
nh
=
document.documentElement.clientHeight
-
340
;
//
窗口 每次弹出后在原来的基础上 左上角都要错个 30px，解决 重叠的效果。
这个是如果超过 浏览器的可见高度，新窗口会top为0 的位置每次以30px依次叠加。
if
(top
<
nh) {
left
=
left
+
30
;
top
=
top
+
30
;
}
else
{
top
=
0
;
top
=
top
+
30
;
}
ms.style.left
=
left
+
"
px
"
;
ms.style.top
=
top
+
"
px
"
;
}
ms.style.zIndex
=
count ;
//
每次count得最后值赋给 zindex；这样每次最后点击的元素永远都会出现在最上层。
}
}
恩，这下好了。。。大致就是这个效果了、、、
