我做笔记中用到的,我一般在写笔记的时候用textarea放代码，看到dhtml手册上的点下展开，点下收起的做法，我今天有空就仿了一个。
今天改了兼容ff,可惜有点bug. scrollHeight难道会变化？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>笔记2006-08-10-> 2006-09-21</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
*{font-family:verdana; font-size:12px;}
date{color:blue;}
pre{font:12px verdana;}
h1{font-size:14px;font-weight:bold;color:black;}
pre{BACKGROUND:#EEF; PADDING:15px;}
.codeTable th{display:block;text-align:right;BACKGROUND:#DDD; cursor:pointer;}
.code{BACKGROUND:#FFF;BORDER:1px solid #AAA; PADDING:5px;}
.red{color:red;}
.mainContent{ BACKGROUND:#EEF; PADDING:6px; font: 12px verdana;}
.redcolor{color:red;}
.project{width: 80%; MARGIN: 5px; }
xmp{background: #FFF; width: 80%; MARGIN: 5px; PADDING:10px;}
.projectHead{color:blue;}
code{BACKGROUND:#FFF;BORDER:1px solid #AAA; PADDING:5px;display:block;}
</style>
<script language="javascript" type="text/javascript">
<!--
function codeFold(tbl){
//alert(tbl.tagName);
codeContainObj = tbl.rows[1].cells[0];
if(document.all)
codeObj=codeContainObj.childNodes[0];
else
codeObj=codeContainObj.childNodes[1];
//alert(codeObj);
butt = tbl.rows[0].cells[0];
if(codeObj.folded == 1){
codeObj.style.height=codeObj.oldHeight;
codeObj.folded = 0;
butt.innerText = "▼";
}
else {
codeObj.oldHeight = codeObj.offsetHeight;
codeObj.style.height=codeObj.scrollHeight;
codeObj.folded = 1;
butt.innerText = "▲";
}
//alert(codeObj.style.backgroundColor);
}
/*
* state:1,已经解决
* state:0,未解决
*/
//-->
</script>
</head>
<body>
<item>
<h1>http认证原理</h1>
<date>2006-09-27</date>
<time>15:07:45</time>
<author>bailing</author>
<div class="mainContent">
<pre>
<table class="codeTable">
<caption>socket客户端代码</caption>
<tr><th onclick="codeFold(this.parentNode.parentNode);">▼</th></tr>
<tr>
<td>
<textarea class="code" rows="10" cols="80">
fdsafds
</textarea>
</td>
</tr>
</table>
</pre>
</body>
</html>
<html>
<head>
<title>笔记2006-08-10-> 2006-09-21</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style>
*{font-family:verdana; font-size:12px;}
date{color:blue;}
pre{font:12px verdana;}
h1{font-size:14px;font-weight:bold;color:black;}
pre{BACKGROUND:#EEF; PADDING:15px;}
.codeTable th{display:block;text-align:right;BACKGROUND:#DDD; cursor:pointer;}
.code{BACKGROUND:#FFF;BORDER:1px solid #AAA; PADDING:5px;}
.red{color:red;}
.mainContent{ BACKGROUND:#EEF; PADDING:6px; font: 12px verdana;}
.redcolor{color:red;}
.project{width: 80%; MARGIN: 5px; }
xmp{background: #FFF; width: 80%; MARGIN: 5px; PADDING:10px;}
.projectHead{color:blue;}
code{BACKGROUND:#FFF;BORDER:1px solid #AAA; PADDING:5px;display:block;}
</style>
<script language="javascript" type="text/javascript">
<!--
function codeFold(tbl){
//alert(tbl.tagName);
codeContainObj = tbl.rows[1].cells[0];
if(document.all)
codeObj=codeContainObj.childNodes[0];
else
codeObj=codeContainObj.childNodes[1];
//alert(codeObj);
butt = tbl.rows[0].cells[0];
if(codeObj.folded == 1){
codeObj.style.height=codeObj.oldHeight;
codeObj.folded = 0;
butt.innerText = "▼";
}
else {
codeObj.oldHeight = codeObj.offsetHeight;
codeObj.style.height=codeObj.scrollHeight;
codeObj.folded = 1;
butt.innerText = "▲";
}
//alert(codeObj.style.backgroundColor);
}
/*
* state:1,已经解决
* state:0,未解决
*/
//-->
</script>
</head>
<body>
<item>
<h1>http认证原理</h1>
<date>2006-09-27</date>
<time>15:07:45</time>
<author>bailing</author>
<div class="mainContent">
<pre>
<table class="codeTable">
<caption>socket客户端代码</caption>
<tr><th onclick="codeFold(this.parentNode.parentNode);">▼</th></tr>
<tr>
<td>
<textarea class="code" rows="10" cols="80">
fdsafds
</textarea>
</td>
</tr>
</table>
</pre>
</body>
</html>
浙公网安备 33010602011771号