实用JS小汇总--抽屉式收缩右边窗体(类似QQ)
该章节笔者就贴上这段用到的一个JS收缩右边窗体的脚本代码。
图片预览
右边框架显示人员列表（在线与下线）。
图片预览
右边框架显示人员列表（在线与下线）。
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2<html xmlns="http://www.w3.org/1999/xhtml">
3<head>
4<title>聊天室</title>
5<style type="text/css">
6
.navPoint {color: white; cursor: pointer; font-family: webdings; font-size: 9pt}
7</style>
8<script type="text/javascript">
9 //退出聊天室
10 function closethewindow()
11 {
12
13 var p = window.dialogArguments;
14 p.location = p.location;
15 window.close();
16
}
17 //右边窗体收缩
18 function changewindow()
19 {
20 var window=document.getElementById("carnoc");
21 if(window!=null)
22
{
23 window.location.reload();
24
}
25 }
26</script>
27</head>
28<body style="margin: 0px" scroll="no" onresize="changewindow();">
29<script type="text/javascript">
30if(self!=top){top.location=self.location;}
31function switchSysBar(){
32if (switchPoint.innerText==3){
33switchPoint.innerText=4
34document.all("frmTitle").style.display="none"
35}else{
36switchPoint.innerText=3
37document.all("frmTitle").style.display=""
38}}
39</script>
40<table border="0" cellpadding="0" cellspacing="0" height="620px" width="100%">
41 <tr>
42 <td colspan="3">
43 <input type ="button" value="退出聊天室" onclick="closethewindow();">
44 <hr>
45 </td>
46 </tr>
47 <tr>
48 <td>
49 <iframe src="http://moss/ChatRoom/Pages/chatroom.aspx" width="100%" height="620px" id="chatpeople"></iframe>
50 </td>
51 <td bgcolor="#2FBCEE" style="width:3px">
52 <table border="0" cellpadding="0" cellspacing="0" height="100%">
53 <tr>
54 <td style="height: 100%" onClick="switchSysBar()">
55 <font style="font-size:8pt; cursor: default; color: #ffffff">
56 <span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span>
57 <br>
58 </font>
59 </td>
60 </tr>
61 </table>
62 </td>
63 <td align="middle" nowrap valign="center" id="frmTitle">
64 <iframe frameborder="0" id="carnoc" name="carnoc" scrolling="auto" src="http://moss/ChatRoom/Pages/OrgTreeview.aspx" width="200px" style="height:620px">
65 </iframe>
66 </td>
67 </tr>
68</table>
69</body>
70</html>
71
72
以上两个框架替换成自己要显示的页面就可以了!<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">2
<html xmlns="http://www.w3.org/1999/xhtml">3
<head>4
<title>聊天室</title>5
<style type="text/css"> 6
.navPoint {color: white; cursor: pointer; font-family: webdings; font-size: 9pt} 
.navPoint 
7
</style> 8
<script type="text/javascript"> 9
//退出聊天室10
function closethewindow() 11
{ 12
13
var p = window.dialogArguments;14
p.location = p.location;15
window.close(); 16
} 17
//右边窗体收缩18
function changewindow()19
{20
var window=document.getElementById("carnoc");21
if(window!=null)22
{
23
window.location.reload();24
}25
}26
</script> 27
</head>28
<body style="margin: 0px" scroll="no" onresize="changewindow();">29
<script type="text/javascript">30
if(self!=top){top.location=self.location;}31
function switchSysBar(){32
if (switchPoint.innerText==3){33
switchPoint.innerText=434
document.all("frmTitle").style.display="none"35
}else{36
switchPoint.innerText=337
document.all("frmTitle").style.display=""38
}}39
</script>40
<table border="0" cellpadding="0" cellspacing="0" height="620px" width="100%">41
<tr>42
<td colspan="3">43
<input type ="button" value="退出聊天室" onclick="closethewindow();"> 44
<hr>45
</td>46
</tr> 47
<tr>48
<td>49
<iframe src="http://moss/ChatRoom/Pages/chatroom.aspx" width="100%" height="620px" id="chatpeople"></iframe>50
</td>51
<td bgcolor="#2FBCEE" style="width:3px">52
<table border="0" cellpadding="0" cellspacing="0" height="100%">53
<tr>54
<td style="height: 100%" onClick="switchSysBar()">55
<font style="font-size:8pt; cursor: default; color: #ffffff">56
<span class="navPoint" id="switchPoint" title="关闭/打开左栏">3</span>57
<br>58
</font>59
</td>60
</tr>61
</table> 62
</td>63
<td align="middle" nowrap valign="center" id="frmTitle">64
<iframe frameborder="0" id="carnoc" name="carnoc" scrolling="auto" src="http://moss/ChatRoom/Pages/OrgTreeview.aspx" width="200px" style="height:620px"> 65
</iframe> 66
</td>67
</tr>68
</table>69
</body>70
</html>71
72
