MSDN我记得有文章专门介绍这个东西的 下面是一个MSDN的例子，有兴趣的去参考#default#savehistory ---------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp> <HEAD> <TITLE>How To Persist The State of a Collapsible TOC</TITLE> <META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1"> <META NAME="AUTHOR" CONTENT="InetSDK"> <META NAME="MS.LOCALE" CONTENT="EN-US"> <META NAME="ROBOTS" CONTENT="noindex"><META NAME="save" CONTENT="history"> <style> .saveHistory {behavior:url(#default#savehistory);} </style> <STYLE> DIV.tocHead{color: black; text-decoration: none; cursor: "hand";} .tocItemHide {display: none;} .tocItemShow {display: block;} UL {margin-left:22pt; margin-top:0em; margin-bottom: 2 } UL UL LI {margin-left:-9pt;margin-top: .3em;} </STYLE> <script>// Error Trapping: Disregard var bError=false; var bTrapError=true; // This function is used to show and hide the sub-lists in the TOC. function fnFlash(oTitle){ // The object reference is passed as an argument and used to set the class. // The class determines if the sub-list is displayed or not. oList=document.all[oTitle.sourceIndex + 1]; if(oList.className=="tocItemHide"){ oList.className="tocItemShow"; SetLog("fnFlash","The fnFlash function was used to <b>show</b> a TOC item."); } else{ oList.className="tocItemHide"; SetLog("fnFlash","The fnFlash function was used to <b>hide</b> a TOC item."); } } // This function is called from an object that is set to persist when the page is left.function fnSave(){ SetLog("fnSave","The onsave event fired.");
var sArray="";
// The document is walked ... SetLog("fnSave","Looking for collapsible list states to persist."); for(var i=0;i<document.all.length;i++){ oTrap=document.all[i];// .. looking for UL objects with an object that has a tocHead class direct above its ordinal position (its position minus one) .. if((oTrap.tagName=="UL")&&(document.all[i-1].className=="tocHead")){ if(sArray.length==0){// .. if so, and the sArray variable is empty, the class name is written to the variable sArray=oTrap.className; }// .. if so, but the sArray variable is not empty, a delimiter is added followed by the class name. else sArray+="|" + oTrap.className; } }// Finally, the text array of class names is added to the object set to persist. // By keeping track of the classNames in this fashion, the process only needs to be reversed and the state of the TOC will be preserved upon return to the page. oPrimaryTOC.setAttribute("sPersistState",sArray); oScratchText.value=oScratch.innerHTML; }// This function is called from an object that is set to persist when the page is opened and an object is persisting. // Fair warning, if the page is refreshed and an erroneous value is set, an error may be thrown.function fnLoad(){ SetLog("fnLoad","The onload event fired and called this function.");// First, the sArray variable is set to the value of the sPersistState attribute (the delimited list). SetLog("getAttribute","The getAttribute method was used to retrieve a persisting value."); var sArray=oPrimaryTOC.getAttribute("sPersistState");// Since this TOC's contents are static, we don't have to worry about the UL objects' ordinal postions changing. // If this is a dynamic TOC, then another method for setting and retrieving this information should be used.// The sArray is broken up into an array object (oArray) using the JScript split method. The cycle variable is used as an abitrary placeholder. // This only works because the number of ULs on the page won't change from the time the page is persisted and the time it is re-opened. var cycle=0;// Start Error Trapping: Disregard if((!sArray)&&(bTrapError)){ oScratch.innerHTML=""; SetLog("Persistence Error","An error has occurred and the TOC was not persisted. The <b>sArray</b> variable was munged."); bError=true; return false; }
// End Error Trapping: Disregard oArray=sArray.split("|");// The document is walked (notice it is pretty much the same as in the fnSave function) .. for (var i=0;i<document.all.length;i++){ oTrap=document.all[i];// .. looking for the same thing as before (UL objects with an object above it, ordinally, with a tocHead className) .. if((oTrap.tagName=="UL")&&(document.all[i-1].className=="tocHead")){// .. if one exists, give it a class name from the array object, then increment the cycle variable for the next time. SetLog("Persisting:","Collapsible TOC item " + i + " was identified and its className property(" + oArray[cycle] + ") was restored."); oTrap.className=oArray[cycle];// It is important not to use this method of replacing the values if the TOC content is dynamic (in the sense that it may be different when the page is re-opened) because an error will occur - the wrong objects would receive the show/hide classes, or the the array object would be incremented beyond its content and would have no value (which would also throw an error). cycle++;
下面是一个MSDN的例子，有兴趣的去参考#default#savehistory
----------------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>How To Persist The State of a Collapsible TOC</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex"><META NAME="save" CONTENT="history">
<style>
.saveHistory {behavior:url(#default#savehistory);}
</style>
<STYLE>
DIV.tocHead{color: black; text-decoration: none; cursor: "hand";}
.tocItemHide {display: none;}
.tocItemShow {display: block;}
UL {margin-left:22pt; margin-top:0em; margin-bottom: 2 }
UL UL LI {margin-left:-9pt;margin-top: .3em;}
</STYLE>
<script>// Error Trapping: Disregard
var bError=false;
var bTrapError=true;
// This function is used to show and hide the sub-lists in the TOC.
function fnFlash(oTitle){
// The object reference is passed as an argument and used to set the class.
// The class determines if the sub-list is displayed or not.
oList=document.all[oTitle.sourceIndex + 1];
if(oList.className=="tocItemHide"){
oList.className="tocItemShow";
SetLog("fnFlash","The fnFlash function was used to <b>show</b> a TOC item."); }
else{
oList.className="tocItemHide";
SetLog("fnFlash","The fnFlash function was used to <b>hide</b> a TOC item.");
}
}
// This function is called from an object that is set to persist when the page is left.function fnSave(){
SetLog("fnSave","The onsave event fired.");
var sArray="";
// The document is walked ... SetLog("fnSave","Looking for collapsible list states to persist."); for(var i=0;i<document.all.length;i++){
oTrap=document.all[i];// .. looking for UL objects with an object that has a tocHead class direct above its ordinal position (its position minus one) .. if((oTrap.tagName=="UL")&&(document.all[i-1].className=="tocHead")){
if(sArray.length==0){// .. if so, and the sArray variable is empty, the class name is written to the variable sArray=oTrap.className;
}// .. if so, but the sArray variable is not empty, a delimiter is added followed by the class name.
else sArray+="|" + oTrap.className;
}
}// Finally, the text array of class names is added to the object set to persist.
// By keeping track of the classNames in this fashion, the process only needs to be reversed and the state of the TOC will be preserved upon return to the page. oPrimaryTOC.setAttribute("sPersistState",sArray);
oScratchText.value=oScratch.innerHTML;
}// This function is called from an object that is set to persist when the page is opened and an object is persisting.
// Fair warning, if the page is refreshed and an erroneous value is set, an error may be thrown.function fnLoad(){ SetLog("fnLoad","The onload event fired and called this function.");// First, the sArray variable is set to the value of the sPersistState attribute (the delimited list).
SetLog("getAttribute","The getAttribute method was used to retrieve a persisting value."); var sArray=oPrimaryTOC.getAttribute("sPersistState");// Since this TOC's contents are static, we don't have to worry about the UL objects' ordinal postions changing.
// If this is a dynamic TOC, then another method for setting and retrieving this information should be used.// The sArray is broken up into an array object (oArray) using the JScript split method. The cycle variable is used as an abitrary placeholder.
// This only works because the number of ULs on the page won't change from the time the page is persisted and the time it is re-opened. var cycle=0;// Start Error Trapping: Disregard if((!sArray)&&(bTrapError)){
oScratch.innerHTML="";
SetLog("Persistence Error","An error has occurred and the TOC was not persisted. The <b>sArray</b> variable was munged.");
bError=true;
return false;
}
// End Error Trapping: Disregard oArray=sArray.split("|");// The document is walked (notice it is pretty much the same as in the fnSave function) .. for (var i=0;i<document.all.length;i++){
oTrap=document.all[i];// .. looking for the same thing as before (UL objects with an object above it, ordinally, with a tocHead className) .. if((oTrap.tagName=="UL")&&(document.all[i-1].className=="tocHead")){// .. if one exists, give it a class name from the array object, then increment the cycle variable for the next time. SetLog("Persisting:","Collapsible TOC item " + i + " was identified and its className property(" + oArray[cycle] + ") was restored."); oTrap.className=oArray[cycle];// It is important not to use this method of replacing the values if the TOC content is dynamic (in the sense that it may be different when the page is re-opened) because an error will occur - the wrong objects would receive the show/hide classes, or the the array object would be incremented beyond its content and would have no value (which would also throw an error). cycle++;
}
}
}
function SetLog(iID,sNote){
oScratch.innerHTML+='<span style="font-size: 8pt; font-family: Arial;"><span style="color: blue; font-weight: bold;">' + iID + '</span>: ' + sNote + '</span><br>\n';
}
function fnRestComments(){
if(!bError){
oScratch.insertAdjacentHTML("AfterBegin",oScratchText.value);
}
}
</script><!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; }
PRE.clsSyntax { font-size:100%; }
TD DIV.clsBeta { display:none;}
MSHelp\:link {
color:#0000ff;
text-decoration:underline;
cursor:hand;
hoverColor:#3366ff;
filterString: ;}
</STYLE>
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<BLOCKQUOTE CLASS="body"><H2>How To Persist The State of a Collapsible TOC<HR SIZE=1></H2><p>
<DIV id="oTocDiv" style="position: absolute; top: 100; width=125; border: '1 solid #505050'; background-color: #EFEFEF;">
<b>Peristing <span title="TOC: Table of Contents">TOC</span></b>
<hr size=1><UL ID="oPrimaryTOC" CLASS="saveHistory" onsave="fnSave()" onload="fnLoad()">
<LI><DIV CLASS="tocHead" onclick="fnFlash(this)">Group 1</DIV>
<UL CLASS="tocItemHide">
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 1</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 2</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 3</a>
</UL>
<LI><DIV onclick="fnFlash(this)" CLASS="tocHead">Group 2</DIV>
<UL CLASS="tocItemHide">
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 1</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 2</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 3</a>
</UL>
<LI><DIV onclick="fnFlash(this)" CLASS="tocHead">Group 3</DIV>
<UL CLASS="tocItemHide">
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 1</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 2</a>
<LI><a href="/workshop/samples/author/persistence/saveTarget_1.htm">Item 3</a>
</UL>
</UL>
</div>
<div id="oOutput" style="position: absolute; top: 100; left: 150; height: 250; width: 350; background-color: #EFEFEF; border: '1 #505050 solid';">
<b>Comments:</b>
<br>
<span style="font-size: 8pt; font-family: Arial;"> Notes about what is happening in the JScript functions will be displayed here.</span>
<div id="oScratch" style="background-color: #CFCFCF; border: '1 #505050 solid';">
<p>
</div>
<div style="display: none;" id="oScratchDiv">
<textarea onload="fnRestComments()" id=oScratchText class=saveHistory>
</textarea>
</div>
</div><DIV STYLE="position: absolute; top: 350">
<!-- START_PAGE_FOOTER -->
<BR><BR><BR>
<MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">© 2003 Microsoft Corporation. All rights reserved.</MSHelp:link>.
<!-- END_PAGE_FOOTER -->
</DIV>
</BLOCKQUOTE>
</BODY>
</HTML>