内容折叠效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<HTML
xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>FLYSO Blog--内容折叠效果</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<STYLE type=text/css>.showstate {
MARGIN-TOP: 2px; FLOAT: right; CURSOR: pointer; MARGIN-RIGHT: 3px
}
.headers {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 1px solid; FONT-WEIGHT: bold; FONT-SIZE: 120%; BORDER-LEFT: black 1px solid; WIDTH: 400px; BORDER-BOTTOM: black 1px solid; BACKGROUND-COLOR: lightyellow
}
.switchcontent {
BORDER-RIGHT: black 1px solid; BORDER-TOP: black 0px solid; BORDER-LEFT: black 1px solid; WIDTH: 400px; BORDER-BOTTOM: black 1px solid
}
body{
font-size:12px;
}
xmp{
font-family:"Courier New", Courier, monospace;
background:#f5f5f5;
padding:10px;
table-layout:fixed;word-wrap:break-word;word-break:break-all
}
.ft{
display:none;
}
pre{
background:#eee;
border:1px dashed #ccc;
padding:1%;
}
</STYLE>

<SCRIPT type=text/javascript>
var enablepersist="on" //是否使用Cookie来保存结构的状态 (on/off)
var memoryduration="7" //保存多少天

var contractsymbol='myfile/images/-.gif' //开状态图片路径
var expandsymbol='myfile/images/+.gif' //闭合状态图片路径

/////下面的代码无须改动 //////////////////////////

function getElementbyClass(rootobj, classname){
var temparray=new Array()
var inc=0
var rootlength=rootobj.length
for (i=0; i<rootlength; i++){
if (rootobj[i].className==classname)
temparray[inc++]=rootobj[i]
}
return temparray
}

function sweeptoggle(ec){
var inc=0
while (ccollect[inc]){
ccollect[inc].style.display=(ec=="contract")? "none" : ""
inc++
}
revivestatus()
}

function expandcontent(curobj, cid){
if (ccollect.length>0){
document.getElementById(cid).style.display=(document.getElementById(cid).style.display!="none")? "none" : ""
curobj.src=(document.getElementById(cid).style.display=="none")? expandsymbol : contractsymbol
}
}

function revivecontent(){
selectedItem=getselectedItem()
selectedComponents=selectedItem.split("|")
for (i=0; i<selectedComponents.length-1; i++)
document.getElementById(selectedComponents[i]).style.display="none"
}

function revivestatus(){
var inc=0
while (statecollect[inc]){
if (ccollect[inc].style.display=="none")
statecollect[inc].src=expandsymbol
else
statecollect[inc].src=contractsymbol
inc++
}
}

function getselectedItem(){
if (get_cookie(window.location.pathname) != ""){
selectedItem=get_cookie(window.location.pathname)
return selectedItem
}
else
return ""
}

function saveswitchstate(){
var inc=0, selectedItem=""
while (ccollect[inc]){
if (ccollect[inc].style.display=="none")
selectedItem+=ccollect[inc].id+"|"
inc++
}
if (get_cookie(window.location.pathname)!=selectedItem){
var expireDate = new Date()
expireDate.setDate(expireDate.getDate()+parseInt(memoryduration))
document.cookie = window.location.pathname+"="+selectedItem+";path=/;expires=" + expireDate.toGMTString()
}
}

function do_onload(){
uniqueidn=window.location.pathname+"firsttimeload"
var alltags=document.all? document.all : document.getElementsByTagName("*")
ccollect=getElementbyClass(alltags, "switchcontent")
statecollect=getElementbyClass(alltags, "showstate")
if (enablepersist=="on" && get_cookie(window.location.pathname)!="" && ccollect.length>0)
revivecontent()
if (ccollect.length>0 && statecollect.length>0)
revivestatus()
}

if (window.addEventListener)
window.addEventListener("load", do_onload, false)
else if (window.attachEvent)
window.attachEvent("onload", do_onload)
else if (document.getElementById)
window.onload=do_onload

if (enablepersist=="on" && document.getElementById)
window.onunload=saveswitchstate

</SCRIPT>

<META content="MSHTML 6.00.5730.11" name=GENERATOR></HEAD>
<BODY>
<H3>演示效果：</H3>
<DIV style="MARGIN-BOTTOM: 5px"><A
href="javascript:sweeptoggle('contract')">全部闭合</A> | <A
href="javascript:sweeptoggle('expand')">全部展开</A></DIV>
<DIV class=headers><IMG class=showstate onClick="expandcontent(this, 'sc1')"
src="myfile/images/-.gif">What is
JavaScript?</DIV>
<DIV class=switchcontent id=sc1>JavaScript is a scripting language originally
developed by Netscape to add interactivity and power to web documents. It is
purely client side, and runs completely on the client's browser and computer.
</DIV><BR>
<DIV class=headers><IMG class=showstate onClick="expandcontent(this, 'sc2')"
src="http://www.w3pop.com/sucai/dynamic/content/minus.gif">Difference betwen
Java & JavaScript?</DIV>
<DIV class=switchcontent id=sc2>Java is completely different from JavaScript-
the former is a compiled language while the later is a scripting language.
</DIV><BR>
<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
    <TD class=headers><IMG class=showstate
      onclick="expandcontent(this, 'sc3')"
      src="myfile/images/-.gif">What is DHTML?
      (table example)</TD></TR>
<TR>
    <TD class=switchcontent id=sc3>DHTML is the embodiment of a combination of
      technologies- JavaScript, CSS, and HTML. Through them a new level of
      interactivity is possible for the end user experience.</TD></TR></TBODY></TABLE>
<H3> </H3>
<DIV class=ft><A href="http://www.w3pop.com/">w3pop.com</A> </DIV>

</BODY></HTML>
http://www.flyso.net/article.asp?id=121

posted on 2007-01-11 15:12 mbskys 阅读(197) 评论(0) 收藏举报